HTML code nav menu ading
Genteh na:
<div id="nav"> <!-- nav container --><ul></div><li>item <!-- main item --><ul><ul> <!-- item submenu --></li><li>sub item</li></ul>
<div id="nav"><ul>
<li><a href="#">Zocia</a>
<ul class="submenu">
<li><a href="http://blog.zocia.com">Zocia Blog</a></li>
<li><a href="http://www.ns-services.blogspot.com">Zo Hornbill</a></li><li><a href="http://www.itzomi.blogspot.com">IT Zomi</a></li>
</ul>
</li>
<li><a href="#">Tech News</a>
<ul class="submenu">
<li><a href="http://www.zomi.net">Zomi.Net</a></li>
<li><a href=http://www.zocia.org>Zocia</a></li>
</ul>
</li>
<ul>
<div>
CSS Code
#nav{height:32px;
line-height:32px;
background:#3B5998;
padding:0 10px;
}#nav ul,
#nav ul li {margin:0;}
padding:0;
list-style:none;
#nav ul li{float:left;}
display:block;
Nav CSS ah nazat danding. #nav ul li {...}
Sub a ding #nav ul li ul li {...}
#nav ul li a:link,
#nav ul li a:visited{color:#FFF;}
font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 20px 0 6px;
display:block;
#nav ul li a:hover{color:#EBEFF7;}
#nav ul li ul li{float:none;}
display:block;
#nav ul li ul li a:link,
#nav ul li ul li a:visited{color:#444;}
font-size:11px;
font-weight:bold;
text-decoration:none;
padding:0 10px;
clear:both;
border-bottom:solid 1px #DEDEDE;
#nav ul li ul li a:hover{color:#3B5998;}
background:#EBEFF7;
Sub Menu a ding CSS code
.submenu {position: absolute;}
width: 160px;
background: #FFF;
padding: 10px;
border: solid 1px #2E4B88;
border-top: none;
display: none;
line-height: 26px;
z-index: 1000;
jQuery Code
Sub te na seelna ding jQuery Code
<script type="text/javascript">
function nav(){$('div#nav ul li').mouseover(function() {};$(this).find('ul:first').show();});
$('div#nav ul li').mouseleave(function() {$('div#nav ul li ul').hide();});
$('div#nav ul li ul').mouseleave(function() {$('div#nav ul li ul').hide();;});
$(document).ready(function() {nav();});
</script>
No comments:
Write comments