jquery implementation Horizontal Vertical pull-down menu

LearningJavaScriptmentioned in the building of their ownJavaScriptlibraries, such asJQuery, these libraries contain their usual handy small functions that make their code clearer and easier to understand when others call it, and of course there are some issues to be aware of when writing a library, such as case, parentheses, wrapping, and so on.JQueryLearning provides some foundation,JQuerylearning mainly through a few examples to understandJQuerythe application, by viewingAPIuse specific methods to achieve their own effect, it makes the Web page move up. How the code implements a horizontal and vertical pull-down menu effect.

First inHTMLthrough theuland theLirepresents a menu item in a page, and then adds theCSSand theJSa reference to a file, noteJSReferences are referenced firstJquery.jsand then I wrote it myself.JSfile.

CSS section:
ul,li{/    * Clear menu item dot */   list-style:none;} ul{/   * Clears the indent value of the submenu */   padding:0;   margin:0;}. main,.hmain{   Background-image:url (.. /images/title.gif);   Background-repeat:repeat-x;   width:120px;} li{  background-color: #CCCCCC;} a{/   * Remove all underscores */   text-decoration:none;   padding-left:20px;   Display:bloock;   Display:inline-block;   width:100px;   padding-top:3px;   padding-bottom:3px;}. Main A,.hmain a{    color: #FFFFFF; Background-image:url (.. /images/collapsed.gif); background-repeat:no-repeat;background-position:3px Center;}. Main Li a,.hmain li a{    color: #000000; background-image:none;}. Main Ul,.hmain ul{   Display:none;}. hmain{   Float:left;   margin-right:1px;}
Menu.js section:
//portrait menu click Implementation Dropdown $ ( Document). Ready (function () {$ (". Main>a"). Click (function () {///Find the main menu corresponding to the submenu item var ulnode=$ (this). Next ("ul");/*if (      ULNODE.CSS ("display") = = "") {ulnode.css ("display", "block"); Changeicon ($ (this));        }ELSE{ULNODE.CSS ("Display", "none"); Changeicon ($ (this));} */Ulnode.slidetoggle ();//slidetoggle method is similar to toggle (hide the displayed element directly, hide the element display) Changeicon ($ (this));}); /Landscape Menu The mouse is implemented by pulling down (". Hmain"). Hover (function () {$ (this). Children ("ul"). Slidedown (); Changeicon ($ (this). Children ("a")); <span style= "Font-family:simsun;" >},function () {</span> 
  $ (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 ')");}}}
：

This stage of learning is to be more hands-on, learn to view the document, mastered the method, some effect of the implementation of the same, otherwise their study is very thin, more research, do a accumulate.
jquery implementation Horizontal Vertical pull-down menu