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实现垂直手风琴菜单

2、CSS部分

猜你喜欢