Navigation Bar--Shrink navigation menu

Source: Internet
Author: User

1. Overview

Not only can you set the navigation bar in your Web site, but you can also set the navigation menu. Because the menu content is more, the same page display is more cluttered, so many designers have adopted a shrinking menu form.

2. Technical Highlights

This example mainly applies javascript to control the function of displaying and hiding the table, and realizes the function of the shrinking navigation menu. Click the navigation hyperlink to display the contents of the current menu, hide the previous displayed menu, and let it hide the menu regularly when it is hidden, enabling an animated effect to unfold or shrink.

3. Concrete implementation

(1) Create index.jsp page, add a Level navigation menu item and level two navigation menu in the page, the key code is as follows:

<tr style= "Cursor:hand" > <td class= "list_title" id= "List1" onmouseover= "this.typename= ' list_title2 ';" onclick= "Change (menu1,50,list1);"onmouseout= "This.typename= ' list_title ';" Background= "Images/title_show.gif" height= "> <span> site Management </span> &LT;/TD&GT;&L  t;/tr><tr> <td align= "center" valign= "Middle" > <div class=sec_menu id=menu1 style= "DISPLAY: None width:158px; height:0px "> <table cellspacing=" 0 "cellpadding=" 0 "width=" "align=" center "background=" IMAGES/BG.G If "style=" padding-left:5px "> <tr><td height=" ><a href= "#" target= "boardlist" > change the initial information & lt;/a></td></tr> <tr><td height= "" ><a href= "#" target= "BoardList" > View server information & Lt;/a></td></tr> </table> </div></td></tr&gt, ....//the contents of other level two menus are omitted here.

(2) Write a custom JavaScript method to expand the menu item show (), the key code is as follows:

functionShow (obj,maxg,obj2) {if(obj.style.pixelheight<maxg) {Obj.style.pixelHeight+=MAXG/10; Obj2.background= "Images/title_hide.gif";//change the background of a menu title               if(OBJ.STYLE.PIXELHEIGHT==MAXG/10) {obj.style.display= ' block ';//sets the specified menu item display} myObj=obj; Mymaxg=Maxg; MyObj2=Obj2; SetTimeout (' Show (MYOBJ,MYMAXG,MYOBJ2) ', ' 5 ');//call the show function every once in a while to achieve a gradual effect     }}

(3) To write a custom method for shrinking menu items hide (), the key code is as follows:

functionHide (obj,maxg,obj2) {if(obj.style.pixelheight>0){               if(OBJ.STYLE.PIXELHEIGHT==MAXG/5) {obj.style.display= ' none ';//sets the specified menu item to hide} obj.style.pixelHeight-=MAXG/5; Obj2.background= "Images/title_show.gif";//change the background of a menu titlemyobj=obj; Mymaxg=Maxg myObj2=Obj2; SetTimeout (' Hide (myobj,mymaxg,myobj2) ', ' 5 ');//The Hide function is called every once in a while to achieve a gradual shrinkage effect}Else if(whichcontinue) {Whichcontinue.click (); }}

(4) Write a custom method change (), implement when you click the menu title, hide the previous expanded menu item, display the current menu item. The key code is as follows:

functionChange (obj,maxg,obj2) {if(obj.style.pixelHeight) {hide (obj,maxg,obj2); //Shrink Menu ItemsNopen= "; Whichcontinue= ' '; }Else if(Nopen) {//shrink a menu item that has already been expandedWhichcontinue=Obj2;            Nopen.click (); }Else{Show (OBJ,MAXG,OBJ2); //Expand menu Itemsnopen=Obj2; Whichcontinue= ' '; }}

Navigation Bar--Shrink navigation menu

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.