好资源导航 » 文章资讯 » jquery实现垂直手风琴菜单

jquery实现垂直手风琴菜单

2023-07-29 19:56:05 63

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

1、HTML部分





垂直手风琴菜单





Account

Basic

Picture

GoPremium

Messages

New

Sent

Trash

Settings

Language

Password

Payments

2、CSS部分

body{
padding:0;
margin:0;
}
ul{
list-style:none;
width:276px;
}
li{
cursor:pointer;
}
.container{
margin:100pxauto;
font-size:16px;
position:relative;
padding:0;
}
.container>li{
background-color:#e4644b;
border-top:1pxsolid#d05942;
padding:00040px;
height:48px;
color:#f7f1e3;
box-sizing:border-box;
position:relative;
}
.container>li:first-child{
border-radius:7px7px00;
border-top:0;
}
.container>li:last-child{
border-radius:007px7px;
}
.container>li.icon{
width:20px;
height:20px;
float:left;
left:10px;
top:15px;
position:absolute;
display:block;
}
.container>lispan{
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)topleftno-repeat;
height:10px;
width:276px;
content:"";
margin-left:-40px;
}
.submenuli{
line-height:20px;
height:35px;
padding-top:11px;
margin-left:-40px;
background-color:#484141;
border-left:solid6px#484141;
transition:border-left220msease-in;
}
.submenulispan{
margin-left:30px;
}
.submenu.chosen,
.submenu.chosen:hover{
border-left:solid6px#96d145;
}
.submenuli:hover{
border-left:solid6px#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、效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

jquery实现垂直手风琴菜单

热门推荐

随机推荐