Skip to content

Instantly share code, notes, and snippets.

@RuanAragao

RuanAragao/menu.html

Last active August 29, 2015 14:16
Show Gist options
  • Save RuanAragao/57c07b6e626a5bd3e6b5 to your computer and use it in GitHub Desktop.
Save RuanAragao/57c07b6e626a5bd3e6b5 to your computer and use it in GitHub Desktop.
Download ZIP
Botão para menu collapse X utilizando HTML e CSS - Demo: http://jsbin.com/nurejo/2
Raw
menu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Button menu css</title>
</head>
<body>
<header>
<h1>Botão para menu collapse X utilizando HTML e CSS</h1>
<hr>
<a class="btn-nav">
<div class="icon-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
</a>
</header>
</body>
</html>
Raw
style.css
.btn-nav {
width: 40px;
height: 40px;
display: block;
cursor: pointer;
}
.icon-menu {
width: 40px;
height: 40px;
padding: 10px;
display: block;
position: relative;
background: #333;
}
.icon-menu >
.icon-bar {
width: 100%;
height: 6px;
display: block;
position: relative;
float: left;
background: white;
}
.icon-menu >
.icon-bar:first-child {
top: 4px;
}
.icon-menu >
.icon-bar:nth-child(2) {
top: 12px;
}
.icon-menu >
.icon-bar:last-child {
top: 20px;
}
.icon-bar {
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
}
.btn-nav:hover .icon-bar:first-child {
top: 0px;
}
.btn-nav:hover .icon-bar:last-child {
top: 24px;
}
.btn-nav:active .icon-bar:first-child {
top: 18px;
transform: rotate(45deg);
}
.btn-nav:active .icon-bar:nth-child(2) {
display: none;
}
.btn-nav:active .icon-bar:last-child {
top: 12px;
transform: rotate(-45deg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment