In the background or OA system most commonly used layout is a full screen layout, is generally the next three rows of two column layout, header, footer, left menu plus a right ifame frames page. So the two-level menu with folding is often used, and this example is to implement a more versatile, fully compatible, two-level buffer folding menu.
Features:
Full compatibility, browser testing: IE5.5, IE6, IE7, IE8, FF3.0, Google, Safari 4.0, Opera9.0.
Elegant and concise HTML structure, no extra tags, conducive to the program cycle output.
The style is separated from the structure, and you can change the style in the style sheet.
The current selection highlight state, the first and two levels of the menu can be highlighted.
Folding layer gracefully buffers animations.
Most suitable for backstage and some OA system interface.
Disadvantages:
does not support refreshing, this feature in the background application system should not be used, do not join this function.
In the IE6 buffer effect does not come out, for the IE6, weaken the effect.
First look at the effect screenshot:
Simply say a few simple ideas about making such a menu and the problems that are encountered.
General production of an effect, my production process is generally the first to draw the HTML structure layer content, and then write style, after the effect of some icing on the cake, such as JS special effects and so on. I do not know what a process model you are Daniel.
structure Layer:
The concept of structural layer is generally based on a perceptual knowledge, generally have an effect diagram, according to this effect chart to build the most concise HTML structure. As shown above, the first impression comes to mind with a list of UL unordered, but ... This is a list of level two nesting, which is the first thing we need to consider.
So the structure should be the following:
Copy Code code as follows:
<li><a href= "#none" > First Class menu item </a>
<ul>
<li><a href= "#none" > Level two menu item </a></li>
</ul>
</li>
When there is a level two menu is a nested UL structure, no two-level menu is as follows:
Copy Code code as follows:
<ul class= "Menu" >
<li><a href= "#none" > First Class menu item </a></li>
</ul>
Of course, you can also use the DL-DT-DD sequence table to create this nested structure, depending on your actual situation.
With the most primitive structural layers, you need to add some necessary hooks, for CSS and JS control style and effect, I have been opposed to the kind of add a lot of class names, which will increase the volume of the page, so the most streamlined approach is to apply one or two of the necessary class name to the parent container, Then set the various personality settings with the child (group) selector in the style sheet. In the structure above, what would you think of using a few class names to define all the styles?
My approach is to use only three class names that can control all of the styles shown. One is the most top UL, defined as class= "menu", is a two-level menu container, that is, nested UL definition of a class= "Level2", and finally a level of menu item Li define a class= "Level1", with these three hooks, You can manipulate the style of the entire structure.
Presentation layer:
Style sheet settings are simple, the only thing to note is that in order to facilitate JS control level two menu explicit and record the highlight of the current selection, so I do not hover pseudo class to achieve the slide into the mouse effect, and the use of JS to simulate it. The key code to control the style with JS is as follows:
First level menu style
Copy Code code as follows:
/* First-level menu three-state style, for JS calls * *
. menu Li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; Font-size:12px;color: #fff; Background:url (.. /images/menubg.gif) no-repeat left top;}
. menu Li.level1 a.hove{background-position:left-31px;
. menu Li.level1 a.cur{background-position:left-62px;
Second-level menu style
Copy Code code as follows:
/* Level Two menu three-state style, for JS calls * *
. menu Li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; Font-size:12px;color: #fff; Background:url (.. /images/menubg.gif) no-repeat left top;}
. menu Li.level1 a.hove{background-position:left-31px;
. menu Li.level1 a.cur{background-position:left-62px;
Behavior Layer:
As mentioned earlier, we do not define the three-state effect of the menu in the stylesheet, so we need to simulate this effect for each menu item binding onmouseover, onmouseout, and onclick events. In the structure layer we do not define the total container ID, but only a class name, so in JS added an extended Getelementsbyclassname () method (thanks to Buddy Masaki), according to the class name to get the object. Use a loop closure to bind these three events.
Detailed code is not explained, the demo in the comments are very clear, please download to the local browsing.
If you have any questions please keep the discussion in this blog, I wish you a happy use!
Online Demo Address http://demo.jb51.net/js/caidan_js/demo.html
Package Download Address http://www.jb51.net/jiaoben/27308.html
