Small valley practical Jquery (III)-horizontal vertical menu

Small valley practical Jquery (III)-horizontal vertical menu

The speed of an instance seems to be a little low every day. Do more today. well, this is a simple menu. There are two common menus in Web projects: vertical and horizontal. let's look at the initial code.

The most basic menu and sub-menu for html code implementation

 Practice-menu Effects
 
 <Script type = "text/javascript" src = "jquery. js "> </script> <script type =" text/javascript "src =" menu. js "> </script>
 
 

  
  
Menu item 1 
   
 
    
Sub-menu item 11
 
    
Sub-menu item 12
 
   
  
  
Menu item 2 
   
 
    
Sub-menu item 21
 
    
Sub-menu item 22
 
   
  
  
Menu item 3 
   
 
    
Sub-menu item 31
 
    
Sub-menu item 32
 
   
 
 

Use

And
• Tags are created with a list of projects. Therefore, we will also use CSS settings to remove some styles and set the background color, background image, and text format of menus and sub-menus.

  Ul li {/* remove the default dot on ul and li */list-style: none;} ul {/* clear the indent value of the sub-menu */padding: 0 ;}. main {background-image: url (images/title.gif); background-repeat: repeat-x; width: 120px;} li {background-color: # EEEEEE ;} a {/* cancel all underlines */text-decoration: none; padding-left: 20px; display: block; display: inline-block; width: 100px; padding-top: 3; padding-bottom: 3 ;}. main a {color: white; background-image: url (images/collapsed.gif); background-repeat: no-repeat; background-psition: 3px center ;}. main li a {color: black; background-image: none ;}. main ul {display: none ;}

  
  
  

  Finally, Click Show or hide sub-menu in the main menu of js implementation.

  $ (Document ). ready (function () {// register a click event for the main menu. The hidden sub-menu item $ (". main> "). click (function () {// find the sub-menu item var ulNode = $ (this) corresponding to the main menu item ). next ("ul"); if (ulNode.css ("display") = "none" using multiple ulnode.css ("display", "block" using multiple variables else{ulnode.css ("display ", "none ");}});})

  
  

  A basic vertical menu is complete. Check the effect of the web page.

  
  

  Careful friends will surely find that the icons in the expanded menu are different, and there is no relevant function implementation code in js above. yes, this is because I added changeIcon ($ (this) to the original code after implementing the horizontal Menu Design (including improvements to icon changes )); the implementation of this function is displayed in the subsequent horizontal menu.

  
  

  Horizontal menu:

  The html code is basically the same. It is written in a file, so only class = "hmain" is changed ". CSS code is also basically the same, just add "to the public part ". hmain ", all styles are applied under the class label. therefore, modification from the portrait menu to the horizontal menu is only a matter of minutes!

  
  

  
  

  The function of changing the icon mentioned above is in the following js:

  $ (Document ). ready (function () {// horizontal menu // when the mouse slides out, show or hide the sub-menu items, and change the main menu icon $ (". hmain "). hover (function () {$ (this ). children ("ul "). slideDown (); changeIcon ($ (this ). children ("a");}, function () {$ (this ). children ("ul "). slideUp (); changeIcon ($ (this ). children ("a") ;}) // modify the indicator icon function changeicon(mainnode‑if(mainnode‑if(mainnode‑if(mainnode.css ("background-image") of the main menu "). indexOf ("collapsed.gif")> Returns 0133 without mainnode.css ("background-image", "url ('images/expanded.gif ')" without using elsedomainmainnode.css ("background-image ", "url ('images/collapsed.gif ')");}}}

  
  The so-called horizontal menu is like this:

  The browser displays normally. The biggest headache in this process is IE. For example, the indentation of the sub-menu can be cleared only when the padding and margin values are both 0. in addition, browsers other than IE6 can set the display value to block to fill the area where Element a is located. only IE6 needs to set display to inline-black and set the width of. another point is that if a background image and background color are defined simultaneously on an element, which one will the browser choose to use? The answer is the background image.

  The preceding js Code is determined by the if statement. if the sub-menu is hidden, it is displayed when you click the main menu. if the sub-menu is hidden, it is hidden when you click it. I don't know if my friends still remember jQuery's purpose: write less, do more. therefore, we can use this sentence to replace the above N lines of code: ulNode. the powerful feature of the slideToggle (); toggle method is that it eliminates the need for us to determine whether an element is displayed or hidden, allowing us to directly hide and hide the display.

  JQuery's learning is still going on.