Design Horizontal/Vertical menus with jquery

In the Web page, the menu plays the role of "the person who refers to the road". How to design a user-friendly menu, the following small series with you to do together.

：

Design history:

1. First use the <ul> and <li> tags in html to nest, set up a whole framework. As shown in the following:

HTML code:

(This is the code for the Portrait menu, and the horizontal code is the same, just change the class name so that you can distinguish it when designing the style.) ）

2. The above two pictures in sharp contrast, the user should choose the former, then we will give the framework "wear" pieces of clothing.
CSS code:
ul,li{/* Clear UL and Li before the default small dot */list-style:none;} ul{/* clears the indent value of the submenu */padding:0;margin:0;}. The background of the main,.hmain{/* menu item is a small piece of picture that is repeated in duplicate and appears to have three-dimensional */background-image:url (. /image/title.gif); background-repeat:repeat-x;width:120px;} li{/* Set Background color, menu item background image Overlay Background color */background-color: #CCC;} a{/* Remove all links underline */text-decoration:none;/* let a fill the whole area, the mouse click on the line has been hand-shaped */display:block;display:inline-block;width:100px; padding-left:20px;padding-top:3px;padding-bottom:3px;}. Main A,.hmain a{/* Set the font color of the menu item */color:white;/* Add the right-pointing picture */background-image:url (.. /image/collapsed.gif); background-repeat:no-repeat;background-position:3px Center;}. Main Li A,.hmain li a{/* sets the font color of the submenu */color:black;background-image:none;}. Main Ul,.hmain ul{/* initially does not display submenu items */display:none;}. hmain{/* Landscape Menu Each menu item floats to the left, showing */float:left;margin-right:1px on one line;} */
Note: "Main"-Portrait "Hmain"-Landscape

3. The surface of the menu is finished, it is not placed there for people to see, need to interact with the user, to achieve some dynamic effect .  When we click on the menu item, the mouse arrow changes to the hand shape, and the Hidden submenu item underneath the click is displayed, and the arrow pointing to the right changes to point below. When you click the menu item, the submenu item is hidden while the arrow image is changed. 
JavaScript is a great god for Web pages, and jquery is a multi-browser-compatible JavaScript library that allows JavaScript to write less and do more. after referencing the jquery library, write the following code:
JavaScript code:
$ (document). Ready (function () {    //Portrait Menu $ (". Main > a"). Click (function () {var ulnode=$ (this). Next ("UL"); Ulnode.slidetoggle (); Changeicon ($ (this));}); /Landscape Menu $ (". Hmain"). Hover (function () {$ (this). Children ("ul"). Slidedown (); Changeicon ($ (this). Children ("a")); Function () {$ (this). Children ("ul"). Slideup ();    Changeicon ($ (this). Children ("a"));}); * Modify the main menu's instruction icon */function Changeicon (mainnode) {if (Mainnode) {if (Mainnode.css ("Background-image"). IndexOf (" Collapsed.gif ") >=0) {   mainnode.css (" Background-image "," url (' image/expanded.gif ') ");    } else{   mainnode.css ("Background-image", "url (' image/collapsed.gif ')");}}}
At this point, two menu design is complete, is not very fulfilling!
Throughout the world, HTML is the body, CSS is clothes, JS is the soul. Three of the cooperation, constitute a lively and dynamic Web pages. Remember the first video knock Beef Brisket News release system, think B/s development is assorted things together. With the later "elephant", there is now a gradual clear understanding.

Design Horizontal/Vertical menus with jquery