Drop-down and pop-up menu is a common form of web site design, this menu form can make full use of the page now hide and display more content, and can be a reasonable classification of content display, is a very good form of navigation.
Early Drop-down or pop-up menus enable the hiding of content through hidden layer or div, which responds to user action through JavaScript scripts and is currently used in the form of javascript+div or other elements to make such navigation. The difference is that the entire navigation will use the standard CSS layout to build, no longer use the table to make the menu, the Drop-down menu is mentioned above the combination of horizontal navigation and vertical navigation, and through the CSS for many attributes of support, the same menu no longer need more than one div to cooperate with each other to complete, Use CSS layout to make Drop-down menu element, even can directly control the UL or LI element, now to try a simplest drop-down menu of production, need to add that the Pull-down menu is implemented using a lot of JavaScript technology, There is no excessive grammatical integration of JavaScript technology here, just want to use the existing examples to tell you because of the flexibility of CSS element attributes, and the creation of elements on the Web page is easier and easier. Let's take a look at the XHTML code for the navigation you are designing:
<ul id= "NAV" >
<li><a href= "" > Articles </a>
<ul>
<li><a href= "" >css tutorials </a></li>
<li><a href= "" >dom tutorials </a></li>
<li><a href= "" >xml tutorials </a></li>
<li><a href= "" >flash tutorials </a></li>
</ul>
</li>
<li><a href= "" > Reference </a>
<ul>
<li><a href= "" >XHTML</a></li>
<li><a href= "" >XML</a></li>
<li><a href= "" >CSS</a></li>
</ul>
</li>
<li><a href= "" >BLOG</a>
<ul>
<li><a href= "" > All </a></li>
<li><a href= "" > Web technology </a></li>
<li><a href= "" >ui technology </a></li>
<li><a href= "" >flash technology </a></li>
</ul>
</li>
</ul>
<ul>
<li><a href= "" > Rock </a></li>
<li><a href= "" > Pure music </a></li>
<li><a href= "" > Classical Melody </a></li>
<li><a href= "" > Movie soundtrack </a></li>
</ul>
A standard use of the UL structure of the menu composition, but what's different here is that the code structure here involves nesting, inserting another UL structure between the first layer of Li, which is a code-formation pattern for multilevel menus, and XHTML code allows you to achieve the desired effect or structure through nested elements. Next, we try to write some simple CSS styles to make the menu the desired landscape:
UL {padding:0; margin:0; list-style:none;}
Li {float:left; width:100px;}
The first step, the navigation system chattering has a basic set of UL elements, List-style:none properties can help us to remove all the UL dot logo. The List-style property has other, richer usage methods that will be highlighted in the list elements that follow.
We want the navigation to be horizontal by setting the Float:left attribute on Li, floating all Li to the left, forming a landscape layout, and trying to continue writing code using each Li's width of 100px:
Li ul {display:none; top:20px;}
The definition of Li ul here refers to all the UL elements under Li, in addition to the top of the UL elements, all Li under the definition of the UL elements will be the definition of this part of the style. Use the Top property here to set up the entire UL margin and use Display:none to get this part up. CSS in the fear of elements can basically use the Display property to control the show or hide.
Li:hover Ul,li.over ul {display:block;}
Li:hover ul defines the element of UL under the LI element. Separated by commas, so that both cases can use the Display:block property, the Display:block property and the Display:none property just the opposite, one is hidden, one is displayed, when set to Display:block, Not only is the assigned element displayed, but it is also displayed as a block, and if the element is not display:block, the elements are displayed only on the screen occupied by their content, and when the Display:block is used, the element forms a wide block of itself as its own bit character, This setting is very convenient for big buttons.
In the bottom of the preview in the code you can see, and the inside of the JS code, it is used to control in the IE browser display drop-down menu, originally Li:hover ul this sentence is OK, but the support of IE for CSS is also perfect, so need to use JS to control.
Here we try to add some style to the Pull-down menu:
Ul Li a {display:block; font-size:12px; border:1px solid #ccc; margin-top:2px; margin-left:3px; padding:3px; text-decorat Ion:none; Color: #777;}
UL li a:hover {background-color: #ddd;}
The Drop-down menu control of CSS layout focuses on the hiding and displaying of elements.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> pull-down and Multilevel pop-up menu www.aa25.cn</title> <script type=" Text/javascript "><!- -//--><! [cdata[//><!--startlist = function () {if (Document.all&&document.getelementbyid) {Navroot = document.getElementById ("Nav"); For (i=0 i<navroot.childnodes.length; i++) {node = navroot.childnodes[i]; if (node.nodename== "LI") {node.onmouseover=function () {this.classname+= "over"; } node.onmouseout=function () {This.classname=this.classname.replace ("Over", ""); }}}} window.onload=startlist; -->≪!]] ></script> <style> ul {padding:0; margin:0; list-style:none;} Li {float:left; width:100px;} Ul Li a {display:block; font-size:12px; border:1px solid #ccc; margin-top:2px; margin-left:3px; padding:3px; text-decorat Ion:none; Color: #777;} UL li a:hover {background-color: #ddd;} Li ul {display:none; top:20px;} Li:hover Ul,li.over ul {display:block;} </style> </pead> <body> <ul id= "NAV" > <li> article <ul> <l I>css Tutorials </li> <li>dom Tutorials </li> <li>xml Tutorials </li> <li& Gt Flash Tutorials </li> </ul> </li> <li> reference <ul> <li>xhtm l</li> <li>XML</li> <li>CSS</li> </ul> </li > <li>blog <ul> <li> all </li> <li> Web technology </li> <li>ui Technology </li> <li>flash technology </li> </ul> </li> </ul& Gt <ul> <li> Rock </li> <li> Pure music </li> <li> Classic Melody </li> <li> movie soundtrack &L t;/li> </ul> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
