├── Hamburger Menu
├── images
│ └── logo.png
├── index.html
└── style.css
└── README.md
/Hamburger Menu/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/m-mourouh/Hamburger-Menu-With-HTML-and-CSS/071768e0154521f72a86df62bd28c439217973e7/Hamburger Menu/images/logo.png
--------------------------------------------------------------------------------
/Hamburger Menu/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Hamburger Menu
8 |
9 |
10 |
11 |
28 |
29 |
--------------------------------------------------------------------------------
/Hamburger Menu/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | box-sizing: border-box;
3 | margin: 0;
4 | padding: 0;
5 | }
6 | body {
7 | font-family: "Poppins", sans-serif;
8 | --color1: #FFF ;
9 | --color2: #181818 ;
10 | }
11 | .nav-bar {
12 | width: 100%;
13 | display: flex;
14 | justify-content: space-between;
15 | align-items: center;
16 | list-style: none;
17 | position: relative;
18 | background-color: var(--color2);
19 | padding: 12px 20px;
20 | }
21 | .logo img {width: 40px;}
22 | .menu {display: flex;}
23 | .menu li {padding-left: 30px;}
24 | .menu li a {
25 | display: inline-block;
26 | text-decoration: none;
27 | color: var(--color1);
28 | text-align: center;
29 | transition: 0.15s ease-in-out;
30 | position: relative;
31 | text-transform: uppercase;
32 | }
33 | .menu li a::after {
34 | content: "";
35 | position: absolute;
36 | bottom: 0;
37 | left: 0;
38 | width: 0;
39 | height: 1px;
40 | background-color: var(--color1);
41 | transition: 0.15s ease-in-out;
42 | }
43 | .menu li a:hover:after {width: 100%;}
44 | .open-menu , .close-menu {
45 | position: absolute;
46 | color: var(--color1);
47 | cursor: pointer;
48 | font-size: 1.5rem;
49 | display: none;
50 | }
51 | .open-menu {
52 | top: 50%;
53 | right: 20px;
54 | transform: translateY(-50%);
55 | }
56 | .close-menu {
57 | top: 20px;
58 | right: 20px;
59 | }
60 | #check {display: none;}
61 | @media(max-width: 610px){
62 | .menu {
63 | flex-direction: column;
64 | align-items: center;
65 | justify-content: center;
66 | width: 80%;
67 | height: 100vh;
68 | position: fixed;
69 | top: 0;
70 | right: -100%;
71 | z-index: 100;
72 | background-color: var(--color2);
73 | transition: all 0.2s ease-in-out;
74 | }
75 | .menu li {margin-top: 40px;}
76 | .menu li a {padding: 10px;}
77 | .open-menu , .close-menu {display: block;}
78 | #check:checked ~ .menu {right: 0;}
79 | }
80 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
--------------------------------------------------------------------------------