文档章节

jquery 实现下拉菜单

p
 pm-road
发布于 2014/12/17 14:21
字数 531
阅读 20
收藏 0

 

该文章属于原创:转载注明出处:http://www.pm-road.com/index.php/2014/12/09/276/

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;
    background-color: white;
    border:1px solid white;
}
.redcolor{
    background-color: #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实现下拉菜单

jquery实现下拉菜单

本文转载自:http://rqlipeng.iteye.com/blog/2166391

p
粉丝 6
博文 69
码字总数 638
作品 0
海淀
私信 提问
9款风格华丽的jQuery/CSS3插件

今天向大家分享9款效果相当不错的jQuery/CSS3插件,不多说,直接来看看这些插件吧。 1、jQuery动画下拉菜单Smart Menu 这是一款基于jQuery的动画下拉菜单,子菜单外观比较时尚,鼠标移到菜单...

yykj
2014/01/06
594
1
分享 7 款令人难忘的 jQuery 实用教程

这次分享的一些网页特效都是完全基于jQuery的,而且相信大部分插件都可以帮助WEB前端开发者简化很多开发工作,比如菜单、图片播放等实用功能。这里我向大家展示了这些插件的在线演示,同时也...

yykj
2012/12/05
6.6K
23
一些必看的jQuery导航插件和教程

导航是一个网站最重要的元素之一,您必须遵循统一的风格来设计您的网站,特别是导航的风格,让用户可以轻松地找到他们想要的内容。这里最大的部分是开发一个菜单,即要直观易用,又要符合你网...

迷路的阿修罗
2010/12/30
1K
1
推荐 6 款优秀的 jQuery/CSS3 应用插件

jQuery是一款非常轻巧优秀的JS类库,CSS3又可以十分方便地制作各种绚丽的网页效果,那么如果把jQuery的轻巧和CSS3的绚丽结合起来,相信一定会给网页添加不少精彩。下面搜集了几款非常出色的j...

yykj
2012/11/29
2.9K
9
8款实用jQuery插件实例欣赏及源码下载

jQuery的确是一款非常轻巧强大的JS框架,相信每一位WEB开发者都非常喜欢他。许多jQuery插件不仅开源,而且代码和设计都十分优雅,对自己的JS开发能力也会有很大提高。下面分享8款实用jQuery插...

yykj
2012/12/12
5
0

没有更多内容

加载失败,请刷新页面

加载更多

Java FOR-EACH循环

FOR-EACH循环使得代码更加的简短,也让代码更加易懂,其实他并没有加入什么新的功能。他的功能完全可以用简单的FOR循环代替。 for-each的用法: int a[] = {1,2,3,4,5,6} for(int s:a){ Syst...

无名氏的程序员
21分钟前
3
0
使用HTML5的History API

本文转载于:专业的前端网站➣使用HTML5的History API   HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL。这个功能很有用,例如通过一段JavaScript代...

前端老手
24分钟前
3
0
JAVA 编写redisUtils工具类,防止高并发获取缓存出现并发问题

import lombok.extern.slf4j.Slf4j;import org.springframework.data.redis.core.BoundHashOperations;import org.springframework.data.redis.core.BoundValueOperations;import org.......

huangkejie
今天
7
0
JMM内存模型(一)&volatile关键字的可见性

在说这个之前,我想先说一下计算机的内存模型: CPU在执行的时候,肯定要有数据,而数据在内存中放着呢,这里的内存就是计算机的物理内存,刚开始还好,但是随着技术的发展,CPU处理的速度越...

走向人生巅峰的大路
今天
98
0
你对AJAX认知有多少(2)?

接着昨日内容,我们几天继续探讨ajax的相关知识点 提到ajax下面几个问题又是必须要了解的啦~~~ 8、在浏览器端如何得到服务器端响应的XML数据。 通过XMLHttpRequest对象的responseXMl属性 9、 ...

理性思考
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部