Menu Vertikal Navigasi dengan CSS3 & JQuery

Kali ini saya akan menjelaskan secara singkat bagaimana cara membuat Menu Vertikal Navigasi dengan CSS3 & JQuery. Oke langsung saja kita simak langkah-langkahnya dibawah ini.

Masukkan kedua code CSS dan HTML dibawah ini pada halaman web / blog anda.
CSS

body {
    font-size: 100%;
    background:#32373d;
}
a {
    text-decoration: none;
}
ul, ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#wrapper {
    width: 220px;
    margin: 100px auto;
    font-size: 0.8125em;
}
.menu {
    width: auto;
    height: auto;
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
    -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.menu > li > a {
    background-color: #616975;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
    background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');
    border-bottom: 1px solid #33373d;
    -webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
    -moz-box-shadow: inset 0px 1px 0px 0px #878e98;
    box-shadow: inset 0px 1px 0px 0px #878e98;
    width: 100%;
    height: 2.75em;
    line-height: 2.75em;
    text-indent: 2.75em;
    display: block;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #fff;
    text-shadow: 0px 1px 0px rgba(0,0,0,.5);
}
.menu ul li a {
    background: #fff;
    border-bottom: 1px solid #efeff0;
    width: 100%;
    height: 2.75em;
    line-height: 2.75em;
    text-indent: 2.75em;
    display: block;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.923em;
    font-weight: 400;
    color: #878d95;
}
.menu ul li:last-child a {
    border-bottom: 1px solid #33373d;
}
.menu > li > a:hover, .menu > li > a.active {
    background-color: #35afe3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
    background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
    border-bottom: 1px solid #103c56;
    -webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
    -moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
    box-shadow: inset 0px 1px 0px 0px #6ad2ef;
}
.menu > li > a.active {
    border-bottom: 1px solid #1a638f;
}
.menu > li > a:before {
    content: '';
    background-image: url(../images/sprite.png);
    background-repeat: no-repeat;
    font-size: 36px;
    height: 1em;
    width: 1em;
    position: absolute;
    left: 0;
    top: 50%;
    margin: -.5em 0 0 0;
}
.item1 > a:before {
    background-position: 0 0;
}
.item2 > a:before {
    background-position: -38px 0;
}
.item3 > a:before {
    background-position: 0 -38px;
}
.item4 > a:before {
    background-position: -38px -38px;
}
.item5 > a:before {
    background-position: -76px 0;
}
.menu > li > a span {
    font-size: 0.857em;
    display: inline-block;
    position: absolute;
    right: 1em;
    top: 50%;
    background: #48515c;
    line-height: 1em;
    height: 1em;
    padding: .4em .6em;
    margin: -.8em 0 0 0;
    color: #fff;
    text-indent: 0;
    text-align: center;
    -webkit-border-radius: .769em;
    -moz-border-radius: .769em;
    border-radius: .769em;
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    text-shadow: 0px 1px 0px rgba(0,0,0,.5);
    font-weight: 500;
}
.menu > li > a:hover span, .menu > li a.active span {
    background: #2173a1;
}
.menu > li > ul li a:before{
    content: 'â–¶';
    font-size: 8px;
    color: #bcbcbf;
    position: absolute;
    width: 1em;
    height: 1em;
    top: 0;
    left: -2.7em;
}

.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
    color: #32373D;
}

.menu ul > li > a span {
    font-size: 0.857em;
    display: inline-block;
    position: absolute;
    right: 1em;
    top: 50%; /
    background: #fff;
    border: 1px solid #d0d0d3;
    line-height: 1em;
    height: 1em;
    padding: .4em .7em;
    margin: -.9em 0 0 0;
    color: #878d95;
    text-indent: 0;
    text-align: center;
    -webkit-border-radius: .769em;
    -moz-border-radius: 769em;
    border-radius: 769em;
    text-shadow: 0px 0px 0px rgba(255,255,255,.01));
}

Setelah itu masukkan juga code HTML nya.

HTML

<div id="wrapper">

 <ul class="menu">
 <li class="item1"><a href="#">Friends 340</a>
 <ul>
 <li class="subitem1"><a href="#">Cute Kittens 14</a></li>
 <li class="subitem2"><a href="#">Strange “Stuff” 6</a></li>
 <li class="subitem3"><a href="#">Automatic Fails 2</a></li>
 </ul>
 </li>
 <li class="item2"><a href="#">Videos 147</a>
 <ul>
 <li class="subitem1"><a href="#">Cute Kittens 14</a></li>
 <li class="subitem2"><a href="#">Strange “Stuff” 6</a></li>
 <li class="subitem3"><a href="#">Automatic Fails 2</a></li>
 </ul>
 </li>
 <li class="item3"><a href="#">Galleries 340</a>
 <ul>
 <li class="subitem1"><a href="#">Cute Kittens 14</a></li>
 <li class="subitem2"><a href="#">Strange “Stuff” 6</a></li>
 <li class="subitem3"><a href="#">Automatic Fails 2</a></li>
 </ul>
 </li>
 <li class="item4"><a href="#">Podcasts 222</a>
 <ul>
 <li class="subitem1"><a href="#">Cute Kittens 14</a></li>
 <li class="subitem2"><a href="#">Strange “Stuff” 6</a></li>
 <li class="subitem3"><a href="#">Automatic Fails 2</a></li>
 </ul>
 </li>
 <li class="item5"><a href="#">Robots 16</a>
 <ul>
 <li class="subitem1"><a href="#">Cute Kittens 14</a></li>
 <li class="subitem2"><a href="#">Strange “Stuff” 6</a></li>
 <li class="subitem3"><a href="#">Automatic Fails 2</a></li>
 </ul>
 </li>
 </ul>

</div>


<script type="text/javascript">
 $(function() {

 var menu_ul = $('.menu > li > ul'),
 menu_a = $('.menu > li > a');

 menu_ul.hide();

 menu_a.click(function(e) {
 e.preventDefault();
 if(!$(this).hasClass('active')) {
 menu_a.removeClass('active');
 menu_ul.filter(':visible').slideUp('normal');
 $(this).addClass('active').next().stop(true,true).slideDown('normal');
 } else {
 $(this).removeClass('active');
 $(this).next().stop(true,true).slideUp('normal');
 }
 });

 });
</script>

Untuk lebih jelasnya lagi silahkan anda klik tombol demo di bawah ini untuk melihat demonya

DEMO

Atau bisa download source codenya disini.

menu.rar

Mungkin cukup sekian postingan dari saya semoga postingan ini dapat bermanfaat bagi anda semuanya.

Source: webdesign.tutsplus.com