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实现瀑布流页面
Apr 11 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery中库的引用方法
Jan 06 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
html中两种获取标签内的值的方法
Jun 16 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
Codeigniter的dom类用法实例
2015/06/26 PHP
Symfony的安装和配置方法
2016/03/17 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
Python计算回文数的方法
2015/03/11 Python
python中星号变量的几种特殊用法
2016/09/07 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
警校毕业生自我评价
2014/04/06 职场文书
爱情寄语大全
2014/04/09 职场文书
2014年图书室工作总结
2014/12/09 职场文书
人力资源部岗位职责
2015/02/11 职场文书
整改通知书格式
2015/04/22 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
九年级英语教学反思
2016/02/15 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
vue elementUI表格控制对应列
2022/04/13 Vue.js