acco

In this example below you will see how to do a acco with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by JunkiSuzuki, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright JunkiSuzuki ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>acco</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="accordion_menu_wrapper">

    <label for="accordion_menu01">並び替え/絞り込み    
      <span ></span>
      <span ></span>
  </label>
    <input type="checkbox" id="accordion_menu01" class="accordion"/>
    <ul id="menu01">
      <li>新着順</li>
      <li>商品名昇順</li>
      <li>商品名降順</li>
    </ul>
</div> <!-- drawer_menu_wrapper -->
<!-- アコーディオン /-->
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/JunkiSuzuki/acco-PmPzEq */
.accordion_menu_wrapper {
    dispray: none;
    background-color: #555; 
    box-sizing: border-box;
    height: 100%;
    position: fixed;
    right: 0%; 
    top: 0;
    margin:0 auto;
    transition: transform 0.3s linear 0s; 
    width: 100%; 
    z-index: -1;
}

.accordion_menu_wrapper label {
    display: block;
    margin: 0 0 2px 0;
    padding :12px;
    line-height: 1;
    color :#fff;
    background :#fcb8b8;

}

.accordion_menu_wrapper ul {
    margin: 0;
    padding: 0;
    background :#f4f4f4;
    list-style: none;
}

.accordion_menu_wrapper li {
    max-height: 0;
    overflow-y: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

#accordion_menu01:checked ~ #menu01 li{
    max-height: 46px;
    opacity: 1;
}

.accordion_menu_wrapper span:nth-child(1){
  height:21px;
  width:21px;
  border-radius:50px;
  -webkit-border-radius:50px;
  -moz-border-radius:50px;  
  background:#e51616;  
  cursor:pointer;
  position: fixed;
  top:7px;
  left:89.83%;
  transition: transform 0.3s linear 0s;

}

.accordion_menu_wrapper span:nth-child(2):before, .accordion_menu_wrapper span:nth-child(2):after{
  content:''; 
  height:2px;
  width:17px; 
  display:block; 
  background:#fff; 
  border-radius:10px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  cursor:pointer;
  position:absolute; 
  top:17px;
  transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  left:90%;
}

.accordion_menu_wrapper span:nth-child(2):after{
  transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
}

Comments