Full compatibility, highlighted second-level buffer folding menu [DEMO]

I have been busy for some time and have not taken care of my blog for several months. Now we will sort out a menu instance recently created in the project and share it with you.

In the background or OA system, the most commonly used layout is a full screen layout, which is usually the layout of the top, bottom, and bottom three columns. A right ifame frame page is added to the page header, footer, and left menu. Therefore, the secondary menu with folding is frequently used. In this example, this is a general, fully compatible, highlighted secondary buffer folding menu.

Features:

1. Full compatibility, browser testing: IE5.5, IE6, IE7, IE8, FF3.0, Google, Safari 4.0, Opera9.0.
2. The Html structure is elegant and concise, and there are no additional tags, which is conducive to program loop output.
3. Style and structure separation, you can modify different styles in the style sheet.
4. The current selected item is highlighted. Both the level-1 menu and level-2 menu can be highlighted.
5. Fold layer elegant buffer animation.
6. Most Suitable for the backend and some OA system interfaces.

Disadvantages:

1. Anti-refresh is not supported. This function should not be used in background application systems and is not added.
2. In IE6, the buffer effect is unavailable. For IE6, the effect is weakened.

Let's first look at the effect:

Figure 1

Let's briefly describe some simple ideas and problems for making such menus.

Generally, I want to create an effect. My production process is to first draw the HTML structural layer content, then write the style, and then make some icing on the cake, such as JS special effects. I do not know how a process model works.

Structural Layer:

The concept of structural layers is generally based on a perceptual knowledge. Generally, there is a structure based on which the most concise HTML structure is constructed. As shown in, the first impression is to use a UL unordered list,... This is a list of second-level nesting, which is the first issue to be considered.

Therefore, the structure should be as follows:

<Li> <a href = "# none"> Level 1 menu item </a>
<Ul>
<Li> <a href = "# none"> level-2 menu item </a> </li>
</Ul>
</Li>

When there is a level-2 menu, it is a nested UL structure. If there is no Level-2 menu, it is as follows:

<Ul class = "menu">
<Li> <a href = "# none"> Level 1 menu item </a> </li>
</Ul>

Of course, you can also use the dl-dt-dd ordered list to create this nested structure, depending on your actual situation.

With the most primitive structure layer, you need to add some necessary hooks for CSS and JS control styles and effects. I have always opposed the method of adding many class names, this will increase the size of the page, so the most simple method is to apply one or two necessary class names to the parent container, and then use the child (Group) in the style sheet) character to set various personalized settings. In the above structure, how many class names do you think of to define all styles?

My practice is to use only three class names to control all style display. One is the top UL, defined as class = "menu", and the other is the second-level menu container, that is, the nested UL defines a class = "level2 ", 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:

Style Sheets are easy to set. The only thing you need to note is that, in order to facilitate JavaScript control of the level-2 menu and record the highlighted status of the selected item, so I don't need the hover pseudo class to implement the slide-In and Out Effect of the mouse, but use JS to simulate it. The key code for controlling the style with JS is as follows:

Level 1 menu style

/* Level-1 menu three-state style for JS call */
. 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 ;}

Level 2 menu style

/* Level-2 menu three-state style for JS call */
. 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 we mentioned above, the three-state menu effect is not defined in the style sheet, so we need to bind onmouseover, onmouseout and onclick events to each menu item to simulate this effect. In the structure layer, we do not define the ID of the total container, but only a class name. Therefore, an extended getElementsByClassName () is added to JS () method (thanks to the friend situ zhengmei) to get this object according to the class name. Use the loop closure to bind these three events.

The detailed code is not described in detail. The Demo is very clear. Please download it to your local machine for browsing.

If you have any questions, please post them in this blog. I wish you a good time!

Demo: fully compatible with the highlighted secondary buffer folding menu

Original article:Http://www.cnblogs.com/binyong/archive/2010/05/28/1745918.html