jquery Combat-Horizontal Portrait menu

Horizontal portrait of the menu effect, click on the Portrait menu to display its sub-menu. When the mouse points to the horizontal menu. Show its submenu, mouse away, submenu hidden.

HTML code:

<span style= "FONT-SIZE:18PX;" ><! DOCTYPE html>
CSS code:
<span style= "FONT-SIZE:18PX;" >body {}ul,li{    /* Clears the front of the menu for dots and laps */    List-style:none;} UL {    padding:0;    margin:0;}. Main,. hmain {    background-image:url (.. /images/title.gif);    Background-repeat:repeat-x;    width:100px;} li{    background-color: #999;} a{/    * Remove all underscores */       text-decoration:none;       padding-left:15px;       Display:block;   /* Let the a tag fill the area */       * for ie6*/       Display:inline-block;       width:85px;       padding-top:3px;       padding-bottom:3px;}. Main A,. hmain a{    color:white;    Background-image:url (.. /images/collapsed.gif);    Background-repeat:no-repeat;    BACKGROUND-POSITION:3PX Center;}. Main Li A,. Hmain li a {    color:black;    Background-image:none;}. Main ul,. hmain ul{    Display:none;}. hmain{    Float:left;    margin-left:1px;} </span>

jquery Code:
 
 
<span style= "FONT-SIZE:18PX;" >$ (function () {$ (". Main > A,. hmain > a"). Click (function () {///find the corresponding submenu of the main menu var ulnode = $ (th        IS). Next ("UL");        if (Ulnode.css ("display") = = "None") {//Ulnode.css ("Display", "block");        } else {//ULNODE.CSS ("Display", "none");        }//ulnode.show ("normal");//slow, Fast,//ulnode.hide (); Ulnode.toggle ();//display and hide.        Self-inference//ulnode.slidedown ("slow"),//Display//ulnode.slideup ();//Hide Ulnode.slidetoggle ();    Changeicon ($ (this));    });        $ (". Hmain"). Hover (function () {$ (this). Children ("UL"). Show ("Fast");    Changeicon ($ (this). Children ("a"));        }, Function () {$ (this). Children ("ul"). Hide ("fast");    Changeicon ($ (this). Children ("a")); });});/ /Change the main Menu indicator icon function Changeicon (mainnode) {if (Mainnode) {if (Mainnode.css ("Background-image"). IndexOf ("Collaps Ed.gif ") >=0) {mainnode.css (" BackgroUnd-image "," url (..        /images/expanded.gif) "); } else {mainnode.css ("background-image", "url (..        /images/collapsed.gif) "); }}}</span>


 
 

  
  
 
   
1.HTML Summary:
 
  
 
 
 
 

  
  
 
   
 
    
1. Menu items on the page can be represented by nested UL and Li
 
   
 
  
 
 
 
 

  
  
 
   
2.CSS Summary:
 
  
 
 
 
 

  
  
 
   
 
    
1.list-style to clear small dots in front of UL and Li when the property is None
 
    
2. Ability to use Background-repeat to control the repeated filling of the background map
 
    
3. Ability to suppress underline on text when the Text-decoration property value is None
 
    
The value of 4,.display is none can be used to hide elements
 
   
 
  
 
 
 
 

  
  
 
   
3.JQuery Summary:
 
  
 
 
 
 

  
  
 
   
 
    
1.. main A and. Main >a are different. The former chooses to use all the a nodes inside of this class element of the. Main, which only selects the. A node in the child node of main
 
    
2. The Show,hide method can be used to show or hide elements. The effect of having no parameters is the same as changing the display property of CSS.
 
    
The number of references can be in milliseconds. Or the ' slow '. ' Normal ', ' fast ' these three words can be controlled to show or hide the required time.
 
    
The 3.toggle method is more powerful and can eliminate the state of inferring whether an element is displayed or hidden. Allows the displayed elements to be hidden, allowing the hidden elements to be displayed, and the usage and show,hide of the parameters are the same.
 
    
 
 
   
 
  
 
 





 
jquery Combat-Horizontal Portrait menu