Skip to content

Instantly share code, notes, and snippets.

@seriiserii825
Last active August 31, 2019 11:26
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 seriiserii825/9a8f4f6e3333a96b4396e71ae538c17d to your computer and use it in GitHub Desktop.
Save seriiserii825/9a8f4f6e3333a96b4396e71ae538c17d to your computer and use it in GitHub Desktop.
<div class="sandwitch">
<div class="sandwitch__line sandwitch__line--top"></div>
<div class="sandwitch__line sandwitch__line--middle"></div>
<div class="sandwitch__line sandwitch__line--bottom"></div>
</div>
.sandwitch
.sandwitch__line.sandwitch__line--top
.sandwitch__line.sandwitch__line--middle
.sandwitch__line.sandwitch__line--bottom
let sandwitch = function () {
$('.sandwitch').on('click', function () {
$('.top-menu nav > ul').slideToggle();
$(this).toggleClass('sandwitch--active');
});
};
sandwitch();
.sandwitch {
position: relative;
width: 23px;
height: 14px;
cursor: pointer;
}
.sandwitch--active .sandwitch__line--top {
top: 6px;
transform: rotate(45deg);
}
.sandwitch--active .sandwitch__line--middle {
opacity: 0;
}
.sandwitch--active .sandwitch__line--bottom {
top: 6px;
transform: rotate(-45deg);
}
.sandwitch__line {
position: absolute;
left: 0;
display: block;
width: 100%;
height: 2px;
transition: all linear 0.1s;
background-color: #fff;
}
.sandwitch__line--top {
top: 0;
}
.sandwitch__line--middle {
top: 6px;
}
.sandwitch__line--bottom {
top: 12px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment