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, the submenu is displayed, the mouse leaves, and the submenu is 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 () {///to find the submenu corresponding to 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 ();//Show and hide, automatically judge//ulnode.slidedown ("slow");//show//ulnode.slideup ();//Hide Ulnode.slideto        Ggle ();    Changeicon ($ (this));    });        $ (". Hmain"). Hover (function () {$ (this). Children ("UL"). Show ("Fast");    Changeicon ($ (this). Children ("a"));        }, Function () {$ (this). Children ("ul"). Hide ("fast");    Changeicon ($ (this). Children ("a")); });});/ /Modify the main menu's 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 in the page can be represented by nested UL and Li
 
   
 
  
 
 
 
 

  
  
 
   
2.CSS Summary:
 
  
 
 
 
 

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

  
  
 
   
3.JQuery Summary:
 
  
 
 
 
 

  
  
 
   
 
    
1. Main A and. Main >a differ in that the former chooses to use the. Main of this class element inside all the a node, the latter only selects the. A node in the child node of main
 
    
2. The Show,hide method can be used to show or hide elements, with the same effect as modifying the display property of a CSS without parameters. The parameter can be a number in milliseconds, or ' slow ', ' normal ', and ' fast ' these three words can be used to control the time required to complete the display or hide.
 
    
The 3.toggle method is more powerful, can save the judging element is the display or the hidden state, can let the display element hides, may let the hidden element display, the parameter uses the method and the Show,hide same.
 
   
 
  
 
 





jquery Combat-Horizontal Portrait menu