Home > Developer > Web Develop
Css + html + js implementation drop-down and multi-level pop-up menus, cssjs
This article uses css + html + js to implement a horizontal menu with a multi-level pop-up menu with a drop-down menu.
First, let's take a look:
First, you should write the html code. The code is relatively simple. The Code is as follows:
<Body> <div id = "menu"> <ul> <li> <a href = "#" id = "current"> homepage </a> </li> <li> <a href = "#"> webpage layout </a> <ul> <li> <a href = "#"> adaptive width </a> </li> <li> <a href = "#"> fixed width </a> </li> </ul> </li> <a href = "#"> web tutorial </a> <ul> <li> <a href = "#"> getting started </a> </li> <a href = "#"> video tutorial </a> </li> <a href = "#"> FAQs </a> </li> </ul> </li> <li> <a href = "#"> web instance </a> </li> <a href = "#"> Common Code </a> </ li> </ul> </div> <div id = "s1"> <ul> <li> <a href = "#"> Software Engineering </a> <ul> <li> <a href = "#"> java ee </a> </li> <a href = "#"> c </a> </ li> </ul> </li> <a href = "#"> programming language </a> <ul> <li> <a href = "#"> android </a> </li> <a href = "#"> java </a> </li> </ul> </li> </ ul> </div> </body>
Then write the css code with comments in the Code to facilitate reading and understanding:
<Style type = "text/css"> body {font-family: Verdana;/* font */font-size: 12px;/* font size */line-height: 1.5;/* Row Height */} a {color: #000;/* normal color */text-decoration: none;/* cancel underline */}: hover {color: # F00;/* The color displayed when the mouse passes */} # menu {width: 500px;/* div width */height: 28px; /* height */margin: 0 auto;/* horizontal center */border-bottom: 3px solid # E10001; /* set the bottom line */} # menu ul {list-style: none;/* cancel list style */margin: 0px;/* the margin is 0 */padding: 0px;/* the padding is 0 */} # menu ul li {float: left;/* horizontal floating */margin-left: 2px; /* The left margin is 2px */} # menu ul li a {display: block; width: 87px; height: 28px; line-height: 28px; text-align: center; background: url (. /m14.jpg) 0 0 no-repeat; font-size: 14px;} # menu ul li a: hover {background: url (. /m13.jpg) 0 0 no-repeat;} # menu ul li a # current {background: url (. /m12.jpg) 0 0 no-repeat; font-weight: bold; color: # fff ;}# menu ul li ul {border: 1px solid # ccc; display: none; position: absolute ;}# menu ul li {float: none; width: 87px; background: # eee; margin: 0 ;}# menu ul li a {background: none ;}# menu ul li a: hover {background: #333; color: # fff ;}# menu ul li: hover ul {display: block ;} # menu ul li. sfhover ul {display: block;} # s1 {background-color: pink; width: 180px; border: 2px solid red; position: relative; left: 200px; top: pixel PX; height: 60px ;}# s1 ul li {list-style-type: none; height: 25px; width: 50px; background-color: # 0ff; float: left; margin: 10px ;}# s1 ul li ul {display: none; position: absolute; }# s1 ul li: HOVER ul {display: block; background-color: blue; margin: 0px; padding: 0px;/* width: 100px; */} # s1 ul li. sfhover ul {display: block; margin: 0px; padding: 0px;} # s1 ul li {border: 1px solid red; float: none; margin: 0px; width: 50px ;}</style>
<script type="text/javascript"> function menuFix() { var sfEls = document.getElementById("menu").getElementsByTagName("li"); var sfEls2 = document.getElementById("s1").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; }; sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; }; sfEls[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; }; sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); }; } for (var i=0; i<sfEls2.length; i++) { sfEls2[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; }; sfEls2[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; }; sfEls2[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; }; sfEls2[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); }; } }window.onload=menuFix;</script>
Now it can run normally, and the results shown in this article will appear. As it is for testing, some css code is not removed, mainly for debugging convenience.
There should be: www.scriptlover.com/controls/
How to do a multi-level drop-down menu with div + css
I will give you a source code for reference written in pure CSS + HTML.
____________________________________
Suckerfish drop-down menu
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.w3.org/..al.dtd">
<Html xmlns = "www.w3.org/5o/xhtml">
<Head>
<Title> Untitled Page </title>
<Style type = "text/css">
Ul. nav, ul. nav ul
{
Margin: 0;
Padding: 0;
List-style-type: none;
Font: left;
}
Ul. nav li
{
Float: left;
Width: 8em;
Background-color: #8BD400;
}
Ul. nav li ul
{
Width: 8em;
Position: absolute;
Left:-999em;
}
. Nav li: hover ul
{
Left: auto;
}
Ul. nav
{
Display: block;
Color: #2B3F00;
Text-decoration: none;
Padding: 0.3em 1em;
Border-right: 1px solid #486B02;
Border-left: 1px solid # E4FFD3;
}
Ul. nav li
{
Border-bottom: 1px solid #486B02;
Border-top: 1px solid #486B02;
Border-right: 0;
Border-left: 0;
... The remaining full text>
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
