Home > Developer > JavaScript
Examples of js + css implementation navigation effects and jscss navigation
This article describes how to implement the navigation effect through js + css. Share it with you for your reference. The specific implementation method is as follows:
1. The program code is as follows:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> CSS + JS provides an infinitely compatible drop-down menu </title>
<Style type = "text/css">
* {Margin: 0; padding: 0; border: 0 ;}
Body {font: 12px/130% verdana, geneva, arial, helvetica, sans-serif,; ;} li {list-style: none ;}
. Clearfix: after {content: ""; display: 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; border-bottom: 1px 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: # eeeeeeee ;}
. 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.exe cCommand ("BackgroundImageCache", false, true); </script> <! -- IE6 background image flashing -->
</Head>
<Body>
<Div class = "menu">
<Div id = "menu1" class = "menusel">
<H2> <a href = "/"> menu 1 </a> <Div class = "position">
<Ul class = "clearfix typeul">
<Li> <a href = "http://www.bkjia.com"> menu option 1-2 </a> </li>
<Li>
<A href = "#"> menu option 1-2 </a>
<Ul>
<Li class = "fli"> <a href = "#"> menu option 1-2-1 </a> </li>
<Li class = "lli"> <a href = "#"> menu options 1-2-2 </a> </li>
</Ul>
</Li>
<Li> <a href = "http://www.bkjia.com"> menu option 1-2 </a> </li>
<Li class = "lli"> <a href = "#"> menu option 1-2 </a> </li>
</Ul>
</Div> <! -- Position -->
</Div> <! -- Menusel -->
<Div id = "menu2" class = "menusel">
<H2> <a href = "#"> menu 2 </a> <Div class = "position">
<Ul class = "clearfix typeul">
<Li> <a href = "#"> menu option 2-2 </a> </li>
<Li> <a href = "#"> menu option 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 option 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">
<H2> <a href = "#"> menu 3 </a> <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; x ++)
{
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>
</Html>
2. Program Effect
I hope this article will help you design javascript programs.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
