溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jquery實(shí)現(xiàn)垂直手風(fēng)琴菜單

發(fā)布時(shí)間：2020-09-09 20:48:53 來(lái)源：腳本之家 閱讀：224 作者：MySunshine07 欄目：web開(kāi)發(fā)

本文實(shí)例為大家分享了jquery實(shí)現(xiàn)垂直手風(fēng)琴菜單的具體代碼，供大家參考，具體內(nèi)容如下

1、HTML部分

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>垂直手風(fēng)琴菜單</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實(shí)現(xiàn)垂直手風(fēng)琴菜單

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手