jquery实现垂直手风琴菜单


Posted in jQuery onMarch 04, 2020

本文实例为大家分享了jquery实现垂直手风琴菜单的具体代码,供大家参考,具体内容如下

1、HTML部分

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>垂直手风琴菜单</title>
 <link rel="stylesheet" type="text/css" href="css/style.css" >
</head>
<body>
 <ul class="container">
 <li><img src="images/user.png" class="icon">
 <span>Account</span>
 </li>
 <ul class="submenu">
 <div class="expand-triangle"></div>
 <li><span>Basic</span></li>
 <li><span>Picture</span></li>
 <li><span>Go Premium</span></li>
 </ul>
 
 <li><img src="images/envelope.png" class="icon">
 <span>Messages</span>
 </li>
 <ul class="submenu">
 <div class="expand-triangle"></div>
 <li><span>New</span></li>
 <li><span>Sent</span></li>
 <li><span>Trash</span></li>
 </ul>
 <li><img src="images/cog.png" class="icon">
 <span>Settings</span>
 </li>
 <ul class="submenu">
 <div class="expand-triangle"></div>
 <li><span>Language</span></li>
 <li><span>Password</span></li>
 <li><span>Payments</span></li>
 </ul>
 </ul>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

2、CSS部分​

body{
 padding:0;
 margin:0;
}
ul{
 list-style:none;
 width:276px;
}
li{
 cursor:pointer;
}
.container{
 margin:100px auto;
 font-size:16px;
 position:relative;
 padding:0;
}
.container >li{
 background-color: #e4644b;
 border-top: 1px solid #d05942;
 padding:0 0 0 40px;
 height:48px;
 color:#f7f1e3;
 box-sizing: border-box;
 position: relative;
}
.container > li:first-child {
 border-radius: 7px 7px 0 0;
 border-top: 0;
}
.container > li:last-child {
 border-radius:0 0 7px 7px;
}
.container >li .icon{
 width:20px;
 height:20px;
 float:left;
 left:10px;
 top:15px;
 position:absolute;
 display:block;
}
.container >li span{
 line-height:48px;
 display:block;
}
.submenu{
 display:block;
 box-sizing: border-box;
 color: #ae9f9f;
 font-size: 13px;
 content: " ";
}
.expand-triangle{
 background: url(../images/expand.gif) top left no-repeat;
 height: 10px;
 width: 276px;
 content: " ";
 margin-left: -40px;
}
.submenu li {
 line-height: 20px;
 height: 35px;
 padding-top: 11px;
 margin-left: -40px;
 background-color: #484141;
 border-left: solid 6px #484141;
 transition: border-left 220ms ease-in;
}
.submenu li span {
 margin-left: 30px;
}
.submenu .chosen,
.submenu .chosen:hover {
 border-left: solid 6px #96d145;
}
.submenu li:hover {
 border-left: solid 6px #d05942;
}​

3、JS部分

$(document).ready( function() {
 var $submenu = $('.submenu');
 var $mainmenu = $('.container');
 $submenu.hide();
 $submenu.first().delay(400).slideDown(700);
 $submenu.on('click','li', function() {
 $submenu.siblings().find('li').removeClass('chosen');
 $(this).addClass('chosen');
 });
 $mainmenu.on('click', 'li', function() {
 $(this).next('.submenu').slideToggle().siblings('.submenu').slideUp();
 });
});

4、效果图

jquery实现垂直手风琴菜单

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
jquery拖动改变div大小
Jul 04 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
jQuery实现评论模块
Aug 19 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 #jQuery
jquery实现直播视频弹幕效果
Feb 25 #jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 #jQuery
jquery实现的放大镜效果示例
Feb 24 #jQuery
jquery向后台提交数组的代码分析
Feb 20 #jQuery
jquery实现垂直手风琴导航栏
Feb 18 #jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 #jQuery
You might like
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
php修改上传图片尺寸的方法
2015/04/14 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
php精度计算的问题解析
2019/06/21 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
PHP时间类完整代码实例
2021/02/26 PHP
Javascript之文件操作
2007/03/07 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
简单学习vue指令directive
2016/11/03 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
动态创建类实例代码
2009/10/07 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
python利用正则表达式提取字符串
2016/12/08 Python
Django数据库操作的实例(增删改查)
2017/09/04 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
Django设置Postgresql的操作
2020/05/14 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
python Selenium 库的使用技巧
2020/10/16 Python
中专生求职自荐信范文
2013/12/22 职场文书
见习期自我鉴定
2014/01/31 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
党员示范岗材料
2014/12/19 职场文书
学生检讨书
2015/01/27 职场文书
费用申请报告范文
2015/05/15 职场文书