Small Valley Combat jquery (iii)--Horizontal Portrait menu

One instance per day seems to be a bit low, so do a little more today. Well, this time it's a simple menu, and there are two common menus in Web projects: Portrait and landscape. Look at the original code from the portrait.

HTML code to implement the most basic menu and submenu

<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 () {//* Register the Click event with the main menu and display the Hidden submenu item $ (". Main > a"). Click (function () {// Find the submenu item corresponding to the main menu items var ulnode=$ (this). Next ("UL"), if (Ulnode.css ("display") = = "None") {Ulnode.css ("display", "block");} ELSE{ULNODE.CSS ("Display", "none");}    ) </span>

A basic portrait menu is done. 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 have added a sentence in the original code after implementing the landscape menu design (including the improvement of the icon change): Changeicon ($ (this)); The implementation of this function is shown in the following landscape menu.

Landscape Menu:
HTML code is basically the same, written here in a file, so only changed the class= "Hmain". And the CSS code is basically the same, just to the public part of the ". Hmain", all the styles are applied to the category under the label. So, from the portrait menu to the Landscape menu changes, just minutes!


The above mentioned change the function of the icon 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"));}) Modify 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-layered 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 each browser is normal display, the process is the most headache is IE, such as the elimination of sub-menu indentation, Only the padding and margin are 0 and can be displayed normally in IE6 and 7. In addition, Browsers other than IE6 can make the a element fill the area by setting the display value to block. Only IE6 need to set display to Inline-black and set the width of a. The other point is that if you define both a background and a back color on an element, So which one does the browser choose to use? The answer is a background map.
The above JS code is judged by the IF statement, and if the submenu is hidden, it is displayed when the main menu is clicked and hidden if the display is clicked. I wonder if my friend remembers the purpose of jquery: Write less and do 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 judging whether the element is displayed or hidden, directly letting the display hide and hide the display.
The study of jquery is still going on, all the way to the harvest.