使用jquery 简单实现下拉菜单


Posted in Javascript onJanuary 14, 2015

Jquery 是一个轻量的框架,个人认为非常好用,今天就写一个非常简单的例子,实现下拉菜单功能;

首先肯定要在页面引用jquery.js  版本不限 ;

接下来把=====================html贴出来:

<div class=”header_menu”>  

        <ul>  

            <li class=”menuli” id=”xtgl_menu”>系统管理</li>  

            <li class=”menuli” id=”ggsq_menu”>干管所勤</li>  

            <li class=”menuli” id=”bhz_menu”>保护站</li>  

            <li class=”menuli” id=”mcjy_menu”>木材检验</li>  

            <li class=”menuli” id=”slgh_menu”>森林管护</li>  

        </ul>  

    </div>  

<div class=”display movediv” id=”slgh_menu_div”>  

    <ul>  

        <li class=”redli”>出勤管理</li>  

        <li class=”redli”>巡视管理</li>  

        <li class=”redli”>现场取证</li>  

        <li class=”redli”>问题处置</li>  

    </ul>  

</div>  

<div class=”display movediv” id=”mcjy_menu_div”>  

    <ul>  

        <li class=”redli”>位置监测</li>  

        <li class=”redli”>检验管理</li>  

    </ul>  

</div>  

<div class=”display movediv” id=”bhz_menu_div”>  

    <ul>  

        <li class=”redli”>出勤管理</li>  

        <li class=”redli”>监管信息</li>  

    </ul>  

</div>  

<div class=”display movediv” id=”ggsq_menu_div”>  

    <ul>  

        <li class=”redli”>出勤管理</li>  

        <li class=”redli”>监管信息</li>  

    </ul>  

</div>  

<div class=”display movediv” id=”xtgl_menu_div”>  

    <ul>  

        <li class=”redli”>权限管理</li>  

        <li class=”redli”>设备管理</li>  

    </ul>  

</div> 

===========================css样式:

/**头部菜单**/  

.header_menu{  

    float:right;  

    width: 50%;  

    height: 100%;  

    cursor: pointer;  

}  

.header_menu ul{  

    list-style: none;  

    height: 100%;  

}  

.header_menu ul li{  

    float: right;  

    width: 20%;  

    color:white;  

    font-size:14px;  

    padding-top: 55px;  

    font-weight: bold;  

}  

.display{  

    display: none;  

}  

.display ul{  

    list-style: none;  

    width: 100px;  

}  

.display ul li{  

    padding-top:10px;  

    padding-bottom: 5px;  

    padding-left:5px;  

    cursor: pointer;  

    font-size: 14px;  

}  

.movediv{  

    position: fixed;  

    left: 0px;  

    top:0px;  

    font-size: 14px;  

    white;  

    border:1px solid white;  

}  

.redcolor{  

    #a0c9e6;  

} 

=======================js脚本

$(function() {  

    // 菜单绑定事件  

    initMenuListener();  

    // 下拉菜单绑定事件  

    initSubMenuHover();  

    // 下拉菜单颜色改变  

    initSubMenuLiHover();  

});  

/** 

 * 头部菜单绑定滑过事件 

 */  

function initMenuListener() {  

    $(“.menuli”).hover(function() {  

        var hideDivId = $(this).attr(“id”) + “_div”;  

        // 得到菜单的位置  

        var left = $(this).offset().left;  

        var top = $(this).offset().top;  

        var height = $(this).outerHeight();//outerHeight是获取高度,包括内边距,height是也是获取高度,不过只包括文本高度  

        $(“#” + hideDivId).show();  

        $(“#” + hideDivId).css(“left”, left);  

        $(“#” + hideDivId).css(“top”, top + height);  

    }, function() {  

        // 将原来的菜单隐藏  

        $(“.display”).hide();  

    });  

}  

/** 

 * 下拉菜单绑定事件 

 */  

function initSubMenuHover() {  

    $(“.display”).hover(function() {  

        $(this).show();  

    }, function() {  

        $(this).hide();  

    });  

}  

/** 

 *  下拉菜单改变颜色 

 */  

function initSubMenuLiHover() {  

    $(“.redli”).hover(function() {  

        $(this).addClass(“redcolor”);  

    }, function() {  

        $(this).removeClass(“redcolor”);  

    });  

} 

效果如下:
使用jquery 简单实现下拉菜单

小伙伴们使用的时候自己美化下,自由扩展下就可以用到自己的项目中了,我这里仅仅是简单做了点样式而已。

Javascript 相关文章推荐
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
vue filters的使用详解
Jun 11 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
vue组件中实现嵌套子组件案例
Aug 31 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 #Javascript
js实现禁止中文输入的方法
Jan 14 #Javascript
JavaScript 学习笔记之语句
Jan 14 #Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 #Javascript
JavaScript 学习笔记之操作符
Jan 14 #Javascript
Node.js的包详细介绍
Jan 14 #Javascript
JavaScript 学习笔记之数据类型
Jan 14 #Javascript
You might like
php xfocus防注入资料
2008/04/27 PHP
PHP 批量更新网页内容实现代码
2010/01/05 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
Python计算三维矢量幅度的方法
2015/06/15 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
python写程序统计词频的方法
2019/07/29 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
基于matplotlib xticks用法详解
2020/04/16 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
超市开店计划书
2014/09/15 职场文书
法人代表证明书格式
2014/10/01 职场文书
学生个人总结范文
2015/02/15 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
复兴之路展览观后感
2015/06/02 职场文书
Python中request的基本使用解决乱码问题
2022/04/12 Python
MySQL自定义函数及触发器
2022/08/05 MySQL