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


Posted in Javascript onMarch 12, 2015

本文实例讲述了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("<img class='downarrowclass' src='"+configs.rightdown+"'>");

            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代码如下
<link rel="stylesheet" type="text/css" href="css/droplinebar.css" /> 

<script type="text/javascript" src="js/jquery.min.js"></script> 

<script src="js/droplinemenu.js" type="text/javascript"></script> 

<script type="text/javascript"> 

$(document).ready(function(){

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

});

</script>

<div id="mydroplinemenu" class="droplinebar">

<ul>

<li><a href="http://www.dynamicdrive.com/">Home</a></li>

<li><a href="http://www.dynamicdrive.com/style/">CSS Examples</a>

  <ul>

  <li><a href="#">Activities 1</a></li>

  <li><a href="#">Activities 2</a></li>

  <li><a href="#">Activities 3</a>

      <ul>

      <li><a href="#">Water Sports 1</a></li>

      <li><a href="#">Water Sports 1</a></li>

      <li><a href="#">Water Sports 1</a></li>

      <li><a href="#">Water Sports 1</a></li>

      </ul>

    </li>

  <li><a href="#">Activities 4</a></li>

  </ul>

</li>

<li><a href="http://tools.dynamicdrive.com">Tools</a></li>

<li><a href="http://www.javascriptkit.com/">JavaScript</a>

  <ul>

  <li><a href="#">Traveling 1</a></li>

  <li><a href="#">Traveling 2</a></li>

  <li><a href="#">Traveling 3</a></li>

  <li><a href="#">Traveling 4</a>

      <ul>

      <li><a href="#">Africa 1</a></li>

      <li><a href="#">Africa 2</a></li>

      <li><a href="#">Africa 3</a></li>

      <li><a href="#">Africa 4</a>

          <ul>

          <li><a href="#">Kenya 1</a></li>

          <li><a href="#">Kenya 2</a></li>

          <li><a href="#">Kenya 3</a></li>

          <li><a href="#">Kenya 4</a></li>

          <li><a href="#">Kenya 5</a></li>

          </ul>

        </li>

      </ul>

    </li>

  <li><a href="#">Traveling 5</a></li>

  </ul>

</li>

<li><a href="http://www.cssdrive.com">Gallery</a></li>

</ul>

</div>

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("<img class='downarrowclass' src='css/down.gif'>");

    $('.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程序设计有所帮助。

Javascript 相关文章推荐
Javascript 复制数组实现代码
Nov 26 Javascript
js数组的操作详解
Mar 27 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
vue父子组件间引用之$parent、$children
May 20 Javascript
JavaScript 异步时序问题
Nov 20 Javascript
JavaScript中定义函数的三种方法
Mar 12 #Javascript
javascript实时显示北京时间的方法
Mar 12 #Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 #Javascript
JavaScript数据结构与算法之栈详解
Mar 12 #Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 #Javascript
Javascript数据结构与算法之列表详解
Mar 12 #Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 #Javascript
You might like
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
jQuery each()小议
2010/03/18 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
微信小程序实现首页弹出广告
2020/12/03 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
Django中的CBV和FBV示例介绍
2018/02/25 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
Sanic框架路由用法实例分析
2018/07/16 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
毕业生优秀推荐信
2013/11/26 职场文书
财政局长自荐信范文
2013/12/22 职场文书
护士自我鉴定怎么写
2014/02/07 职场文书
教师年度考核评语
2014/04/28 职场文书
护士求职自荐信
2015/03/25 职场文书
会计专业自荐信范文
2019/05/22 职场文书
python实现简易名片管理系统
2021/04/11 Python
Golang jwt身份认证
2022/04/20 Golang
Java获取字符串编码格式实现思路
2022/09/23 Java/Android