Navigation Bar--Shrink navigation menu

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