`

jQuery实现多级手风琴菜单

 
阅读更多
http://www.helloweba.com/view-blog-175.html
手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验。本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单。

Demo: http://www.helloweba.com/demo/multi_menu/
Download: http://www.helloweba.com/demo/down/multi_menu.rar
HTML
首先在head间引用jQuery和插件。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/accordion.js"></script> 

接着,在body间写上菜单主体代码,HTML代码将由一系列无序列表组成。

<ul class="nav"> 
   <li><a href="http://www.helloweba.com">首页</a></li> 
   <li><a href="#">服务</a></li> 
   <li><a href="#">案例</a></li> 
   <li><a href="#">文章</a></a> 
        <ul> 
           <li><a href="#" target="_blank">XHTML/CSS</a></li> 
           <li><a href="#">Javascript/Ajax/jQuery</a> 
                <ul> 
                    <li><a href="#">Cookies</a></li> 
                    <li><a href="#">Event</a></li> 
                    <li><a href="#">Games</a></li> 
                    <li><a href="#">Images</a></li> 
                </ul> 
            </li> 
            <li><a href="#" target="_blank">PHP/MYSQL</a></li> 
            <li><a href="#" target="_blank">前端观察</a></li> 
            <li><a href="#" target="_blank">HTML5/移动WEB应用</a></li> 
        </ul> 
    </li> 
    <li><a href="#">关于</a></li> 
</ul> 

CSS
当然,我们要为这个无序列表加上样式,让它非常简洁的呈现在屏幕上。

ul {
list-style: none
}
.nav {
width: 213px;
padding: 40px 28px 25px 0;
font-family: "Microsoft yahei", Arial, Helvetica, sans-serif;
}
ul.nav {
padding: 0;
margin: 0;
font-size: 1em;
line-height: 0.5em;
list-style: none;
}
ul.nav li {
}
ul.nav ul {
margin: 0;
padding: 0;
display: none;
}
ul.nav ul li {
margin: 0;
padding: 0;
clear: both;
}
/*第一级*/
ul.nav li a {
line-height: 10px;
font-size: 14px;
padding: 10px 5px;
color: #000;
display: block;
text-decoration: none;
font-weight: bolder;
}
ul.nav li a:hover {
background-color: #675C7C;
color: white;
}
/*第二级*/
ul.nav ul li a {
padding-left: 20px;
font-size: 12px;
font-weight: normal;
}
ul.nav ul li a:hover {
background-color: #D3C99C;
color: #675C7C;
}
/*第三级*/
ul.nav ul ul li a {
color: silver;
padding-left: 40px;
}
ul.nav ul ul li a:hover {
background-color: #D3CEB8;
color: #675C7C;
}
ul.nav span {
float: right;
}

jQuery
调用accordion插件,设置相关属性,一个漂亮的手风琴效果就完成了。

$(function(){ 
   $(".nav").accordion({ 
        speed: 500, 
        closedSign: '[+]', 
        openedSign: '[-]' 
    }); 
}); 

可以看出,区分多级,其实是靠css的背景等信息来区分的。

Accordion提供以下选项设置:
speed:数字毫秒,设置菜单展开和关闭的时间。
closedSign:当下级菜单关闭时,显示于菜单旁边的内容,可以是任意html或者text。
openedSign:当下级菜单展开时,显示于菜单旁边的内容,可以是任意html或者text。
注意,如果你想菜单初始载入时就展开的话,可以在对应要展开的li上加class="active"。
声明:本文为原创文章,helloweba.com和作者拥有版权,如需转载,请注明来源于helloweba.com并保留原文链接,否则视为侵权。
分享到:
评论

相关推荐

    jQuery树型多级手风琴菜单代码

    **jQuery树型多级手风琴菜单代码详解** 在网页设计和开发中,为了提高用户体验和界面的可操作性,常常会使用到各种交互效果,其中树型多级手风琴菜单是一种常见的导航元素。本篇文章将深入解析一款基于jQuery实现的...

    jQuery实现多级手风琴树形下拉菜单multi_menu.rar

    在实现多级手风琴菜单时,主要涉及以下几个核心知识点: 1. **DOM操作**:jQuery提供了一系列方法来操作HTML元素,如`$(selector)`用于选择元素,`$(element).hide()`和`$(element).show()`用于隐藏和显示元素,`$...

    兼容主流浏览器的jQuery多级手风琴菜单

    在网页设计中,jQuery...要创建一个兼容主流浏览器的jQuery多级手风琴菜单,我们首先需要引入jQuery库。你可以通过CDN链接或者将jQuery库文件下载到本地项目中引用。例如,可以使用以下HTML代码引入jQuery: ```html ...

    jquery竖直手风琴菜单收缩展示下拉菜单

    在网页设计中,jQuery竖直手风琴菜单是一种常见的交互元素,它允许用户通过点击菜单项来展开或收缩子菜单,以节省空间并提供良好的用户体验。这种效果在内容丰富的网站中特别受欢迎,因为它使得导航更加直观和高效。...

    jQuery树型多级手风琴菜单代码.zip

    本篇文章将详细介绍如何使用jQuery实现这种多级手风琴菜单,并解析提供的代码资源。 **1. jQuery基础** jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。通过使用...

    jQuery多级目录手风琴菜单

    《jQuery多级目录手风琴菜单详解》 在网页设计中,为了呈现层次分明、易于浏览的导航结构,多级目录手风琴菜单是一种常见且实用的解决方案。jQuery库以其简洁高效的特点,成为了实现此类功能的首选工具。本文将深入...

    简单的多级垂直手风琴下拉列表菜单

    在多级手风琴菜单中,jQuery可以用于监听用户的点击事件,触发相应的子菜单展开或收起,以及处理其他动态交互功能。例如,使用`.click()`函数来绑定点击事件,使用`.slideToggle()`方法实现平滑的展开和关闭效果。 ...

    jQuery左侧手风琴菜单代码.zip

    6. **遍历和数据操作(Traversal and Data Operations)**:在处理多级手风琴菜单时,可能需要遍历DOM树并操作数据,例如关闭所有其他打开的面板,只保留当前被点击的面板展开。 在实际应用中,你可以根据需要...

    基于jQuery实现垂直手风琴菜单列表特效源码.zip

    【jQuery实现垂直手风琴菜单列表特效】 在网页设计中,手风琴菜单是一种常见的交互元素,它通过折叠和展开的方式展示子菜单项,既节省空间又方便用户浏览。本项目是基于JavaScript库jQuery实现的一个垂直手风琴菜单...

    jQuery多级下拉垂直手风琴代码.zip

    "jQuery多级下拉垂直手风琴代码"就是一个典型的示例,它利用jQuery的功能来创建一种特殊的导航菜单,即多级下拉垂直手风琴效果。这种效果使得用户能够在一个有限的空间内浏览层次分明的大量信息,提高用户体验。 ...

    jQuery手风琴菜单

    以下是一个简单的jQuery手风琴菜单实现示例: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;jQuery手风琴菜单 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; .accordion { width: 200px; } ...

    Jquery 垂直多级手风琴菜单附源码下载

    该多级手风琴菜单完全使用CSS来制作,它通过将不同的子菜单进行分组,制作出多级菜单的效果。 该多级手风琴菜单通过在checkbox元素上使用:checked伪元素来制作。如果需要一些好看的动画效果,可以实用插件中提供的...

    jQuery飘带式垂直手风琴下拉菜单

    也分享过几款手风琴下拉菜单,可以在手风琴菜单栏目下查看。今天要分享的是一款飘带样式的垂直手风琴下拉菜单,恰好是两者的结合,效果非常不错。 下面我们一起来看看如何实现这款漂亮的jQuery飘带式手风琴下拉...

    jQuery垂直手风琴多级下拉菜单代码

    在垂直手风琴菜单中,jQuery负责监听用户的交互事件,如点击菜单项,然后触发相应的响应,如展开或收起子菜单。 手风琴效果是指菜单项被点击时,其相邻的子菜单会以折叠或展开的方式动态显示。在多级下拉菜单中,...

    jQuery实现树型多级折叠手风琴菜单特效源码.zip

    本资源"jQuery实现树型多级折叠手风琴菜单特效源码.zip"提供了使用jQuery创建树型多级折叠菜单的示例代码,这种菜单常用于网站导航,尤其在需要展示层次结构丰富内容时非常实用。 首先,让我们深入理解jQuery树型...

    jQuery手风琴菜单.rar

    在这个“jQuery手风琴菜单.rar”压缩包中,包含了一个实现这一功能的jQuery插件或者代码示例。 在网页设计中,手风琴菜单通常由一系列可折叠的面板组成,每个面板都有一个标题,点击标题时,对应的面板内容会展开或...

    jQuery苹果风格手风琴菜单demo

    在本项目中,jQuery被用来实现手风琴菜单的动态效果,如滑动展开和收缩。 **前端开发**是构建网页或Web应用的主要环节,主要关注用户与网站之间的交互。jQuery苹果风格的手风琴菜单是前端开发中的一个重要实践,它...

    jQuery实现3D手风琴垂直多级菜单特效源码 可筛选菜单项.zip

    在本资源中,我们主要探讨的是使用jQuery库来创建一个具有3D效果的垂直多级手风琴菜单,且该菜单允许用户筛选特定的菜单项。这个特效源码可以帮助开发者在网页设计中添加互动性和视觉吸引力,使得用户界面更加直观...

Global site tag (gtag.js) - Google Analytics