I have been quite busy recently and haven’t taken care of my blog for several months. Now I will sort out a menu example recently made in the project and share it.
The most commonly used layout in the backend or OA system is often a full-screen layout, which is generally a layout with three rows and two columns at the top, middle and bottom, with a header, footer, left menu and an ifame frame page on the right. Therefore, the foldable secondary menu is often used. This example is to implement such a more general fully compatible and highlightable secondary buffer folding menu.
Features :
shortcoming :
Let’s briefly talk about some simple ideas and problems encountered in making such a menu.
Generally, when creating an effect, my production process is to first draw the content of the HTML structure layer, then write the style, and then add some icing on the cake effects, such as JS special effects and so on. I don’t know what process model the experts have.
Structural layer :
The idea of the structural layer is generally based on a perceptual understanding, usually with a rendering, and based on this rendering the most concise HTML structure is constructed. As shown in the picture above, the first impression that comes into view is to use an unordered list of UL, but... this is a two-level nested list. This is the first issue we need to consider.
So the structure should look like this:
When there is a second-level menu, it is a nested UL structure. When there is no second-level menu, it is as follows:
<ul class="menu">
<li><a href="#none">First-level menu items</a></li>
</ul>
Of course, you can also use the dl-dt-dd ordered list method to create this nested structure, depending on your actual situation.
With the most original structural layer, you need to add some necessary hooks for CSS and JS to control styles and effects. I have always opposed the method of adding a lot of class names, which will increase the size of the page, so the most streamlined The approach is to apply one or two necessary class names to the parent container, and then use the child (group) selector to set various personalized settings in the style sheet. In the above structure, how many class names would you think of using to define all styles?
My approach is to use only three class names to control all style displays. One is the top-level UL, defined as class="menu", the other is the container of the second-level menu, that is, the nested UL defines a class="level2", and finally the first-level menu item li defines a class="level1" , with these three hooks, you can manipulate the style of the entire structure.
Presentation layer :
The setting of the style sheet is very simple. The only thing to note is that in order to facilitate JS to control the display and concealment of the secondary menu and record the highlight status of the currently selected item, I do not use the hover pseudo-class to achieve the slide-in and slide-out effect of the mouse. And use JS to simulate it. The key codes for controlling styles using JS are as follows:
First level menu style
/*First-level menu three-state style, for JS calling*/
.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;}
Secondary menu style
/*Secondary menu three-state style for JS calling*/
.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;}
Behavioral layer :
As mentioned earlier, we have not defined the three-state effect of the menu in the style sheet, so we need to bind the onmouseover, onmouseout and onclick events to each menu item to simulate this effect. In the structure layer, we did not define the ID of this total container, but only defined a class name, so we added an extended getElementsByClassName() method in JS (thanks to my friend Situ Zhengmei) to obtain this object based on the class name. Use loop closures to bind these three events.
I won’t explain the detailed code one by one. The comments in the Demo are very clear. Please download it to your local computer to browse.
If you have any questions, please post and discuss in this blog. I wish you a happy use!
<li><a href="#none">First-level menu items</a>
<ul>
<li><a href="#none">Second-level menu items</a></li>
</ul>
</li>