<a href="" class="menu-toggle">
<span></span>
</a>
.menu-toggle {
display: block;
padding: 0 20px;
span {
height: 4px;
display: block;
width: 30px;
background-color: #504d5f;
position: relative;
margin: 30px 0;
transition: background-color 0.2s ease-in;
&:before,
&:after {
content: '';
position: absolute;
display: block;
width: 30px;
height: 4px;
background-color: #504d5f;
left: 0;
right: 0;
transition: transform 0.2s ease-in;
}
&:before {
top: -10px;
}
&:after {
bottom: -10px;
}
}
&--opened {
span {
background-color: transparent;
&:before {
transform-origin: 0 0;
transform: rotate(45deg);
}
&:after {
transform-origin: 0 100%;
transform: rotate(-45deg);
}
}
}
}
$(function(){
$('.menu-toggle').on('click', function(event){
event.preventDefault();
$(this).toggleClass('menu-toggle--opened');
});
});
menu-toggle animates to X (html,css,jquery)
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.