Membuat Menu Navigasi Responsive dengan JQuery

Menu navigasi yang bagus dengan tampilan yang menarik, tentu itu memberikan nilai plus tersendiri untuk tampilan blog tersebut. Menu navigasi ada yang terbuat dari CSS3 saja, dan ada juga di padukan dengan JQuery. Kali ini saya akan membahas sebuah menu navigasi yang saya temukan di sebuah situs berisikan tutorial JQuery. Situs tersebut beralamat jqueryscript.net. Buat kamu yang ingin belajar JQuery lebih dalam lagi, tidak salahnya untuk mengunjungi situs tersebut. Menu navigasi kali ini telah dimodivifikasi ulang susunan scriptnya, dan menurut saya susuna scriptnya disusun agar lebih mudah difahami untuk sahabat blogger sekalian. Dan juga tampilan menu tersebut akan terlihat jauh berbeda dari tutorial yang aslinya pada situs tersebut. Klik disini untuk melihat demonya.

Sebelumnya, pastikan dahulu apakah script pemanggilan JQuery sudah dipasang atau belum pada blog kamu. Jika belum, copy code di bawah ini kemudian pastekan kode tersebut diatas </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Selanjutnya adalah pemasangan script lainnya :

1. Copy kode css dibawah ini, kemudian tempatkan kode tersebut diatas kode </style> atau </b:skin>.

/* Menu Navigasi */
.nav {background:#E5E5E5;height: 35px}
#nav {width: 100%;font: 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;position: static;}
#nav ul, #nav li {list-style: none;margin: 0;padding: 0;z-index:99999}
#nav > a {display: none;}
#nav li {position: relative;}
#nav li a, #nav li a:hover {color: #fff;display: block;text-decoration: none;}
#nav > ul {background:none;height: 35px}
#nav > ul > li {width: 15%;height: 100%;float: left;list-style: none;margin: 0;padding: 0;}
#nav > ul > li > a {height: 100%;font-size: 14px;font-weight:bold;line-height: 35px;text-align: center;}
#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a {background-color:#547279;transition: all 0.5s ease-in-out;}
@media only screen and ( max-width:500px) {
#nav {position: relative;top: auto;left: auto;}
#nav > a {width: 35px;height: 35px;text-align: left;text-indent: -9999px;background-color: #E5E5E5;position: relative;}
#nav > a:before, #nav > a:after {position: absolute;border: 2px solid black;top: 35%;left: 25%;right: 25%;content: '';}
#nav > a:after {top: 60%;}
#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {display: block;}
#nav > ul {height: auto;display: none;position: absolute;left: 0;right: 0;}
#nav:target > ul {display: block;}
#nav > ul > li {width: 100%;float: none;}
#nav > ul > li > a {height: auto;text-align: center;padding:1.5px 7px 1.5px 7px;}
#nav > ul > li:not( :last-child ) > a {border: none;}
}
.menu1 {background-color:#1358BA}
.menu2 {background-color:#03C7E9}
.menu3 {background-color:#FE1635}
.menu4 {background-color:#6E8D5A}

2. Copy kode Javascript dibawah ini, dan pastekan kode tersebut diatas </head>.

<script type='text/javascript'>
$( function()
{
$( '#nav li:has(ul)' ).doubleTapToGo();
});
</script>

3. Untuk pemasangan script HTML nya bisa di taruh didalam widget baru (Tata Letak > Tambah Gadget HTML/JavaScript) atau kedalam pengeditan HTML template kamu.

<div class='nav'>
<div id="nav" role="navigation"> <a href="#nav">Show navigation</a> <a href="#" title="Hide navigation">Hide navigation</a>
<ul class="clear-fix">
<li class='menu1'><a href="#">Home</a></li>
<li class='menu2'><a href="#">Profil</a></li>
<li class='menu3'><a href="#">Artikel</a></li>
<li class='menu4'><a href="#">Tutorial</a></li>
</ul>
</div>
</div>

Untuk bagian sub menu sengaja saya hilangkan, karena saya ingin memberikan kesan yang berbeda. Untuk pemasangan sub menu nya bisa kamu pelajari pada sumbernya. Sedangkan untuk pengeditan tampilannya pada versi mobile. Bisa kamu pelajari disini :

• Mengatur Tampilan Mobile Dengan CSS

http://www.jqueryscript.net/menu/Touch-Friendly-Responsive-jQuery-Dropdown-Menu-Plugin-doubletaptogo.html