`
sd1992585
  • 浏览: 49738 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

无限层级下拉菜单(jquery)

阅读更多
[color=red]呵呵,先发1个以前工作中自己写的一个东东:[/color]

HTML:            <ul id="daohang">
                <li>
                    <a href="${base}/">首页</a>
                        <ul>
                            <li>
                                <a href="#">下拉一</a>
                                <ul class="aaa">
                                    <li>
                                        <a href="#">下拉二</a>
                                        <ul class="aaa">
                                            <li><a href="#">下拉二</a></li>
                                            <li><a href="#">下拉二</a></li>
                                            <li><a href="#">下拉二</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">下拉二</a></li>
                                    <li><a href="#">下拉二</a></li>
                                </ul>
                            </li>
                            <li><a href="#">下拉二</a></li>
                            <li><a href="#">下拉三</a></li>
                        </ul>
                </li>
            </ul>

css:
#daohang li ul li{position:relative;}
#daohang li ul{display:none;}
#daohang li ul li .aaa{position:absolute;left:80px;top:0;border-left:1px solid #fff}
#daohang li ul li .aaa li{float:none;}

js(基于jquery):
$(document).ready(function(){
         $("#daohang li").hover(function(){
            $(this).find("ul:first").slideDown(200);//鼠标滑过查找li下面的第一个ul然后显示;
        },function(){
            $(this).find("ul:first").slideUp(200);//鼠标离开隐藏li下面d的ul;
        });
分享到:
评论

相关推荐

    jQuery自适应横排下拉菜单导航代码

    "jQuery自适应横排下拉菜单导航代码"提供了一个高效且美观的解决方案,尤其适合那些希望提升用户体验的开发者。这个代码利用jQuery库实现,能够根据屏幕尺寸自动调整布局,确保在各种设备上都能良好地展示。 首先,...

    jQuery无限层级下拉框

    【jQuery无限层级下拉框】是一种交互式的网页元素,它允许用户从一系列级联的下拉菜单中选择值,这些菜单可以无限扩展,通常用于表示层次结构的数据,例如地区、组织结构或产品分类。实现这一功能的核心是利用jQuery...

    jquery版,无限下拉菜单栏,css无限级导航javascript特效

    在jQuery的帮助下,可以实现无限层级的下拉效果,即菜单的深度不受限制,用户可以通过连续展开下拉菜单来探索网站的深层结构。 接下来,CSS(Cascading Style Sheets)是用于描述HTML或XML(包括各种XML方言,如SVG...

    jQuery实现下拉菜单.

    在网页设计中,下拉菜单是一种常见的...这个下拉菜单不仅可以应用于导航栏,还可以作为其他类型的交互式菜单,如筛选选项或层级展示。在实际项目中,可以根据需求进行定制和优化,比如添加动画效果、调整响应式布局等。

    jquery实现三级下拉菜单实例

    在网页设计中,导航菜单是不可或缺的部分,尤其在大型网站中,为了清晰地展示大量信息层级,三级下拉菜单的应用非常普遍。本实例主要讲解如何使用jQuery库来创建一个兼容各浏览器、小巧实用的三级下拉菜单。jQuery以...

    可以放到项目中用 多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表,有demo

    这种组件通常包含一个可展开的下拉菜单,用户可以在其中勾选多个选项。与传统的单选下拉列表相比,多选下拉列表允许用户同时选择多个值,极大地提高了用户体验和效率。 3. **复选下拉列表**: 复选下拉列表通常...

    jQuery多级下拉菜单支持多级下拉列表菜单代码

    在网页设计中,导航菜单是不可或缺的部分,尤其在大型网站中,多级下拉菜单能够有效地组织和展示复杂的层级结构。jQuery作为一种强大的JavaScript库,提供了简单且高效的API来实现这样的功能。本文将深入探讨如何...

    jQuery树形多级下拉菜单.zip

    "jQuery树形多级下拉菜单"就是这样一款实用的代码资源,它允许开发者创建具有无限嵌套级别的二级下拉菜单,为网站的菜单系统增添了层次感和交互性。 一、jQuery库的介绍 jQuery是一个高效、简洁的JavaScript库,它...

    下拉菜单集合(二级、三级下拉菜单)

    为了增加动态效果和交互性,JavaScript(或jQuery等库)常被用来处理下拉菜单的打开和关闭事件。例如,监听`click`或`mouseover`事件,根据事件类型来显示或隐藏菜单。还可以添加其他功能,如禁用某些选项、跟踪用户...

    两款jquery下拉导航菜单支持多级的下拉导航菜单代码

    关键在于使用`mouseenter`和`mouseleave`事件来触发下拉菜单的显示和隐藏,并利用jQuery的`toggle()`方法切换子菜单的可见性。同时,为了处理多级嵌套,需要递归地遍历菜单项并为每一级添加相应的事件处理。 第二款...

    简单的jQuery无限级多级导航下拉菜单代码

    "简单的jQuery无限级多级导航下拉菜单代码"提供了一个高效且易于实现的解决方案,它允许网页设计师创建从二级到无限级的下拉菜单,使用户能够方便地浏览和访问网站的各个部分。 首先,我们需要理解jQuery库在其中的...

    jQuery无限极多级导航下拉菜单.zip

    【jQuery无限极多级导航下拉菜单】是一个基于JavaScript库jQuery设计的网页导航组件,它主要应用于网站头部,提供一种高效、美观的方式来展示网站的层级结构。这种菜单系统能够实现无限级别的下拉展开效果,使得用户...

    c#.net无限级联下拉菜单

    在C#.NET编程环境中,构建无限级联下拉菜单是一项常见的需求,特别是在处理层次结构数据时,如组织架构、商品分类或地区层级等。本文将详细介绍如何使用C#.NET和Access数据库来实现这一功能。 首先,我们需要理解...

    jQuery手机大众点评下拉菜单特效.zip

    在本文中,我们将深入探讨如何使用jQuery来实现手机端的大众点评下拉菜单特效。这个特效主要用于提升用户在移动端选择地址时的交互体验,模仿了大众点评应用中的导航菜单设计。我们将围绕JavaScript(特别是jQuery库...

    jquery UI渐变下拉菜单.zip

    《jQuery UI 渐变下拉菜单的实现与应用》 在网页设计中,导航菜单是不可或缺的一部分,它为用户提供了一种简洁、直观的界面来访问网站的各个部分。随着前端技术的发展,菜单的设计也越来越多样化,其中jQuery UI的...

    jsTreeSelect jquery 树形下拉菜单

    这种树形下拉菜单在数据层级关系复杂时特别有用,用户可以通过展开和折叠节点来浏览和选择层次化的数据。 ### 1. jsTree简介 jsTree是一款开源的JavaScript库,主要用于创建可交互的树形结构。它支持多种操作,如...

    jQuery微软官网全屏导航下拉菜单.zip

    《jQuery微软官网全屏导航下拉菜单:深入解析与实现》 在网页设计中,一个高效且美观的导航系统是至关重要的,它可以帮助用户轻松地浏览网站内容,提高用户体验。微软官网的全屏导航下拉菜单就是这样一个优秀的交互...

    jQuery左侧下拉三级收缩菜单_jQuery左侧下拉三级收缩菜单_

    本篇将深入讲解如何利用jQuery实现一个功能完善的左侧下拉三级收缩菜单。 首先,让我们理解菜单的基本结构。在HTML中,我们通常会创建一个`&lt;ul&gt;`元素作为菜单的基础框架,每个层级的菜单项由`&lt;li&gt;`元素表示,一级...

    商城网站多级下拉菜单,jquery插件版.rar

    多级下拉菜单在这种场景下尤为实用,特别是在有复杂层级结构的网站中,如电商网站,可以将众多的商品类别和子类别清晰地展示出来。 jQuery插件是一种基于JavaScript库jQuery的扩展,它简化了HTML文档遍历、事件处理...

    网页模板,jquery下拉菜单

    下拉菜单在网页导航中非常常见,尤其适用于有多个层级的菜单结构。当用户悬停或点击主菜单项时,下级菜单会滑动显示,这样用户就可以轻松地访问多个子页面,而无需滚动或离开当前视图。 在实现jQuery下拉菜单时,...

Global site tag (gtag.js) - Google Analytics