Skip to content

Instantly share code, notes, and snippets.

@AlexKardone

AlexKardone/menu-gamburger.css

Last active January 26, 2018 19:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save AlexKardone/6362cccf2431c0dc45820ca196cce28e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save AlexKardone/6362cccf2431c0dc45820ca196cce28e to your computer and use it in GitHub Desktop.
Download ZIP
Menu-gamburger for web-site
Raw
menu-gamburger.css
.menu-icon {
position: absolute;
right: 0;
text-align: center;
width: 70px;
height: 70px;
border-left: 1px solid #c8c8c8;
}
.menu-icon span {
display: inline-block;
margin: 50% 0;
width: 16px;
height: 3px;
background: #ff431e;
}
.menu-icon span::before,
.menu-icon span::after {
content: "";
display: block;
width: 100%;
}
.menu-icon span::before {
width: 16px;
height: 3px;
background: #ff431e;
transform: translate(0, -6px);
}
.menu-icon span::after {
width: 16px;
height: 3px;
background: #ff431e;
transform: translate(0, 3px);
}
Raw
menu-gamburger.html
<div class="menu-icon">
<span></span>
</div>
@AlexKardone
Copy link
Author

AlexKardone commented Jan 26, 2018

Это самое простое меню-гамбургер. без анимации.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment