Scribd
Upload
260 views7 pages

Hamburger Menu

The document contains CSS code for styling a hamburger menu on a website. It includes CSS for grid layout, menu styling, and animation of the hamburger trigger and dropdown menu. Styles are defined for the container, menu block, navigation links, hamburger trigger icon, and dropdown behavior.

Uploaded by

ashishsaks
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
260 views7 pages

Hamburger Menu

The document contains CSS code for styling a hamburger menu on a website. It includes CSS for grid layout, menu styling, and animation of the hamburger trigger and dropdown menu. Styles are defined for the container, menu block, navigation links, hamburger trigger icon, and dropdown behavior.

Uploaded by

ashishsaks
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

CODE FOR HAMBURGER MENU

<link rel="stylesheet" href="css/style.css">

<div class="container_12">
<div class="grid_12">
<center><font size="8"><a href="index.html"><img src="images/logo.jpg" alt=""
height="80" width="400" ></a></font></center>
<p></p>
<div class="menu_block">
<nav id="bt-menu" class="bt-menu">
<a href="#" class="bt-menu-trigger"><span>Menu</span></a>
<ul>
<li class="current bt-icon"><a href="index.html">Home</a></li>
<li class="bt-icon"><a href="index-1.html">About</a></li>
<li class="bt-icon"><a href="index-2.html">Services</a></li>
<li class="bt-icon"><a href="index-3.html">Clients</a></li>
<li class="bt-icon"><a href="index-4.html">Blog</a></li>
<li class="bt-icon"><a href="index-5.html">Contacts</a></li>
</ul>
</nav>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>

stylesheet

@import "../css/grid.css";
@import "../css/menu.css";

gird.css
.container_12 {
margin-left: auto;
margin-right: auto;
width: 960px;
}

.grid_12 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.container_12 .grid_12 {
width: 940px;
}
.container_12:before,
.container_12:after {
content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}

menu.css
.menu_block {
height: 31px;
position: relative;
overflow: hidden;
margin-bottom: 43px;
}
.page1 .menu_block {
margin-bottom: 46px;
}
nav.bt-menu ul li {
font: bold 18px/26px 'Open Sans', sans-serif;
color: #848282;
}
nav.bt-menu ul li:first-child+li+li {
margin-right: 120px;
}
.bt-overlay {
display: none;
}
nav.bt-menu ul li a:hover, nav ul li.current {
color: #242424;
}
.container {
padding: 80px;
}
.bt-menu {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 0;
border-width: 0px;
border-style: solid;
border-color: #333;
background-color: rgba(0,0,0,0);
-webkit-backface-visibility: hidden;
-webkit-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
}
.bt-menu.bt-menu-open {
height: 100%;

-webkit-transition: border-width 0.3s, background-color 0.3s;


transition: border-width 0.3s, background-color 0.3s;
}
.bt-overlay {
position: absolute;
width: 100%;
}
.bt-menu-open .bt-overlay {
height: 100%;
}
.bt-menu-trigger {
position: absolute;
top: 0;
left: 50%;
z-index: 100;
display: block;
margin-left: -27px;
width: 54px;
height: 31px;
cursor: pointer;
}
.bt-menu-trigger span {
position: absolute;
top: 50%;
left: 0;
display: block;
width: 100%;
height: 4px;
margin-top: -2px;
background-color: #585858;
font-size: 0px;
transition: 0.5s ease;
-o-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.bt-menu-open .bt-menu-trigger span {
height: 7px;
margin-top: -4px;
}

.bt-menu-trigger span:before,
.bt-menu-trigger span:after {
position: absolute;
left: 0;
width: 100%;
height: 100%;
background: #585858;
content: '';
transition: 0.5s ease;
-o-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}
.bt-menu-trigger span:before {
-webkit-transform: translateY(-175%);
transform: translateY(-175%);
}
.bt-menu-trigger span:after {
-webkit-transform: translateY(175%);
transform: translateY(175%);
}
.bt-menu-open .bt-menu-trigger span:before,
.bt-menu-open .bt-menu-trigger span:after {
}
.bt-menu.bt-menu-open ul li:first-child,
.bt-menu.bt-menu-open ul li:last-child {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.bt-menu.bt-menu-open ul li:nth-child(2),
.bt-menu.bt-menu-open ul li:nth-last-child(2) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.bt-menu.bt-menu-open ul li:nth-child(3),
.bt-menu.bt-menu-open ul li:nth-last-child(3) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.bt-menu-open .bt-menu-trigger span:before {
-webkit-transform: translateY(-175%);

transform: translateY(-175%);
height: 7px;
}
.bt-menu-open .bt-menu-trigger span:after {
-webkit-transform: translateY(175%);
transform: translateY(175%);
height: 7px;
}
.bt-menu ul {
position: absolute;
bottom: 0px;
left: 0;
margin: 0;
padding: 0;
width: 100%;
list-style: none;
text-align: center;
white-space: nowrap;
height: 0;
-webkit-transition: height 0s 0.3s;
transition: height 0s 0.3s;
}
.bt-menu.bt-menu-open ul {
height: 31px;
-webkit-transition: none;
transition: none;
}
.bt-menu ul li,
.bt-menu ul li a {
text-align: center;
}
.bt-menu ul li {
display: inline-block;
margin: 0 26px;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.bt-menu.bt-menu-open ul li {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

}
.bt-menu ul li a {
display: block;
outline: none;
text-decoration: none;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.bt-menu ul li a:before {
display: none;
}

You might also like