သမိုင္​း

Theme images by Storman. Powered by Blogger.

Text Widget

Sports

Gadgets

Blog Archive

Travel

Definition List

Friday, April 6, 2012

Blogger ah Sub menu bangci bawlding

HTML code nav menu ading
Genteh na:


<div id="nav"> <!-- nav container -->
<ul>
<li>item <!-- main item -->
<ul> <!-- item submenu -->
<li>sub item</li>
</ul>
</li>
<ul>
</div>
A code muhtawm theih

<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