The Battle of the Little Valley jquery (iii)--Horizontal and vertical menus

The example of daily wage seems a little low today. Line, this implementation is a simple menu, Web project, there are two common menus: portrait and landscape. Speaking from vertical, look at the original code.

HTML code Implementation of the most important menu and sub-menu

<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 ">

A bulleted list is created with the <ul> and <li> tags, so we'll go through CSS settings to remove some of the styles, as well as to set the menu and submenu different background color or background image, text format, etc.
<span style= "FONT-SIZE:18PX;" >ul li{/* Elimination of UL and Li on the default small dot */list-style:none;} ul{/* clears the indent value of the submenu */padding:0;}. Main{background-image:url (images/title.gif); background-repeat:repeat-x;width:120px;} Li{background-color: #EEEEEE;} a{/* Remove all underline */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>


The last JS implements the main menu single click to show or hide submenus.
<span style= "FONT-SIZE:18PX;" >$ (document). Ready (function () {//To the main menu click event, click to show the Hidden submenu item $ (". Main > a"). Click (function () {// Find the main menu item corresponding submenu item var ulnode=$ (this). Next ("UL"), if (Ulnode.css ("display") = = "None") {Ulnode.css ("display", "block");} ELSE{ULNODE.CSS ("Display", "none");}    ) </span>

A major portrait menu is finished. Look at the effect of the Web page.

Careful friend must have found the menu in the expanded state of the icon is not the same, and the above JS does not have the relevant function of the implementation code. Yes, this is because I implemented the landscape menu design (including changes in the icon) and added a sentence in the original code: Changeicon ($ (this)); The reality of this function is now displayed in the landscape menu behind it.

Landscape Menu:
The HTML code is basically the same, written here in a file, so just changed the class= "Hmain". And the CSS code is basically the same, only to the public part of the increase ". Hmain", the entire style is applied to the class label. So, from the portrait menu to the Landscape menu changes, just minutes!
watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvemh1yw56aguxmtc=/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/ Dissolve/70/gravity/center ">

The function of the change icon mentioned above is in the following JS:
$ (document). Ready (function () {//Landscape menu//When the mouse is out-of-date, show or hide submenu 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"));}) Change the main menu's indicator icon function Changeicon (mainnode) {if (Mainnode) {if (Mainnode.css ("Background-image"). IndexOf (" Collapsed.gif ") >=0) {mainnode.css (" background-image "," url (' images/expanded.gif ') ");} Else{mainnode.css ("Background-image", "url (' images/collapsed.gif ')");}}}

The so-called horizontal menu is like this:

Below I summarize the main use of the technology.
Building multi-layer menus can be achieved through the use of UL and Li Nesting, Li is indented. Do the web development must try to make their own pages in the browser is normal display, the process of the most headache is IE, for example, clear the indentation of submenus, Only padding and margin are 0 when the ability to IE6 and 7 normal display. In addition, Browsers outside of IE6 are able to set the display value to block to fill the area where a element is located. Only IE6 need to set display to Inline-black and set the width of a. Another point is to assume that an element has the same time defined background and back color, So which one does the browser choose to use?
The answer is the background map.
The above JS code is inferred from the IF statement, assuming that the submenu is hidden when the main menu is clicked, assuming that the display is hidden when clicked. I wonder if my friend remembers the purpose of jquery: Write less, does more. So, we can replace the N-line code with this sentence: Ulnode.slidetoggle (); The power of the toggle method is that it saves us from inferring whether an element is a display or a hidden state, directly letting the display hide and hide the display.
The study of jquery is still going on, all the way to the harvest.


 
Copyright notice: This article blog original articles, blogs, without consent, may not be reproduced.
 
The Battle of the Little Valley jquery (iii)--Horizontal and vertical menus