"JQuery"--Horizontal vertical drop-down menu

In the process of learning jquery, encountered the most commonly used in the Project drop-down menu, in line with the principle of high efficiency, in this summary of the horizontal and vertical pull down the implementation of the menu, the formation of their own small class library, so that their own in the project process can be convenient to call.

      HTML section:

Referencing Menu.css, jquery.js (already encapsulated) and Menu.js files

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >

      CSS section:
Implementing style arrangement
UL, Li {/* Clear the default small dot */list-style:none on UL and Li;} UL {/* Clears the Indent value of submenu */padding:0;margin:0;}. Main,. hmain {Background-image:url (.. /images/title.gif); background-repeat:repeat-x;width:120px;} Li {background-color: #EEEEEE;} A {/* cancels all underline */text-decoration:none;padding-left:20px;display:block;display:inline-block;width:100px; padding-top:3px;padding-bottom:3px;}. Main A,. Hmain a {color:white;background-image:url (.. /images/collapsed.gif); background-repeat:no-repeat;background-position:3px Center;}. Main Li A,. Hmain li a {color:black;background-image:none;}. Main UL,. hmain ul {display:none;}. Hmain {float:left;margin-right:1px;}

  js section:
Implementation of the drop-down effect via JS response event (Menu.js):
$ (". Main > a") when the DOM in the Ready (function () {///page has already been loaded. Click (function () {///To find the submenu item corresponding to the main menu items var Ulnode = $ (this). Next ("ul"), Ulnode.slidetoggle (); Changeicon ($ (this));}); $ (". 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 (' images/expanded.gif ') ");} else {mainnode.css (" Background-image "," url (' images/collapsed.gif ') ");}}}

The implementation is:


with these packaged methods, we can call them directly in the project. 
     jquery and javascript:
JavaScript is a scripting language, mainly used in the browser, to achieve the Web page of the Document object operation and some user interaction action processing.
While JQuery is a class library of JavaScript, it combines some of the features that are often used in JavaScript development to make it easier for developers to use directly, without the need to write large amounts of code in native JavaScript statements, and to achieve consistent results across different browsers. is one of the most popular JavaScript libraries today.
If you compare JavaScript to raw material, then jquery is a semi-finished product. Do project finished product process, with raw materials directly do of course no problem, but certainly no use of semi-finished products high efficiency. So jquery is the semi-finished product that improves our efficiency.
"JQuery"--Horizontal vertical drop-down menu