Drop-down and pop-up menu is a common form of navigation in Web site design, this kind of menu can make full use of the page now hiding and display more content, and can reasonably classify the content display, is a very good form of navigation.
Early drop-down or pop-up menus enable the hiding of content through a hidden layer or div, respond to user actions via JavaScript scripts, and currently use JAVASCRIPT+DIV or other elements to make such navigation. The difference is that the entire navigation will use a standard CSS layout to build, no longer use the table to create menus, drop-down menu is the above mentioned horizontal navigation and vertical navigation combination, and through the CSS for the many attributes of the support, the same menu no longer need multiple div to cooperate with each other to complete, Using the CSS layout to create a drop-down menu element, or even direct control of the UL or Li elements, now to try a simple drop-down menu production, it should be added that the pull-down menu implementation takes advantage of a lot of JavaScript technology, In this case, the JavaScript technology does not make too much grammatical comprehensive understanding, just want to use the existing examples to tell people because of the flexibility of CSS element properties, and using the creation of the elements on the Web page is more simple and convenient. Let's take a look at the XHTML part of the currently designed navigation code:
- Article
- CSS Tutorials
- Dom Tutorials
- XML Tutorials
- Flash Tutorials
- Reference
- BLOG
- All
- Web Technology
- UI Technology
- Flash Technology
- Rock
- Pure Music
- Classical melody
- Movie soundtrack
A standard use of the UL structure of the menu composition, but unlike the previous one, the code structure here involves nesting, in the first layer of Li inserted another UL structure, this is a multi-level menu of a code composition pattern, XHTML code allows the use of nested elements to achieve the desired effect or structure. Next, we try to write a few simple CSS styles to make the menu the desired horizontal style:
UL {padding:0; margin:0; list-style:none;}
Li {float:left; width:100px;}
The first step, the navigation system chattering there are UL elements for basic settings, the List-style:none property can help us to remove all the dots in the UL mark. The List-style property has other, richer usage methods that will be highlighted in later list elements.
We want the navigation to be horizontal by setting the Float:left property on Li, floating all Li to the left, forming a landscape layout, and trying to use each Li width of 100px to continue writing the code:
Li ul {display:none; top:20px;}
The definition of Li ul here refers to all Li under the UL element, in addition to the top UL elements, all Li defined below the UL elements will be defined by this part of the style. Use the Top property here to set the top margin of the entire UL and use Display:none to get this part up. There are elements in the CSS that can basically use the display property to control whether they are displayed or hidden.
Li:hover Ul,li.over ul {display:block;}
Li:hover UL defines the UL element 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 are just the opposite, one is hidden, one is displayed, and when set to Display:block, Not only is its assigned element displayed, but it is also displayed as a block, and if not display:block, the element will only be displayed in the area occupied by its own content on the screen, and when Display:block is used, the element will form itself as its own dot character, This setting is very convenient for larger buttons.
In the bottom of the preview inside the code you can see, inside with and paragraph JS code, it is used to control in the IE browser display drop-down menu, originally Li:hover ul this sentence is can, but IE support for CSS is also perfect, so need to use JS to control.
Let's try adding some styles to the drop-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 the CSS layout is focused on hiding and displaying the 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> dropdown and Multilevel pop-up menu www.aa25.cn</title> <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-decoration:none; Color: #777;} UL li a:hover {background-color: #ddd;} li ul {display:none; top:20px;} Li:hover ul,li.over ul {display:block;} </sty le> </pead> <body> <ul id= "NAV" > <li> article <ul> <li>css tutorial </ li> <li>dom Tutorials </li> <li>xml Tutorials </li> <li>flash Tutorials </li& Gt </ul> </li> <li> References <ul> <li>XHTML</li> <li>XML</li> <li>CSS</li> </ul > </li> <li>blog <ul> <li> all </li> <li> Web Technologies & lt;/li> <li>ui Technology </li> <li>flash technology </li> </ul> </li& Gt </ul> <ul> <li> Rock </li> <li> Pure music </li> <li> classical Melody </li> <LI&G t; movie soundtrack </li> </ul> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
