Skip to content

Instantly share code, notes, and snippets.

@Jenya476

Jenya476/mnu_btn

Last active February 20, 2017 08:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Jenya476/3965a9917a22396ce95f28a455571bb5 to your computer and use it in GitHub Desktop.
Save Jenya476/3965a9917a22396ce95f28a455571bb5 to your computer and use it in GitHub Desktop.
Download ZIP
Кнопка меню с анимацией при нажатии
Raw
mnu_btn
//html
<body>
<div class="wrapper">
<div class="top bar"></div>
<div class="middle bar"></div>
<div class="bottom bar"></div>
</div>
</body>
//css
.wrapper {
width:20px;
height:20px;
margin: 0 auto;
margin-top: 10%;
position: relative;
}
.wrapper.active .middle {
width:10px;
height:10px;
top:23%;
left:42%;
border-radius: 50%;
background-color:white;
opacity:0.3;
}
.wrapper.active .top {
-webkit-transform:rotate(45deg);
top:40%;border-radius:10px;background-color:white;
}
.wrapper.active .bottom{
-webkit-transform:rotate(-45deg);
top:40%;border-radius:10px;background-color:white;
}
.bar {
width:20px;
height:2px;
border:1px solid white;
position: absolute;
border-radius:5px;
}
.top {
left:15%;
top:10%;
-webkit-transition:all 0.5s;
}
.middle {
left:15%;
top:40%;
-webkit-transition:all 0.5s;
}
.bottom {
left:15%;
top:70%;
-webkit-transition:all 0.5s;
}
//sass
body
background: -webkit-radial-gradient(#39CCCC, #7FDBFF)
background: radial-gradient(#39CCCC, #7FDBFF)
.wrapper
width: 20px
height: 20px
margin: 0 auto
margin-top: 10%
position: relative
&.active
.middle
width: 10px
height: 10px
top: 23%
left: 42%
border-radius: 50%
background-color: white
opacity: 0.3
.top
-webkit-transform: rotate(45deg)
top: 40%
border-radius: 10px
background-color: white
.bottom
-webkit-transform: rotate(-45deg)
top: 40%
border-radius: 10px
background-color: white
.bar
width: 20px
height: 2px
border: 1px solid white
position: absolute
border-radius: 5px
.top
left: 15%
top: 10%
-webkit-transition: all 0.5s
.middle
left: 15%
top: 40%
-webkit-transition: all 0.5s
.bottom
left: 15%
top: 70%
-webkit-transition: all 0.5s
//js
var mnuBtn = $('.wrapper');
mnuBtn.click(function() {
$(this).toggleClass('active');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment