本文實例講述了jquery實現無限分級橫向導航菜單的方法。分享給大家供大家參考。具體實現方法如下：

1. jquery插件版本代碼如下：

(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) {//清除ie下生成的overflow:hidden

$(this).parent("ul").css({'overflow': 'visible'});

}

$(this).find(">ul").stop(true, true).css('top',$(this).height()).slideDown(configs.over);

},function(){

$(this).find(">ul").stop(true, true).slideUp(configs.out);

});

}

});

})(jQuery);

2. 樣式代碼

* {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 center repeat-x; /*default background of menu bar*/

}

.droplinebar ul li{

float:left;

}

.droplinebar ul ul {

width: 700px;

display:none;

z-index: 100;

position:absolute;

left:0;

background: #303c76;

zoom: 1;

}

.droplinebar ul li a{

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 center repeat-x;

}

/* Sub level menu links style */

.droplinebar ul li ul li a{

font: normal 13px Verdana;

padding: 6px;

padding-right: 8px;

margin: 0;

border-bottom: 1px solid navy;

}

.droplinebar ul li ul li a:hover{ /*sub menu links' background color onMouseover */

background: #242c54;

}

3. HTML代碼如下

$(document).ready(function(){

$("#mydroplinemenu").droplinemenu();

});

• Home
• CSS Examples
  • Activities 1
  • Activities 2
  • Activities 3
    • Water Sports 1
    • Water Sports 1
    • Water Sports 1
    • Water Sports 1
  • Activities 4
• Tools
• JavaScript
  • Traveling 1
  • Traveling 2
  • Traveling 3
  • Traveling 4
    • Africa 1
    • Africa 2
    • Africa 3
    • Africa 4
      • Kenya 1
      • Kenya 2
      • Kenya 3
      • Kenya 4
      • Kenya 5
  • Traveling 5
• Gallery

4. 無插件版本代碼:

$(document).ready(function(){

var configs_over = 200,configs_out = 100;

??? $("#mydroplinemenu").find(">ul").addClass("dropmenu").find("li:has(ul)").addClass('hasmenu').find(">a").append("");

$('.dropmenu li.hasmenu').hover(function(){

if ($.browser.msie) {//清除ie下生成的overflow:hidden

$(this).parent("ul").css({'overflow': 'visible'});

}

$(this).find(">ul").stop(true, true).css('top',$(this).height()).slideDown(configs_over);

},function(){

$(this).find(">ul").stop(true, true).slideUp(configs_out);

});

});

希望本文所述對大家的jQuery程序設計有所幫助。

總結

以上是生活随笔為你收集整理的html左侧分级导航,jquery实现无限分级横向导航菜单的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。