jQuery Accordion Widget with CSS Sprites

Sunday, November 4, 2012

Lakukanlah terapan-terapan jQuery, CSS, JavaScript, dan HTML yang dapat membuat blog Anda meraih peringkat yang mapan pada Search Engine Optimization (SEO). Mulai dari penerapan widget, posting, sampai pada hal modifikasi template. Disamping itu pula, alangkah indahnya jika blog anda dilengkapi dengan accessories blog yang menarik untuk dilihat.

Seperti yang akan diubahas pada tutorial kali ini, pemasangan accordion pada widget blog anda dengan CSS Sprites yang nantinya akan membuat mata pengunjung memukau, Wuih, bagus templatnya..!!!

#page-wrap{width:300px;margin:10px auto}
a{text-decoration:none}
ul{list-style:none}
.box{background:#a7a7a7;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;padding:10px;margin:0 0 15px 0}
.box ul li{font-size:11px;margin:0;border-bottom:1px solid #666}
.box ul li a{color:#222;display:block;padding:4px 4px;margin:0;border-bottom:1px solid #ccc}
.box ul li:last-child,.box ul li:last-child a{border:none}
.box ul li a:hover{background:#ccc;text-decoration:none}
#catNav{background:#494949;padding:5px 5px 5px 37px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;overflow:hidden;margin:0 0 10px 0}
#catNav li{display:inline}
#catNav li a{display:block;width:50px;height:50px;text-indent:-9999px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBxpP1jRK_vToZYXll0vonCLl96s8xRS08rCpGCYxYHkqgPjPeSX-1fWz7nLYiSSWOjL4ct4ZnnizfRPeg5WJ_elWjrNz5zlOZo5oe35Aj1qVjgEp0HlTRgqdWM7dVRgx1yAMSECqA75M/s1600/catSprite.png);float:left;border:none;padding:0}
#catNav li a#list-one-button{background-position:-50px -50px}
#page-wrap #catNav li.activeCatButton a#list-one-button{background-position:-50px -100px}
#catNav li a#list-one-button:hover{background-position:-50px 0}
#catNav a#list-two-button{background-position:-100px -50px}
#page-wrap #catNav li.activeCatButton a#list-two-button{background-position:-100px -100px}
#catNav li a#list-two-button:hover{background-position:-100px 0}
#catNav a#list-three-button{background-position:0 -50px}
#page-wrap #catNav li.activeCatButton a#list-three-button{background-position:0 -100px}
#catNav li a#list-three-button:hover{background-position:0 0}
#catNav a#list-four-button{background-position:-150px -50px}
#page-wrap #catNav li.activeCatButton a#list-four-button{background-position:-150px -100px}
#catNav li a#list-four-button:hover{background-position:-150px 0}

<div id='page-wrap'>
 <div class='box'>
  <ul id='catNav'>
   <li class='activeCatButton'><a id='list-one-button'>Tab 1</a></li>
   <li><a id='list-two-button'>Tab 2</a></li>
   <li><a id='list-three-button'>Tab 3</a></li>
   <li><a id='list-four-button'>Tab 4</a></li>
  </ul>
  <ul class='cat-list' id='list-one'>
   <li><a href='#'>Item Tab 1</a></li>
   <li><a href='#'>Item Tab 1</a></li>
   <li><a href='#'>Item Tab 1</a></li>
   <li><a href='#'>Item Tab 1</a></li>
  </ul>
  <ul class='cat-list' id='list-two'>
   <li><a href='#'>Item Tab 2</a></li>
   <li><a href='#'>Item Tab 2</a></li>
   <li><a href='#'>Item Tab 2</a></li>
   <li><a href='#'>Item Tab 2</a></li>
  </ul>
  <ul class='cat-list' id='list-three'>
   <li><a href='#'>Item Tab 3</a></li>
   <li><a href='#'>Item Tab 3</a></li>
   <li><a href='#'>Item Tab 3</a></li>
   <li><a href='#'>Item Tab 3</a></li>
  </ul>
  <ul class='cat-list' id='list-four'>
   <li><a href='#'>Item Tab 4</a></li>
   <li><a href='#'>Item Tab 4</a></li>
   <li><a href='#'>Item Tab 4</a></li>
   <li><a href='#'>Item Tab 4</a></li>
  </ul>
 </div>
</div>

Silakan Ganti tulisan atau kata yang di sort light dengan judul link yang diinginkan.

<script type='text/javascript'>
    //<![CDATA[
    $(function() {

        $("#list-two").hide();
        $("#list-three").hide();
        $("#list-four").hide();

        $("#list-one-button").click(function() {
            $(".cat-list").slideUp(600);
            $("#list-one").slideDown(600);
        });

        $("#list-two-button").click(function() {
            $(".cat-list").slideUp(600);
            $("#list-two").slideDown(600);
        });

        $("#list-three-button").click(function() {
            $(".cat-list").slideUp(600);
            $("#list-three").slideDown(600);
        });

        $("#list-four-button").click(function() {
            $(".cat-list").slideUp(600);
            $("#list-four").slideDown(600);
        });

        $("#catNav li a").click(function() {
            $("#catNav li").removeClass("activeCatButton");
            $(this).parent().addClass("activeCatButton");
        });
    });
    //]]>
</script>

Live Demo

Source » CSS Tricks

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini