Jquery method to implement unlimited hierarchical navigation menu _ jquery

This article mainly introduces jquery's method of implementing unlimited hierarchical navigation menus. The example analyzes the techniques for using jQuery plug-ins to operate html and corresponding styles to achieve navigation menu effects, which has some reference value, for more information about jquery's unlimited hierarchical navigation menu, see the following example. Share it with you for your reference. The specific implementation method is as follows:

1. The jquery plug-in version code is as follows:

The Code is as follows:

(Function ($ ){
$. Fn. extend ({
Droplinemenu: function (configs ){
Var configs = $. extend ({
Over: 200,
Out: 100,
Rightdown: 'css/down.gif'
}, Configs | {});
This. find ("> ul"). addClass ("dropmenu ");
This. find ("ul li: has (ul)"). addClass ('hasmenu '). find ("> a"). append ("");
Var currentobj;
Return $ ('Li. hasmenu '). hover (function (){
If ($. browser. msie) {// clear overflow: hidden generated in ie
$ (This). parent ("ul" cmd.css ({'overflow': 'visible '});
}
$ (This). find ("> ul"). stop (true, trueapps.css ('top', $ (this). height (). slideDown (configs. over );
}, Function (){
$ (This). find ("> ul"). stop (true, true). slideUp (configs. out );
});
}
});
}) (JQuery );

2. style code

The Code is as follows:

* {Margin: 0; padding: 0}
. Droplinebar {
Position: absolute;
Z-index: 20;
Width: 700px;
}
. Droplinebar ul. dropmenu {
Position: relative;
}
. Droplinebar ul {
Width: 100%;
Float: left;
Font: bold 13px Arial;
Background: #242c54 url(bluedefault.gif) center repeat-x;/* default background of menu bar */
}
. Droplinebar ul li {
Float: left;
}
. Droplinebar ul {
Width: 700px;
Display: none;
Z-index: 100;
Position: absolute;
Left: 0;
Background: #303c76;
Zoom: 1;
}
. Droplinebar ul li {
Float: left;
Color: white;
Padding: 9px 11px;
Text-decoration: none;
Display: block;
}
. Droplinebar ul li. hasmenu a img {border: none; margin-left: 5px ;}
. Droplinebar ul li a: hover,. droplinebar ul li. current {/* background of main menu bar links onMouseover */
Color: white;
Background: transparent url(blueactive.gif) center repeat-x;
}
/* Sub level menu links style */
. Droplinebar ul li {
Font: normal 13px Verdana;
Padding: 6px;
Padding-right: 8px;
Margin: 0;
Border-bottom: 1px solid navy;
}
. Droplinebar ul li a: hover {/* sub menu links 'background color onMouseover */
Background: #242c54;
}

3. the HTML code is as follows:

The Code is as follows: