JQuery implements horizontal vertical drop-down menu

JQuery implements horizontal vertical drop-down menu

When learning javascript, I mentioned building my own javascript library, such as jQuery. These libraries contain commonly used convenient small functions that make your code clearer and easier to understand, it is also easy to understand when others call it. Of course, you need to pay attention to some issues when writing a library, such as case sensitivity, brackets, and line breaks, which provide some foundation for jQuery learning, jQuery's learning mainly involves several examples to understand jQuery's applications. By viewing APIs, you can use specific methods to achieve your own results. It makes the web page dynamic. How to implement a horizontal and vertical drop-down menu through the code.

First, use ul and li in HTML to represent menu items on the page, and then add references to css and js files. Note that jQuery should be referenced first when js references are made. js is then a self-compiled js file.

      
       Practice 3: menu Effects 
 <Script type = "text/javascript" src = "js/jquery. js "> </script> <script type =" text/javascript "src =" js/menu. js "> </script>  
 
 
      
  
  
Menu 1 
   
 
    
Sub-menu 11
 
    
Sub menu 12
 
   
 
  
  
  
Menu 2 
   
 
    
Sub-menu 21
 
    
Sub-menu 22
 
   
 
  
  
  
Menu 3 
   
 
    
Sub-menu 31
 
    
Sub-menu 32
 
   
 
  
 
 
  
  
  
  
 
 
      
  
  
Menu 1 
   
 
    
Sub-menu 11
 
    
Sub menu 12
 
   
 
  
  
  
Menu 2 
   
 
    
Sub-menu 21
 
    
Sub-menu 22
 
   
 
  
  
  
Menu 3 
   
 
    
Sub-menu 31
 
    
Sub-menu 32
 
   
 
  
 
 

CSS section:

Ul, li {/* clear the dot of the menu item */list-style: none;} ul {/* clear the indent value of the sub-menu */padding: 0; margin: 0 ;}. main ,. hmain {background-image: url (.. /images/title.gif); background-repeat: repeat-x; width: 120px;} li {background-color: # CCCCCC ;} a {/* cancel all underlines */text-decoration: none; padding-left: 20px; display: bloock; display: inline-block; width: 100px; padding-top: 3px; padding-bottom: 3px ;}. main ,. hmain a {color: # FFFFFF; background-image: url (.. /images/collapsed.gif); background-repeat: no-repeat; background-position: 3px center ;}. main li ,. hmain li a {color: #000000; background-image: none ;}. main ul ,. hmain ul {display: none ;}. hmain {float: left; margin-right: 1px ;}

Menu. js:

// Vertical menu click implementation drop-down $ (document ). ready (function () {$ (". main> "). click (function () {// find the sub-menu item var ulNode = $ (this) corresponding to the main menu ). next ("ul");/* if(ulNode.css ("display") = "" ){ulNode.css ("display", "block"); changeIcon ($ (this )); cancelse{ulnode.css ("display", "none"); changeIcon ($ (this);} */ulNode. slideToggle (); // The slideToggle method is similar to toggle (directly hiding the displayed element and hiding the element display) changeIcon ($ (this ));}); // scroll down (scroll down or up) with the mouse over the horizontal menu $ (". 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(mainnode1_if(mainnode1_if(mainnode1_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 ')");}}}

:

At this stage, we also need to learn more, learn to view documents, master the methods, and implement some effects in a similar way. Otherwise, our learning will be very thin, with more research and accumulation.