jquery vertical Menu and horizontal menu implementation

1 Creating a verticalandhorizontalmenu.html file

<! Doctype html>

2 Creating a Verticalandhorizontalmenu.css file
Ul,li{    list-style: none;} ul{    padding: 0;    margin: 0;}. Vmain{    width: 150px;    background-image: url ("images/ Toptitle.gif ");     background-repeat: no-repeat;    margin-bottom :  2px;}. Hmain{    width: 150px;    background-image: url ("images/ Toptitle.gif ");     background-repeat: no-repeat;    margin-right:  2px;    float: left;} a{    text-decoration: none;    padding-top: 3px;     padding-bottom: 3px;    padding-left: 20px;     display: block;    width: 130px;}. vmain a,.hmain a{    color:  #ffffff;  &nbSp;  background-image: url ("Images/collapsed.gif");     background-repeat:  no-repeat;    background-position: 3px center;}. vmain li a,.hmain li a{    color:  #000000;     background-image: none;    background-color:  #eeeeee;     border-bottom: 1px solid  #dddddd;}. Vmain li a:hover,.hmain li a:hover{    background-image: url (" Images/linkarrow.gif ");    background-repeat: no-repeat;     background-position: right center;    background-color:  #006666;     color:  #fff;}. Vmain ul,.hmain ul{    display: none;}

3 Creating a Verticalandhorizontalmenu.js file
$ (function () {    $ (". Vmain>a"). Click (function () {         var ulnode=$ (This). Next ("ul");         /* method One */         if (ULNODE.CSS ("display") = = "None") {      &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;ULNODE.CSS ("Display", "block");             /*               OR:              ulnode.show ("normal");// Number (milliseconds), Fast,slow, Normal, and fast              or:              ulnode.slidedown ();              */         }        else{             ULNODE.CSS ("Display", "none");            /*               or:              ulnode.hide ("normal");               or:              ulnode.slideup ();             */         }        /*           or Method two:          Ulnode.toggle ("normal");//Number (MS), Fast,slow, Normal, and fast          or method Three:           ulnode.slidetoggle ();         */     });     $ (". Hmain"). Hover (function () {         $ (This). Children ("ul"). Slidedown ("normal");         Changeicon ($ (this). Children ("a"));     },function () {         $ (This). Children ("ul"). Slideup ("normal");         Changeicon ($ (this). Children ("a"));     }); Function changeicon (Mainnode) {    if (Mainnode) {         if (Mainnode.css ("Background-image"). IndexOf ("Collapsed.gif") >=0) {             mainnode.css ("Background-image", "url (' images/expanded.gif ')");         }else{     &Nbsp;      mainnode.css ("Background-image", "url (' images/collapsed.gif ')");         }    }}

4, the operation effect is as follows
650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/6B/E0/wKioL1U5DXXTVnmpAACNgz6cAXM790.jpg "title=" p1.jpg "alt=" Wkiol1u5dxxtvnmpaacngz6caxm790.jpg "/>



















This article from "It Technology Learning and communication" blog, declined reprint!
jquery vertical Menu and horizontal menu implementation