Small valley practical Jquery (3)-horizontal vertical menu, small valley jquery

Small valley practical Jquery (3)-horizontal vertical menu, small valley jquery

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

<Span style = "font-size: 18px;"> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 




The <ul> and <li> tags are used to create a list with project symbols ., therefore, we will also use CSS settings to remove some styles, as well as set the background color, background image, and text format different from that of the sub-menu.

<Span style = "font-size: 18px;"> ul li {/* removes 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 ;}</span>





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

<Span style = "font-size: 18px;" >$ (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") ;}}) ;}) </span>


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:



Below I will summarize the main technologies used.
Multi-layer menus can be built through ul and li nesting, and li is indented. for Web development, you must try your best to display your own pages in various browsers. The biggest headache in this process is IE, such as clearing sub-menu indentation, only when padding and margin are both 0 can they be normally displayed in IE6 and 7. 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.






Help me make a jquery horizontal third-level navigation menu with concise force
Added things on the first floor.


Jquery ajax three-level linkage menu
If it is a network problem, there is basically no way! Background optimization is to optimize your php code and SQL statements!