`

jquery 实现下拉菜单

阅读更多

 

该文章属于原创:转载注明出处: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实现下拉菜单

分享到:
评论

相关推荐

    Jquery实现下拉菜单

    在这个“Jquery实现下拉菜单”的主题中,我们将深入探讨如何在Visual Studio 2008(使用.NET Framework 3.5)环境下,利用jQuery创建功能丰富的下拉菜单,并实现点击当前菜单项时关闭其他打开的菜单。以下是关于这个...

    jquery实现下拉菜单

    总结来说,利用jQuery实现下拉菜单的关键在于理解HTML结构、CSS样式以及jQuery提供的事件处理和动画方法。通过巧妙地组合这些元素,我们可以创建出响应式、交互性强的下拉菜单,为用户提供更好的浏览体验。在实际...

    jQuery实现下拉菜单.

    你的jQuery下拉菜单脚本路径.js"&gt; ``` 如果使用的是本地文件,记得将`https://code.jquery.com/jquery-3.6.0.min.js`替换为实际的jQuery文件路径。 通过以上步骤,你已经成功地使用jQuery实现了下拉菜单功能。...

    jquery 实现下拉菜单过长滚动代码

    本文将深入探讨如何使用jQuery实现下拉菜单过长时自动滚动的代码实现。 首先,我们需要在HTML结构中创建下拉菜单。一个简单的下拉菜单可能包括一个主菜单项和若干子菜单项,如以下示例所示: ```html 菜单项 ...

    Jquery实现下拉菜单代码

    Jquery实现下拉菜单代码,CSS+HTML5+JQuery,欢迎大家下载。

    【JavaScript源代码】jQuery实现下拉菜单滑动效果.docx

    在本例中,我们将详细讨论如何使用jQuery实现下拉菜单的滑动效果。 首先,jQuery的`hover`函数是用于监听鼠标进入和离开元素的事件。在这个例子中,我们只需要一行代码就能实现下拉菜单的滑动展开和折叠: ```...

    使用JQuery实现下拉菜单

    本教程将详细介绍如何使用JavaScript库JQuery来创建一个简单的横向或纵向下拉菜单。 首先,我们需要理解JQuery的基本用法。JQuery是一个轻量级、功能丰富的JavaScript库,它简化了DOM操作、事件处理以及AJAX交互。...

    jquery实现下拉菜单效果

    总结来说,实现jQuery下拉菜单效果主要包括以下步骤: 1. 创建HTML结构,包含主菜单和子菜单。 2. 使用CSS隐藏默认的子菜单。 3. 引入jQuery库,并编写JavaScript代码,监听鼠标悬停事件,控制子菜单的显示与隐藏。 ...

    jQuery多级下拉菜单支持多级下拉列表菜单.zip

    jQuery作为一款强大的JavaScript库,提供了丰富的功能来实现动态、交互式的页面效果,其中包括多级下拉菜单的创建。这个名为"jQuery多级下拉菜单支持多级下拉列表菜单"的资源,就是专门为商城网站或企业网站设计的一...

    jquery下拉全屏导航菜单(源码)

    在“jquery下拉全屏导航菜单(源码)”项目中,jQuery被用于实现动态效果和交互功能,使得导航菜单更加生动和易于使用。 下拉导航菜单通常包含一个主菜单项,当用户悬停或点击时,会展示出子菜单项。这种设计节省...

    jquery 实现下拉收缩菜单

    实现效果 点击标题名如“帮助”后下拉出“帮助”的子元素 再次点击“帮助”后列表收缩回去 代码和样式很简单。希望对各位有帮助 自己回去改改便可

    jquery动态下拉菜单.zip

    jQuery 是一个轻量级的 JavaScript 库,以其简洁的API和强大的功能深受开发者喜爱,用于实现动态下拉菜单非常方便。本压缩包“jquery动态下拉菜单.zip”包含了使用 jQuery 创建动态下拉菜单的相关资源。 “说明.htm...

    jQuery图文下拉菜单 jQuery图文下拉菜单网页特效.zip

    在这个名为"jQuery图文下拉菜单 jQuery图文下拉菜单网页特效.zip"的压缩包中,包含了一个使用jQuery实现的图文下拉菜单的网页特效实例。 首先,我们来详细了解下拉菜单的基本概念。在网页设计中,下拉菜单通常用于...

    jquery 下拉菜单特效

    本教程将深入探讨如何使用jQuery实现下拉菜单特效。 首先,理解基本的HTML结构是至关重要的。一个简单的下拉菜单通常由`&lt;ul&gt;`(无序列表)和`&lt;li&gt;`(列表项)组成,其中`&lt;li&gt;`元素可能包含另一个`&lt;ul&gt;`来创建下级...

    jquery实现下拉菜单美化效果

    jQuery 是一个广泛使用的 JavaScript 库,它简化了DOM操作,动画效果和事件处理,因此是实现下拉菜单美化的理想工具。本教程将深入探讨如何利用 jQuery 实现下拉菜单的美化效果。 首先,我们需要创建基本的HTML结构...

    jquery下拉菜单

    总结,jQuery下拉菜单的实现涉及HTML、CSS和JavaScript的结合使用,通过jQuery的便利性,我们可以快速创建出具有动画效果和良好用户体验的下拉菜单。在实际项目中,还可以根据需求进行功能扩展和优化,以满足各种...

    div模拟下拉菜单(select)jquery插件.gz

    总结来说,这个插件提供了一种使用`div`和jQuery实现下拉菜单的方法,它允许开发者自定义样式,提升用户体验。在实际开发中,你可以根据`demo.html`来快速上手,通过修改`divselect.js`来定制功能,利用`jquery.js`...

    jQuery动画下拉菜单

    jQuery下拉菜单主要基于CSS样式和jQuery事件监听来实现。通常,菜单项是一个链接或按钮,当用户悬停或点击时,会触发一个JavaScript事件,这个事件会显示隐藏的子菜单。通过CSS控制菜单项的初始状态(如隐藏或可见)...

    jQuery和CSS3超酷二级下拉菜单特效插件

    8. `js`:JavaScript代码文件,其中可能包含实现下拉菜单特效的jQuery脚本。 使用这个插件,开发人员需要在HTML文件中引入jQuery库和插件的CSS及JS文件,并按照插件提供的示例结构构建菜单。然后,通过jQuery的事件...

Global site tag (gtag.js) - Google Analytics