Scribd
Upload
10 views

CSS Menu burger

The document contains CSS styles for a responsive header with a burger menu. It includes styles for the header, menu items, and interactions such as hover effects and transitions. Additionally, it provides HTML code for the header structure, including a logo and navigation links.

Uploaded by

ama Ndongo
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views

CSS Menu burger

The document contains CSS styles for a responsive header with a burger menu. It includes styles for the header, menu items, and interactions such as hover effects and transitions. Additionally, it provides HTML code for the header structure, including a logo and navigation links.

Uploaded by

ama Ndongo
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

body {

margin: 0;

font-family: Helvetica, sans-serif;

background-color: #f4f4f4;

a{

color: #000;

/* header */

.header {

background-color: #fff;

box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);

position: fixed;

width: 100%;

z-index: 3;

.header ul {

margin: 0;

padding: 0;

list-style: none;

overflow: hidden;

background-color: #fff;

.header li a {

display: block;

padding: 20px 20px;


border-right: 1px solid #f4f4f4;

text-decoration: none;

.header li a:hover,

.header .menu-btn:hover {

background-color: #f4f4f4;

.header .logo {

display: block;

float: left;

font-size: 2em;

padding: 10px 20px;

text-decoration: none;

/* menu */

.header .menu {

clear: both;

max-height: 0;

transition: max-height .2s ease-out;

/* menu icon */

.header .menu-icon {

cursor: pointer;

display: inline-block;

float: right;
padding: 28px 20px;

position: relative;

user-select: none;

.header .menu-icon .navicon {

background: #333;

display: block;

height: 2px;

position: relative;

transition: background .2s ease-out;

width: 18px;

.header .menu-icon .navicon:before,

.header .menu-icon .navicon:after {

background: #333;

content: '';

display: block;

height: 100%;

position: absolute;

transition: all .2s ease-out;

width: 100%;

.header .menu-icon .navicon:before {

top: 5px;

.header .menu-icon .navicon:after {

top: -5px;
}

/* menu btn */

.header .menu-btn {

display: none;

.header .menu-btn:checked ~ .menu {

max-height: 240px;

.header .menu-btn:checked ~ .menu-icon .navicon {

background: transparent;

.header .menu-btn:checked ~ .menu-icon .navicon:before {

transform: rotate(-45deg);

.header .menu-btn:checked ~ .menu-icon .navicon:after {

transform: rotate(45deg);

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {

top: 0;

/* 48em = 768px */
@media (min-width: 48em) {

.header li {

float: left;

.header li a {

padding: 20px 30px;

.header .menu {

clear: none;

float: right;

max-height: none;

.header .menu-icon {

display: none;

Code htm pour menu burger

<header class="header">
<a href="" class="logo">CSS Nav</a>
<input class="menu-btn" type="checkbox"
id="menu-btn" />
<label class="menu-icon" for="menu-
btn"><span
class="navicon"></span></label>
<ul class="menu">
<li><a href="#work">Our Work</a></li>
<li><a href="#about">About</a></li>
<li><a href="#careers">Careers</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>

You might also like