Implementation Code of classification navigation based on jquery's public comments

Simple, lightweight, fast, and efficient!

Html structure:

Copy codeThe Code is as follows: <div id = "menu">
<Ul id = "G_chan-panel" class = "pop-panel pp_channels Fix" style = "position: absolute; visibility: visible; z-index: 1001; top: 175px; left: 189px; ">
<Li class = "root-item"> <a href = "#" class = "root-name"> <span> catering </span> </a>
<Ul class = "pop-panel Fix sub-list">
<Li class = "main-cate"> <a href = "#"> catering channel </a> </li>
<Li> <a href = "#"> Cantonese cuisine </a> </li>
...
</Ul>
</Li>
<Li class = "root-item"> <a href = "#" class = "root-name"> <span> shopping </span> </a>
<Ul class = "pop-panel Fix sub-list">
<Li class = "main-cate"> <a href = "#"> Shopping Channel </a> </li>
<Li> <a href = "#"> supermarkets/convenience stores </a> </li>
...
<Li> <a href = "#"> others </a> </li>
</Ul>
</Li>
</Ul>
</Div>

Jquery code:Copy codeThe Code is as follows: <script type = "text/javascript">
$ (Function (){
$ ('# G_chan-panel'). delegate ("li", "mouseenter", function () {$ (this). addClass ("active ")});
$ ('# G_chan-panel'). delegate ("li", "mouseleave", function () {$ (this). removeClass ("active ")});
});
</Script>

Css style:Copy codeThe Code is as follows: BODY {
Background-color: # fff;
Color: #555;
Font: 9pt/14px Tahoma, "", Arial, Helvetica, Sans-Serif;
Letter-spacing: 0;
Margin: 0;
}
Html, body, ul, ol, li, dl, dt, dd, p, h1, h2, h3, h4, h5, h6, a, img, th, td, form, fieldset, iframe, object, pre, code, legend, blockquote {
Border: 0 none;
Margin: 0;
Outline: 0 none;
Padding: 0;
}
H1, h2, h3, h4, h5, h6 {
Font-size: 100%;
Font-weight: normal;
}
UL, LI {
List-style: none outside none;
Margin: 0;
Padding: 0;
}
IMG {
Border: medium none;
Margin: 0;
Padding: 0;
Cursor: pointer;
}
Input, img, select {
Vertical-align: middle;
}
A {
Color: #666666;
}
A: link {
Color: #666666;
Text-decoration: none;
}
A: visited {
Color: #666666;
Text-decoration: none;
}
A: hover {
Color: # C90809;
Text-decoration: none;
}
/* Navigation */
. Pp_channels. root-item,. pp_channels. root-name,. pp_channels. root-name span,. pp_channels. sub-list li {
Background-image: url ("bg.png ");
Background-repeat: no-repeat;
}
. G_chan-panel {
Position: absolute;
Z-index: 1000;
Top: 120px;
Left: 199px;
Visibility: hidden;
}
. Pp_channels {
Width: 138px;
Padding: 0;
Border-width: 0 0 2px 1px;
Border-radius: 5px;
-Webkit-border-radius: 5px;
-Moz-border-radius: 5px;
-Moz-box-shadow:-1px 1px 1px # ccc;
-Webkit-box-shadow: 0 1px 5px # ccc;
Box-shadow: 0 1px 5px # ccc;
}
. Pp_channels. root-item {
Zoom: 1;
Position: relative;
Width: 139px;
Height: 34px;
Background-position:-13px-373px;
Overflow: visible;
Vertical-align: middle;
}
. Pp_channels. root-name {
Display: block;
Z-index: 1001;
Position: relative;
Border-top: 1px solid # B9F5D2;
Padding-left: 10px;
Background-position:-10px-358px;
Cursor: pointer;
}
. Pp_channels. root-name span {
Display: block;
Border-right: 1px solid # B9F5D2;
Padding-left: 9px;
Height: 34px;
Font-size: 1.2em;
Line-height: 34px;
Color: #000;
Background-position:-167px-358px;
}
. Pp_channels. active. root-name {
Background: # fff;
}
. Pp_channels. active. root-name span {
Color: # C00;
Border-color: # fff;
}
. Pp_channels. no-sub. root-name span {
Border-color: # fff;
Background-position: 20px-358px;
}
. Pp_channels. sub-list {
Left: 138px;
Top:-34px;
Padding: 5px 2px 5px 16px;
Width: 200px;
Overflow: hidden;
_ Top:-35px;
-Moz-box-shadow:-1px 1px 1px # ccc;
-Webkit-box-shadow: 0 1px 5px # ccc;
Box-shadow: 0 1px 5px # ccc;
}
. Pp_channels. active. sub-list {
Visibility: visible;
}
. Pp_channels. sub-list li {
Float: left;
Width: 83px;
Margin: 0 10px 5px 0;
}
. Pp_channels. sub-list. main-cate {
Width: 200px;
Margin-right:-10px;
Font-weight: bold;
}
. Pp_channels. sub-list {
Padding-left: 3px;
Line-height: 21px;
Background-position:-169px-418px;
* Background-position:-169px-420px;
}
. Pp_channels. sub-list a: hover {
Background-position:-169px-438px;
* Background-position:-169px-pixel PX;
}
. Pop-panel {
Z-index: 1000;
Position: absolute;
Visibility: hidden;
Border: 1px solid # B9F5D2;
Padding: 5px 9px;
Background: # fff;
Color: # 61646E;
# Margin-left:-0px;
_ Margin-left:-0px;
}
. Pop-panel {
Color: # 61646E;
}
. Pop-panel a: hover {
Text-decoration: none;
Color: # C00;
}

Other applications:Copy codeThe Code is as follows: // locate
Var X = $ ('# G_chan'). offset (). top;
Var Y = $ ('# G_chan'). offset (). left;
$ ("# G_chan-panel"). offset ({top: X + 36, left: Y-5 });
// The mouse goes through the animation effect to prevent click link jump
$ ("# G_chan"). hover (function (event ){
Event | event. stopPropagation (); $ ("# G_chan-panel"). slideDown (). mouseleave (function (){
$ (This). slideUp ()
});
});
// Click the drop-down animation in the city list to prevent bubbles
$ ("# G_loc "). click (function (event) {event. preventDefault (); $ ("# G_loc-panel "). slideToggle ("slow") ;}); Author: Zeng xiangzhan