Discussion on the realization method of making payment treasure navigation strip

Introduce the production process of Alipay navigation bar, this kind of tab is very common, many sites will use, this kind of navigation, this article is not a profound technology, but to explore the implementation of this navigation effect process.

In fact, is not a tutorial, that is, when they do not have a thing to do something and then send up the exchange of people, I hope we do not hesitate to enlighten ^!^

Because just read the Yadong of the tutorial and this a bit similar, so I thought about it wrote a small paragraph of the JS to be done. The inside of Yadong uses jquery. I feel that if a simple thing directly on the JS on the line, there is a large number of requirements to call the library is good.

The core HTML code is as follows:

<div id= "Menu" > <div id= "Top" ><!– orange menu item part: This label function is to realize the sliding door effect-> <ul id= "Item" ><!– list item Li is free to add and modify –> <li id= "item1" ><a href= "#" ><span> Front-End development </span></a></li> <li id= "item2" class= "active" ><a href= "#" ><span> I want to pay </span></a></li> <li id= "Item3" ><a href= "#" ><span> website Development </span></a></li> <li id= "item4" ><a href= "#" ><span> Transaction Management </span></a></li> <li id= "ITEM5" ><a href= "#" ><span> my Alipay </span></a></li> <li id= "Item6" ><a href= "#" ><span> Security Center </span></a></li> <li id= "Item7" ><a href= "#" ><span> Merchant Services </span></a></li> <li class= "Ext1" ></li><!– extra label to locate the upper right corner of the menu item –> </ul> </div> <div id= "Bot" ><!– the Gray submenu item part: This label function also lies in the sliding door effect realization –> <ul class= "sub-item" id= "sub-item1" > <li><a href= "#" ><span>HTML</span></a></li> <li><a href= "#" ><span>CSS</span></a></li> <li><a href= "#" ><span>JavaScript</span></a></li> <li><a href= "#" ><span>ActionScript</span></a></li> <li><a href= "#" ><span>Photoshop</span></a></li> <li><a href= "#" ><span>Fireworks</span></a></li> <li><a href= "#" ><span>Flash</span></a></li> <li class= "ext2" ></li><!– extra label to locate the right corner of the menu item –> </ul> </div> </div>

Attention:

1. Menu items can be extended freely, provided that the class name "sub-item" is the Red List label in the copy code. That is, copy of the UL label all the content pasted afterwards on the line.
2. class named "sub-item" list label ul ID attribute in turn class add OK, such as: Sub-item1,sub-item2,sub-item3 ...
3. A blue list label with the class name "Active" represents the default menu item when it is loaded.

Core JavaScript code:

The main features are the effects of submenu items that change as the menu item changes (Similar to the Tab tab).

Window.onload = function () { For (I=1 i<8; i++) { var Nodeitem = document.getElementById ("item" +i); Iterate through each menu item to increase the OnClick event Nodeitem.onclick = function () { /* Menu activation Dynamic style * * For (n=0 n<6; n++) { document.getElementsByTagName ("Li") [n].classname = ""; alert (this.classname); } This.classname = "active"; var Linknode = parseint (this.id.substring (4,5)); For (J=1 j<10; j + +) {//Sequentially match menu items and menus var Nodesubitem = document.getElementById ("sub-item" +j); if (Linknode = = j) {//If menu items and menus match are displayed, otherwise hide NodeSubItem.style.display = "block"; }else{ NodeSubItem.style.display = "None"; } } } } }

JS code is not much to explain, the important part I have given a note. Because I am also a rookie, the cost of a great effort to achieve results, but also hope to master a lot of guidance.

CSS code a little bit more I do not post it, in fact, the core code on that a few, mainly for imitation of the perfect to write a little more! Interested students to download my source research directly. If you have any questions, just leave a message for me ^!^