Navigation Menyamping Dan Bawah Juga Sama

Navigation yang diterapkan pada Template N2y Biasa. Dengan tampilan li dan pada ul menyamping tidak seperti biasanya. Hanya sedikit merubah CSSnya dan sentuhan JQuery .show(). Langsung cara membuatnya

Masukan Kode JQuery Library 1.3.2 ini:

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

Jika sudah ada kode diatas tidak perlu lagi !!!

Masukan Kode CSSnya:

#nav { width:97%; font-size:12px; color:#fff; font-weight:bold; margin:10px auto 0; padding:0 15px; border-bottom:10px solid #000; overflow:hidden; } #nav ul { list-style:none; padding:0; margin:0; } #nav li { list-style: none; margin:0; padding:0; } #nav li a, #nav li a:link, #nav li a:visited { background:#414141; color:#FFF; display:block; margin-left:2px; padding:10px 18px; } #nav li a:hover, #nav li a:active { background:#000; color:#fff; padding:13px 18px 10px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background:#000; width:150px; color:#FFF; font-weight:normal; float:none; margin:0; padding:10px; border-right:1px solid #fff; text-align:center; } #nav li li a:hover, #nav li li a:active { background:#D82412; color:#FFF; padding:10px; } #nav li { float:left; padding:0; } #nav li ul { background:#000; z-index:9999; position:absolute; left:0; height:34px; width:97%; margin:0 0 0 15px; padding:0; visibility:hidden; } #nav li ul a { width:97%; margin:0 0; padding:10px; } #nav li ul ul { width:100%; margin:0 0; padding:0; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left:0; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left:0; } #nav li:hover, #nav li.sfhover { position:static; }

Tampilannya disesuaikan selera sahabat blogger...

Masukan Kode HTMLnya:

<div id='nav'> <ul> <li><a href='/'>Home</a></li> <li><a href='http://nanoyulianto.blogspot.com/p/tentang-saya.html'>About Me</a></li> <li><a href='http://nanoyulianto.blogspot.com/p/sitemap.html'>Sitemap</a></li> <li><a href='#'>Follow</a> <ul> <li><a href='http://www.twitter.com/NanoYulianto'>Twitter</a></li> <li><a href='http://www.facebook.com/Hantu.Crew.N2o'>Facebook</a></li> <li><a href='http://www.google.com/buzz/hantunano'>Buzz</a></li> </ul> </li> <li><a href='#'>Template N2y Series</a> <ul> <li><a href='http://nanoyulianto.blogspot.com/2010/08/template-n2y-sedikit-mirip.html'>N2y Sedikit Mirip</a></li> <li><a href='http://nanoyulianto.blogspot.com/2010/08/template-n2y-suka-suka.html'>N2y Suka-Suka</a></li> <li><a href='http://nanoyulianto.blogspot.com/2010/09/template-n2y-shadow.html'>N2y Shadow</a></li> <li><a href='http://nanoyulianto.blogspot.com/2010/09/template-n2y-eksperiment.html'>N2y Eksperiment</a></li> <li><a href='#'>Site Template</a> <ul> <li><a href='http://www.zoomtemplate.com/'>Zoom Template</a></li> <li><a href='http://blogtemplate4u.com/'>Blog Template 4U</a></li> </ul> </li> <li/> </ul> </li> <li><a href='http:/feeds/posts/default' rel='alternate' type='application/rss+xml'>Feeds</a></li> </ul></div>

Diatas hanya contoh, diganti yang sesuai dengan blog anda...

Dan Masukan JQuery Efek .show() :

<script type='text/javascript'> function mainmenu(){ $(" #nav ul ").css({display: "inline"}); // Opera Fix $(" #nav li").hover(function(){ $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(500); },function(){ $(this).find('ul:first').css({visibility: "hidden"}) }); } $(document).ready(function(){ mainmenu(); });</script>

Selesai...

Semoga Bermanfaat...

Alhamdulillah