Navigation Menyamping atau Horizontal Dengan JQuery Slide Dan Clip

Demonya disini

Masukan kode JQuery Library :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js' type='text/javascript'/>

Jika sudah ada tidak perlu lagi !!!

Masukan kode JQuery :

<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("slide", {}, 400); },function(){ $(this).find('ul:first').css({visibility: "visible"}).hide("clip", {}, 300); }); } $(document).ready(function(){ mainmenu(); }); </script>

Masukan kode css berikut :

#nav{width:92%; font-size:14px; color:#fff; font-weight:bold; margin:0 auto} #nav ul{list-style:none; float:left; padding:0 20px; margin:0} #nav li{list-style:none; padding:0; margin:0 1px; color:#fff} #nav li a, nav li a:link, nav li a:visited{background:#E6AEEA; border:1px solid #f9edfa; color:#fff; display:block; padding:7px 18px 10px; border-radius:10px 10px 0 0; -moz-border-radius:10px 10px 0 0; -webkit-border-radius:10px 10px 0 0; -o-border-radius:10px 10px 0 0} #nav li a:hover, nav li a:active{background:#E6AEEA; color:#fff; text-decoration:none; opacity:0.4; filter:alpha(opacity=40)} #nav li li a, #nav li li a:link, #nav li li a:visited{background:#E6AEEA; width:150px; color:#FFF; font-weight:normal; float:none; margin:0; padding:7px 10px 10px; border-right:1px solid #fff; text-align:center; border-radius:0 0 0 0; -moz-border-radius:0 0 0 0; -webkit-border-radius:0 0 0 0; -o-border-radius:0 0 0 0} #nav li li a:hover, #nav li li a:active{background:#E6AEEA; color:#FFF; border-radius:0 0 0 0; -moz-border-radius:0 0 0 0; -webkit-border-radius:0 0 0 0; -o-border-radius:0 0 0 0} #nav li{float:left; padding:0} #nav li ul{background:#555; z-index:9999; position:absolute; left:0; height:35px; width:890px; margin:0 0 0 63px; padding:0; visibility:hidden} #nav li ul a{width:90%; 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}

Kode css diatas diberi sentuhan CSS3, kalau tidak suka boleh disesuaikan selera...

Masukan kode HTML :

<div id='nav'> <ul> <li class='naik'><a href='/' title='Home Page'>Home</a></li> <li class='naik'><a href='http://nanoyulianto.blogspot.com/' title='Nano Yullianto'>Nano</a></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='#'>Here</a> <ul> <li><a href='/'>Beutifull</a></li> <li><a href='#'>Here</a> <ul> <li><a href='/'>U like it</a></li> <li><a href='/'>Slide</a></li> <li><a href='/'>Navigation</a></li> </ul> </li> <li><a href='/'>Cool</a></li> <li><a href='/'>Sweet</a></li> <li/> </ul> </li> <li class='naik'><a href='http:/feeds/posts/default' rel='alternate' type='application/rss+xml'>Feeds</a></li> </ul> </div>

Disesuaikan dengan blog anda.

Semoga Bermanfaat...

Alhamdulillah