Give page transition each category changed with jquery

Vote count:

0

how to give page transition, with each category name and qty, i mean when i click office category, it will show an popup overlay with that name caption also qty while loading, dont mind for the category name, and qty, it will do on php, ijust need each transition will showing that overlay effect,

http://ift.tt/1LdFHsT

http://ift.tt/1LdFJBc

    <div class="desk-08 tab-08 mob-hide prod-nav">
            <h2 id="prod-title">Products</h2>
            <div id="shop-categories-with-links-and-totals">
            <ul class="products-nav-list">
             <li class="md-top-product-category-link "><a href="/products" cat_title="All Products" class="shop-cat-link" ajaxload="ajaxyes" slug="products" num_products="138" home_url ="/"><span class="nav-all-desktop">All</span><span class="nav-all-mobile">Products</span><span class="md-top-product-category-count"><span>138</span></span></a></li>
             <li class="md-top-product-category-link"><a href="/product-category/office/" cat_title="Office" class="shop-cat-link" ajaxload="ajaxno" slug="office" num_products="27" home_url ="h/">Office<span class="md-top-product-category-count"><span>27</span></span></a></li>
             <li class="md-top-product-category-link"><a href="/books-magazines/" cat_title="Books &amp; Magazines" class="shop-cat-link" ajaxload="ajaxno" slug="books-magazines" num_products="39" home_url ="/">Books &amp; Magazines<span class="md-top-product-category-count"><span>39</span></span></a></li>                  
             <li class="md-top-product-category-link"><a href="/product-category/home/" cat_title="Home" class="shop-cat-link" ajaxload="ajaxno" slug="home" num_products="45" home_url ="/">Home<span class="md-top-product-category-count"><span>45</span></span></a></li>
             <li class="md-top-product-category-link"><a href="/product-category/children/" cat_title="Children" class="shop-cat-link" ajaxload="ajaxno" slug="children" num_products="23" home_url ="/">Children<span class="md-top-product-category-count"><span>23</span></span></a></li>
             <li class="md-top-product-category-link"><a href="/product-category/outdoor/" cat_title="Outdoor" class="shop-cat-link" ajaxload="ajaxno" slug="outdoor" num_products="10" home_url ="/">Outdoor<span class="md-top-product-category-count"><span>10</span></span></a></li>
             <li class="nav-search-link"><a href="ajax-search" class="search" data-fancybox-type="iframe">Search</a></li>
             <li class="nav-index-link"><a href="index/">Index</a></li></ul></div>          
    </div>  

ul.products-nav-list li {
    margin-right: 12px;
    display: inline;
    float: left;
}
.navigation ul li {
    color: #8A8A8A;
    border-top: 0px none;
    display: inline-block;
}
.navigation ul li a {
    padding: 0px;
    outline: 0px none;
}
.navigation ul li a {
    line-height: 51px;
    height: 50px;
}
.navigation ul li a {
    color: #8A8A8A;
    padding: 0px;
    display: block;
    line-height: 34px;
    height: 32px;
}
.navigation ul li a .md-top-product-category-count {
    display: inline;
}
.navigation ul li a .md-top-product-category-count {
    display: none;
    color: #8A8A8A;
    vertical-align: super;
    font-size: 0.8em;
    padding: 0px 0px 0px 5px;
}

Thanks

Warmly

asked 51 secs ago

Joey The Whale

7

Give page transition each category changed with jquery