In this Tutorial I will create a Responsive Navigation Menu using CSS only and No JavaScript in order to create a drop down menu.
First I will create a nav tag then an a tag for out logo then a input tag and a label tag which will communicate with one a nother.
The menu will consist as usual of an ul tag with a class of menu and fore list items with a tags.
The main attraction here is the pseudo class :checked which will help us toggle on and off the menu.
In order to create the Hamburger menu and the x I will use the pseudo elements ::before and after.
Img:
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Responsive Navigation Menu</title>
</head>
<body>
<nav class="nav">
<a href="#" class="logo">Menyhart <span>Media</span></a>
<input id="menu_btn" class="menu_btn" type="checkbox" />
<label for="menu_btn" class="menu-icon"
><span class="nav-icon"></span
></label>
<ul class="menu">
<li><a href="#" class="active">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">services</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
<section>
<h1><span>Responsive Navigation</span><span>No JavaScript</span></h1>
</section>
</body>
</html>
CSS:
*,
::before,
::after {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
body {
font-size: 16px;
font-family: sans-serif;
}
section {
position: relative;
background-image: url(/img/blur-cars-city-commuting-409701.jpg);
background-position: center;
background-size: cover;
height: 95vh;
top: 5vh;
width: 100%;
}
section h1 {
color: #fff;
position: relative;
height: 100%;
margin: auto;
text-align: center;
font-size: 10rem;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
letter-spacing: 5px;
text-shadow: 2px 2px 10px #111;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.nav {
background-color: rgb(15, 60, 95);
box-shadow: 0 0 15px 5px;
position: fixed;
height: 70px;
top: 0;
width: 100%;
z-index: 2;
}
.nav ul {
overflow: hidden;
background-color: rgb(15, 60, 95);
}
.nav ul a {
display: block;
padding: 2rem;
border-right: 2px solid #111111;
color: #fff;
font-weight: 700;
font-size: 1.3rem;
text-transform: uppercase;
}
.nav .logo {
float: left;
display: block;
font-size: 2.2rem;
padding-left: 1rem;
color: goldenrod;
font-weight: 700;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
text-shadow: 5px 5px 10px #111;
}
.nav .logo span {
color: #fff;
text-transform: uppercase;
font-size: 1.5rem;
letter-spacing: 2px;
}
.nav ul a:hover {
background-color: #fff;
color: rgb(15, 60, 95);
transition: 0.2s ease-in;
}
.nav .menu {
clear: both;
max-height: 0;
transition: max-height 0.2s ease-out;
}
.nav .menu-icon {
box-sizing: 0 0 5px 1px #fff;
padding: 28px 20px;
position: relative;
float: right;
cursor: pointer;
}
.nav .menu-icon .nav-icon {
background-color: #fff;
display: block;
height: 2px;
width: 18px;
position: relative;
transition: background 0.2s ease-out;
}
.nav .menu-icon .nav-icon::before {
background-color: #ffffff;
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 5px;
transition: all 0.2 ease-out;
}
.nav .menu-icon .nav-icon::after {
background-color: #ffffff;
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: -5px;
transition: all 0.2 ease-out;
}
.nav .menu_btn {
display: none;
}
.nav .menu_btn:checked ~ .menu {
max-height: 450px;
}
.nav .menu_btn:checked ~ .menu-icon .nav-icon {
background-color: transparent;
}
.nav .menu_btn:checked ~ .menu-icon .nav-icon::before {
transition: all 0.2s ease-out;
transform: rotate(-45deg);
top: 0;
background-color: tomato;
}
.nav .menu_btn:checked ~ .menu-icon .nav-icon::after {
transition: all 0.2s ease-out;
transform: rotate(45deg);
top: 0;
background-color: tomato;
}
@media (min-width: 900px) {
.nav li {
float: left;
}
.nav li a {
padding: 20px 30px;
}
.nav .menu {
clear: none;
float: right;
max-height: none;
}
.nav .menu-icon {
display: none;
}
}
@media (max-width:768px){
section h1{
font-size: 4rem;
}
.nav .logo{
margin-left:25% ;
}
}We will create
1 thought on “Responsive Navigation using CSS only No JavaScript”