`
DoubleEO
  • 浏览: 157819 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jq实现浮动的下拉菜单

阅读更多
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jquery3-菜单效果</title>
    <link type="text/css" rel="stylesheet" href="css/menu.css">
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="js/menu.js"></script>
</head>
<body>

<ul>
    <li class="main">
        <a href="#">菜单项1</a>
        <ul>
            <li><a href="#">子菜单项11</a></li>
            <li><a href="#">子菜单项12</a></li>
        </ul>
    </li>
    <li class="main">
        <a href="#">菜单项2</a>
        <ul>
            <li><a href="#">子菜单项21</a></li>
            <li><a href="#">子菜单项22</a></li>
        </ul>
    </li>
    <li class="main">
        <a href="#">菜单项3</a>
        <ul>
            <li><a href="#">子菜单项31</a></li>
            <li><a href="#">子菜单项32</a></li>
        </ul>
    </li>
</ul>
     <br />
     <br />

<ul>
    <li class="hmain">
        <a href="#">菜单项1</a>
        <ul>
            <li><a href="#">子菜单项11</a></li>
            <li><a href="#">子菜单项12</a></li>
        </ul>
    </li>
    <li class="hmain">
        <a href="#">菜单项2</a>
        <ul>
            <li><a href="#">子菜单项21</a></li>
            <li><a href="#">子菜单项22</a></li>
        </ul>
    </li>
    <li class="hmain">
        <a href="#">菜单项3</a>
        <ul>
            <li><a href="#">子菜单项31</a></li>
            <li><a href="#">子菜单项32</a></li>
        </ul>
    </li>
</ul>
</body>
</html>


js代码
$(function() {
    $(".main > a").click(function() {
        //找到主菜单项对应的子菜单项
        //next:寻找当前节点指定名称的兄弟节点。
        var ulNode = $(this).next("ul");
        /* if (ulNode.css("display") == "none") {
         ulNode.css("display", "block");
         } else {
         ulNode.css("display", "none");
         }*/

        //ulNode.show();
        //ulNode.hide();
        //自动判断,如果是合并的就打开,如果是打开的就合并
        //ulNode.toggle();

        //卷帘效果
        //ulNode.slideDown();
        //ulNode.slideUp();
        //卷帘效果的自动判断
        ulNode.slideToggle();
        changeIcon($(this));
    });
    $(".hmain").hover(function() {
        $(this).children("ul").slideDown();
        changeIcon($(this).children("a"));
    }, function() {
        $(this).children("ul").slideUp();
         changeIcon($(this).children("a"));
    });
});
//指示图标的展打开和关闭
function changeIcon(mainNode) {
    if (mainNode) {
        if (mainNode.css("background-image").indexOf("closed.gif") >= 0) {
            mainNode.css("background-image", "url(image/open.gif)");
        } else {
            mainNode.css("background-image", "url(image/closed.gif)");
        }

    }
}

ul, li {
/*清楚ul li上默认的小圆点*/
    list-style: none;
}

ul {
/*清除缩进*/
    padding: 0;
    margin: 0;
}

.main,.hmain{
    background-image: url("../image/title.jpg");
    background-repeat: repeat-x;
    width: 120px;
}

li {
    background-color: #EEEEEE;
}

a {
/*取消所有的下划线*/
    text-decoration: none;
    padding-left: 20px;
    /*充满所在区域*/
    display: block;
    display: inline-block;
    width: 100px;
    padding-top: 3px;
    padding-bottom: 3px;

}

.main a,.hmain a{
    color: white;
    background-image: url("../image/closed.gif");
    background-repeat: no-repeat;
    background-position: 5px center;
}

.main li a, .hmain li a{
    color: black;
    background-image: none;
}
/*将所有子菜单隐藏*/
.main ul,.hmain ul{
    display:none;
}
.hmain{
    float:left;
    margin-left:1px;
}

  • 大小: 15 KB
分享到:
评论

相关推荐

    非常酷炫的jQuery+css超滑二级下拉菜单

    例如,通过使用`transition`属性,可以平滑地改变下拉菜单在显示和隐藏过程中的透明度或高度,从而实现“超滑”的效果。 二级下拉菜单的设计通常包含以下关键元素: 1. 主菜单项:一级菜单,当鼠标悬停或点击时...

    兼容所有浏览器的JQ下拉菜单

    `menu.js`是项目的JavaScript部分,它实现了下拉菜单的逻辑。在这个文件中,开发者可能定义了事件监听器,如`click`事件,当用户点击某个菜单项时,触发下拉菜单的展开或收起。另外,可能还包括了动画效果的实现,如...

    jquery实现多级下拉菜单的实例代码

    使用jQuery实现多级下拉菜单能够使交互更加流畅,且代码相对简洁。以下是一个使用jQuery实现多级下拉菜单的实例,它理论上支持无限层级,并且具有简洁的文件结构。 首先,我们来看HTML结构。在示例代码中,`&lt;ul&gt;`...

    jQuery可展开收缩三级下拉菜单代码

    本文将深入探讨如何利用jQuery实现一个可展开收缩的三级下拉菜单,并结合提供的代码进行详细解析。 首先,我们需要理解jQuery的基本用法。jQuery是一个JavaScript库,它简化了DOM操作、事件处理和动画制作。在本...

    jQuery仿百度百科右侧浮动菜单代码.zip

    【jQuery仿百度百科右侧浮动菜单代码】是一种使用JavaScript库jQuery实现的网页交互功能,它旨在模仿百度百科中常见的右侧浮动菜单。这个菜单通常在页面滚动时保持固定在屏幕的一侧,提供一个方便的导航工具,用户...

    jQ响应式多级菜单 jQuery响应式多级菜单代码下载.zip

    3. **条件判断**:根据屏幕宽度或其他条件,决定是否显示为多级菜单或简单的单级下拉菜单。 4. **动画效果**:jQuery库支持丰富的动画效果,可以为菜单的展开和收起添加平滑的过渡。 在实际应用中,这个响应式多级...

    jQ+css3平滑二级下拉导航 jQuery+css3平滑二级下拉导航网页特效.zip

    过渡效果允许元素在两种状态之间平滑地变化,比如下拉菜单在展开和收起时的出现和消失速度。而动画则可以创建更复杂的时间序列行为,比如下拉子菜单的滑入滑出效果。 HTML5是现代网页开发的标准,它提供了许多新的...

    特炫下拉导航

    现在,根据描述中的“20款下拉导航菜单DIV+CSS+JQ特效”,我们可以期待一系列不同风格和功能的下拉菜单实例: 1. **多级下拉**:一些菜单可能支持多级嵌套,用户可以逐级展开子菜单,适用于需要展示复杂层级关系的...

    jquery收集效果集合一些选项卡/菜单等很实用的特效

    JS 特效 选项卡 菜单 下拉菜单 滚动特效 相册特效等等 网页特效 素材 web div+css 3级横向导航菜单 163网盘折叠菜单 CSS下拉菜单 div显示隐藏效果 Javascrip实现相册缩略图导航的两种效果 JS 图片轮换 封装中处理...

    仿美团实现地域选择和城市列表

    而`PopupWindow.rar` 可能是基础的PopupWindow实现,用于展示一般的下拉菜单或弹出窗口,是实现地域选择的基础。 在实际开发过程中,需要考虑性能优化,如异步加载城市数据,避免阻塞主线程;还要注意适配不同的...

    jQuery电商网站常用商品分类导航菜单代码

    例如,使用`.slideDown()`和`.slideUp()`方法实现下拉菜单的平滑展开和关闭,`.toggleClass()`用于切换类以改变元素的样式。 为了实现对IE8的兼容,开发者可能使用了jQuery的特定版本,因为某些较新的jQuery特性...

    Jquery和Ajax案例

    弹出菜单常用于下拉选项、操作提示等,jQuery提供了多种方式创建弹出菜单,如`dropdown`插件。通过CSS控制菜单的显示与隐藏,并结合Ajax加载菜单内容,可以实现动态更新。例如,当用户点击按钮时,通过Ajax请求获取...

    30多种JQuery特效酷炫珍藏源码

    5. **菜单与导航**:jQuery可以创建动态的下拉菜单、悬浮导航、多级导航等,使网站的导航更加直观易用。例如,`.toggle()`方法可用于实现点击后显示/隐藏子菜单。 6. **工具提示**:jQuery可以实现浮动提示信息,当...

    Jquery动态插件

    3. **下拉菜单插件**:在导航栏中,下拉菜单能提供层次化的菜单结构,如`dropdown.js`。这些插件通常具有响应式设计,适应不同设备屏幕大小,并支持鼠标悬停和点击触发。 4. **模态框插件**:模态框(`modal.js`)...

    jQuery ui code

    9. **下拉菜单(Dropdown)**:创建可下拉的选择菜单,增强原生HTML `&lt;select&gt;` 元素的功能。 10. **按钮(Buttons)**:将链接或输入元素转换为有视觉反馈的按钮,支持图标、复选按钮和单选按钮样式。 11. **工具...

    jQueryEasyUiApi

    - 同时包含主按钮和下拉菜单的按钮。 15. **Form表单** - 包含输入字段和控件的表单。 16. **ValidateBox验证框** - 用于验证用户输入的表单元素。 17. **Combo组合** - 通用的组合框基类。 18. **ComboBox...

    京东首页仿写.zip

    JavaScript是实现网页交互的核心语言,通过JS,你可以实现京东首页的一些动态效果,如导航栏的下拉菜单、轮播图、商品筛选功能等。初学者可以学习DOM操作,了解如何通过JavaScript改变HTML元素的属性、内容和样式,...

    jquery样式emoji表情加输入框

    2. **创建表情面板**:在页面上动态创建一个表情选择面板,可以是下拉菜单、弹出窗口或者浮动侧边栏,里面包含各种emoji图标。 3. **绑定点击事件**:当用户点击表情图标时,将对应的emoji字符插入到输入框中。 4....

    web网页基础设计大作业 html+css+纯jquery

    在网页设计中,jQuery可以用于添加动态效果,比如页面加载时的滑动、点击按钮后的弹窗、导航栏的下拉菜单等。你需要学习如何选择元素、添加事件监听器、操作DOM以及使用jQuery的动画API。 4. 实践应用:在大作业中...

    jquery-easyui-1.3.3

    5. **菜单(Menu)**:构建层级化的导航菜单,增强用户体验。 6. **按钮(Button)**:包括普通按钮、链接按钮、图标按钮等,用于触发操作。 7. **树形控件(Tree)**:展示层次结构的数据,常用于目录或组织结构...

Global site tag (gtag.js) - Google Analytics