html左侧分级导航,jquery实现无限分级横向导航菜单的方法

本文实例讲述了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程序设计有所帮助。