ListByCategory

by Mark

HTML

<div class="prods-cnt">
        <div class="category-menu">
            <ul>
                <!-- change the "cat-1", "cat-2", "cat-3" with your "Categories ID" -->
                <li class="cat-active" data-category="prod-cnt">All</li>
                <li class="" data-category="cat-1">Category 1</li>
                
                <li class="" data-category="cat-2">Category 2</li>
            </ul>
            <select>
      <option class="cat-active" data-category="prod-cnt">All</option>
       <option class="" data-category="cat-2">2</option>
  </select>
        </div>        <div class="clear"></div>

 
        <!-- change the "cat-1", "cat-2", "cat-3" with your "Categories ID" -->
        <div class="prod-cnt prod-box shadow cat-1" >
            <img src="img/product1.jpg">
            <div class="buy-ico"></div>
            <h3>
                <a href="#">Feather Dress With Embellished Lace Top</a>
            </h3>
            <div class="price-cnt">
                <div class="price old">$96.00</div>
                <div class="price">$45.00</div>
            </div>
            <p>
                Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
            </p>

        </div><!-- end product box prod-box -->


        <div class="prod-cnt prod-box shadow cat-2">
            <img src="img/product4.jpg">
            <div class="buy-ico"></div>
            <h3>
                <a href="#">Feather Dress With Embellished Lace Top</a>
            </h3>
            <div class="price-cnt">
                <div class="price old">$96.00</div>
                <div class="price">$45.00</div>
            </div>
            <p>
                Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet...

CSS

.clear{clear: both;}
.grid, .list{
	border-radius: 3px;
	width: 15px; 
	height:15px; 
	margin-left: 10px; 
	float: left; 
	cursor:  pointer; 
	padding: 5px; 
}

.view-cnt2,.view-cnt{ width:70px; height: 25px; float: right; margin-right: 15px;}

.grid{background: url(../img/grid.png) 50% no-repeat;}
.grid:hover{background: #7eb800 url(../img/gridw.png) 50% no-repeat;}
.grid-active{ background: #039fd3 url(../img/gridw.png) 50% no-repeat; }

.list{background:  url(../img/list.png) 50% no-repeat;}
.list:hover{background: #7eb800 url(../img/listw.png) 50% no-repeat;}
.list-active{background: #039fd3 url(../img/listw.png) 50% no-repeat;}

.prods-cnt2,.prods-cnt{
	width: 720px; height:auto; min-height: 400px; 
	margin: 40px auto; padding: 40px;
	background-color: #fafafa;
	border: #ccc 1px dotted;
	overflow: auto; 
}

/* Category menu Style */
.category-menu2 ul,.category-menu ul{ padding-left: 15px;}
.category-menu2 ul li,.category-menu ul li{ 
	list-style: none; cursor: pointer;
	float: left; margin-right: 10px;
	background-color: #039fd3; color: #fff; 
	padding: 5px 10px;
	font-size: 13px;
	border-radius: 3px;
	-webkit-transition:background-color 0.3s ease-in;  
   	-moz-transition:background-color 0.3s ease-in;  
   	-o-transition:background-color 0.3s ease-in;  
   	transition:background-color 0.3s ease-in;
}
.category-menu ul li:hover, .category-menu ul li.cat-active{
	background: #7eb800;
}
.category-menu2 ul li:hover, .category-menu2 ul li.cat-active2{
	background: #7eb800;
}

/* Grid Style */
.prod-box{
	width: 190px; height: 260px;
	padding: 10px; margin: 15px;
	background-color: #fff;
	float: left;
}

.prod-box img:first-child, .prod-box-list img:first-child{width: 190px; float: left;}
.prod-box h3 a{
	text-decoration: none;
	width:140px;
	float: left;
	margin: 5px 0;
	color:#888;
	font: italic normal 14px georgia;
	font-style: italic;
}
.prod-box p{ display: none;}

.prod-box .old{
	margin-right: 20px;
	color: #be0000 !important;
	text-decoration:...

JavaScript

$(function(){

    /* filter */
    $(".category-menu ul li").click(function(){
        var CategoryID = $(this).data('category');
        $('.category-menu ul li').removeClass('cat-active');
        $(this).addClass('cat-active');
        
        $('.prod-cnt').each(function(){
            if(($(this).hasClass(CategoryID)) == false){
               $(this).css({'display':'none'});
            };
        });
        $('.'+CategoryID).fadeIn(); 
        
    });
    
    $('.category-menu select').change(function(){
        var CategoryID = $(this).find('option:selected').data('category');
        $('.prod-cnt').each(function(){
            if(($(this).hasClass(CategoryID)) == false){
               $(this).css({'display':'none'});
            };
        });
        $('.'+CategoryID).fadeIn(); 
    });
    
    /* filter2 */
    $(".category-menu2 ul li").click(function(){
        var CategoryID = $(this).data('category');
        $('.category-menu2 ul li').removeClass('cat-active2');
        $(this).addClass('cat-active2');
        
        $('.prod-cnt2').each(function(){
            if(($(this).hasClass(CategoryID)) == false){
               $(this).css({'display':'none'});
            };
        });
        $('.'+CategoryID).fadeIn(); 
        
    });
    
    $('.category-menu2 select').change(function(){
        var CategoryID = $(this).find('option:selected').data('category');
        $('.prod-cnt2').each(function(){
            if(($(this).hasClass(CategoryID)) == false){
               $(this).css({'display':'none'});
            };
        });
        $('.'+CategoryID).fadeIn(); 
    });
    
});