This article illustrates the method of js+css to realize navigation effect. Share to everyone for your reference. The implementation methods are as follows:
1. The program code is as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.1//en" "Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<TITLE>CSS+JS implementation of a good compatibility of the infinite-level pull-down menu </title>
<style type= "Text/css" >
*{margin:0; padding:0; border:0;}
body{font:12px/130% Verdana,geneva,arial,helvetica,sans-serif, song body; Li{list-style:none;}
. Clearfix:after{content: "";d Isplay:block;height:0;clear:both;visibility:hidden;}. Clearfix{display:inline-block;}
a:link{color: #000; text-decoration:none;}
a:visited{color: #000; text-decoration:none;}
a:hover{color: #000; text-decoration:none;}
. menu{width:778px; height:26px background: #fff; margin:0 auto;}
. menusel{float:left;width:100px; position:relative height:25px; background: #ddd; line-height:25px; margin-left:1px ; *margin-left:0px;_margin-left: -1px;}
. Menusel h2{font-size:12px;
. Menusel a{Display:block;text-align:center width:100px;border:1px solid #a4a4a4; height:25px Solid #a4a4a4; position:relative; Z-index:2;}
. Menusel a:hover{border:1px solid #a4a4a4; border-bottom:1px dashed #eeeeee; position:relative; z-index:2; height:25px;}
. ahover a{border-bottom:1px dashed #eeeeee; background: #eeeeee;}
. position{position:absolute; z-index:1;}
Menusel ul{width:125px background: #eee; border:1px solid #a4a4a4 margin-top: -1px; position:relative; z-index:1; Display:none;}
. Menusel. block{Display:block;
. Typeul li{border-bottom:1px dashed #a4a4a4; width:125px; position:relative; float:left;}
. Typeul Li a{border:none;width:125px;
. Typeul Li a:hover{border:none; background: #ddd;}
. typeul{margin-left:0; }
. Typeul ul{left:125px; top:0; position:absolute;}
. fli{margin-left: -1px border-left: #eeeeee solid 1px;}
. Menusel. lli{Border:none;
</style>
<script type= "Text/javascript" >document.execcommand ("Backgroundimagecache", False, True);</script> <!--IE6 background picture flicker problem-->
<body>
<div class= "Menu" >
<div id= "menu1" class= "Menusel" >
<div class= "Position" >
<ul class= "Clearfix Typeul" >
<li><a href= "http://www.jb51.net" > Menu options 1-2</a></li>
<li>
<a href= "#" > Menu options 1-2</a>
<ul>
<li class= "Fli" ><a href= "#" > Menu options 1-2-1</a></li>
<li class= "Lli" ><a href= "#" > Menu options 1-2-2</a></li>
</ul>
</li>
<li><a href= "http://www.jb51.net" > Menu options 1-2</a></li>
<li class= "Lli" ><a href= "#" > Menu options 1-2</a></li>
</ul>
</div><!--Position-->
</div><!--Menusel-->
<div id= "menu2" class= "Menusel" >
<div class= "Position" >
<ul class= "Clearfix Typeul" >
<li><a href= "#" > Menu options 2-2</a></li>
<li><a href= "#" > Menu options 2-2</a>
<ul>
<li class= "Fli" ><a href= "#" > Menu options 2-2-1</a></li>
<li class= "Lli" ><a href= "#" > Menu options 2-2-2</a>
<ul>
<li class= "Fli" ><a href= "#" > Menu options 2-2-1</a></li>
<li class= "Lli" ><a href= "#" > Menu options 2-2-2</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href= "#" > Menu options 2-2</a></li>
<li class= "Lli" ><a href= "#" > Menu options 2-2</a></li>
</ul>
</div><!--Position-->
</div><!--Menusel-->
<div id= "Menu3" class= "Menusel" >
<div class= "Position" >
<ul class= "Clearfix Typeul" >
<li><a href= "#" > Menu options 3-2</a></li>
<li><a href= "#" > Menu options 3-2</a>
<ul>
<li class= "Fli" ><a href= "#" > Menu options 3-2-1</a></li>
<li class= "Lli" ><a href= "#" > Menu options 3-2-2</a>
<ul>
<li class= "Fli" ><a href= "#" > Menu options 3-2-1</a></li>
<li class= "Lli" ><a href= "#" > Menu options 3-2-2</a>
<ul>
<li class= "Fli" ><a href= "#" > Menu options 3-2-1</a></li>
<li class= "Lli" ><a href= "#" > Menu options 3-2-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href= "#" > Menu options 3-2</a></li>
<li class= "Lli" ><a href= "#" > Menu options 3-2</a></li>
</ul>
</div><!--Position-->
</div><!--Menusel-->
</div><!--Menu-->
<script type= "Text/javascript" >
for (var x = 1; x < 4; + +)
{
var menuid = document.getElementById ("menu" +x);
Menuid.num = x;
Type ();
}
function type ()
{
var menuh2 = menuid.getelementsbytagname ("H2");
var Menuul = menuid.getelementsbytagname ("ul");
var Menuli = menuul[0].getelementsbytagname ("Li");
Menuh2[0].onmouseover = Show;
Menuh2[0].onmouseout = Unshow;
Menuul[0].onmouseover = Show;
Menuul[0].onmouseout = Unshow;
Function Show ()
{
Menuul[0].classname = "Clearfix Typeul block"
}
function Unshow ()
{
Menuul[0].classname = "Typeul"
}
for (var i = 0; i < menuli.length; i++)
{
Menuli[i].num = i;
var Liul = menuli[i].getelementsbytagname ("ul") [0];
if (Liul)
{
Typeshow ()
}
}
function Typeshow ()
{
Menuli[i].onmouseover = Showul;
Menuli[i].onmouseout = Unshowul;
}
function Showul ()
{
Menuli[this.num].getelementsbytagname ("ul") [0].classname = "block";
}
function Unshowul ()
{
Menuli[this.num].getelementsbytagname ("ul") [0].classname = "";
}
}
</script>
</body>
2. Program effect
I hope this article will help you with your JavaScript programming.
