Quickly customize the Pull-down menu with CSS

css| Menu | A lot of people who have visited the Microsoft Chinese homepage will never forget its new pull-down menu. It does bring us a refreshing net wind, it implements the page up and down menu, not only left a lot of clicks of trouble, and create a web design of the future road.

We know that through CSS you can define exactly the style of an HTML element, including its color, font, border, 3D effect, filter, and so on, we are thinking about making a drop-down menu, the first thing is to think of CSS positioning technology, Its precise positioning ability allows us to rest assured even in three-dimensional space to set the position and visibility.

CSS positioning uses the two methods of the "position" property to locate the HTML element, which is relative positioning (relative) and absolute positioning (absolute), with 9 related positioning attributes:

Position, left, top, width, height, clip, overflow, z-index, visibility

When an element is positioned with "absolute (absolute)", the element is formatted as a rectangular overlay, and the formatted rectangular area becomes a container that can place other HTML elements, which can override the layout of the HTML document. The text and graphics below the area can never be wrapped and displayed through the container. The elements that are absolutely positioned are called block-level elements, and the HTML elements placed within the block-level elements are called child elements.

Also, when we move the mouse, the JAVA actions that have a sense of HTML elements are onmouseup, OnMouseOver, and onmouseout.

OnMouseUp the release action after the mouse clicks
OnMouseOver the action when the mouse passes
onMouseOut the action when the mouse leaves an area.

In addition, we create menus to express certain shortcuts, usually super connections (URLs). Every command on the menu should be sensitive to the whereabouts and clicks of the mouse. Therefore, you must create a multi-level capture of the mouse behavior by the menu. First, the container itself (block-level elements) creates a catch when the mouse passes over and leaves, followed by the capture of the mouse behavior by the commands on the menu. That is, when the mouse passed, the menu turned on the response, the mouse left is the menu off.

Because the menu is in the Web page is dynamically set up, in order to reduce the operating burden of the browser, speed up, so the menu is only initialized once, the subsequent opening and closing operation is only the container itself (block-level elements) of the visual and hidden.

The dynamic establishment of the menu is done with the document.write statement. ----also because CSS is used, so the first sentence of each menu should begin as follows:

document.write (' < STYLE type= "Text/css" .....) Followed by the menu positioning syntax, depending on the browser in general, Netscape with relative positioning, IE with absolute positioning better.

Then the container (block level element) is created to capture the mouse onMouseOver, onmouseout. You can write this: document.write (' < span id= Menu logo ....

Secondly, the menu and capture behavior are set up in the following way. It is important to note that the menu item definition is defined with the mouse-sensing operation.

< a href= "super connection" > First command </a >< br >

< a href= "Super connect" > Second command </a >< br >

< a href= "Super connect" > Third command </a >< br >

...

If you want to add a border to the menu, you only have to add border to the menu (block level Element) attribute: < thickness > < length > < color > < three-dimensional effect >. For example:

... {padding:2pt} #TestMenu1 {Border:thin soild outset; position:absolute;.. It becomes a three-dimensional, thin-edged menu.

The following is the original code 6KB, when loading the browser, the mouse in the "Drop-down menu Demo", "Compiler" and "License description" docking, the Drop-down menu appears.

Author: Kunming, Yunnan