Scribd
Upload
16 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
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
16 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
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/ 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