web design codes / layout

Responsive Menu Bar by HTML5 And CSS3

HTML5 Code

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Nav-Bar created by delhikacoder</title>

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

</head>

<body>

<header>

<nav>

<div class="logo">

Brand logo

</div>

<input type="checkbox" name="" id="click">

<label for="click" class="menu-btn">

<i class="fa fa-bars"></i>

</label>

<ul>

<li><a href="#">

Home</a>

</li>

<li>

<a href="#">

About</a>

</li>

<li>

<a href="#">

Service</a>

</li>

<li>

<a href="">

Contact</a>

</li>

</ul>

</nav>

</header>

</body>

</html>

CSS3 Code

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}

nav{
background: #dc0f8a;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px;

}
nav .logo{
font-size: 40px;
font-weight: 800;
color: #fff;
margin: 0 10px;
}
nav ul{
display: flex;
list-style: none;

}
nav ul li{
margin: 0 8px;
}
nav ul a{
color: #fff;
text-decoration: none;
letter-spacing: 1px;
padding: 5px 20px;
border: 1px solid #fff;
border-radius: 5px;
font-weight: 600;
}

nav ul a:hover{
color: #fff;
text-decoration: none;
letter-spacing: 1px;
padding: 5px 20px;
border: 1px solid #fff;
border-radius: 5px;
font-weight: 600;
transition: .5s ease;
background: #4e4e4e26;
}
nav ul ul{
position: absolute;
display: inline-block;
}
nav ul ul li{
position: relative;
top: 40px;
left: -98px;
line-height: 40px;
background: #3E8DA8;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 0 0 4px 4px;

z-index: 2;
}
.menu-btn i{
cursor: pointer;
color: #fff;
font-size: 20px;
display: none;
}
#click{display: none;}

@media(max-width:940px){
nav ul {position: fixed;
top: 65px;
height: 100vh;
width: 100%;
display: block;
background: #000000de;
left: -100%;
text-align: center;}

#click:checked ~ ul{
left: 0%;
transition: .5s ease;
}
#click:checked ~ .menu-btn i:before {
content: "\f00d";

}
nav ul li{
margin: 20px 0;
border-bottom: 1px solid #fff;
padding: 0 0 8px 0;
}

nav ul li a{
color: #fff;
text-decoration: none;
letter-spacing: 1px;
padding: 5px 20px;

border: none;
font-weight: 600;
}

nav ul li a:hover{
color: cyan;
text-decoration: none;
letter-spacing: 1px;
padding: 5px 20px;
background: none;
border: none;
font-weight: 600;
}

nav ul ul{
position: absolute;
display: inline-block;
}
nav ul ul li{
position: relative;
top: 40px;
left: -98px;
line-height: 40px;
background: #3E8DA8;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 0 0 4px 4px;

z-index: 2;
}

.menu-btn i{
cursor: pointer;
color: #fff;
font-size: 20px;
display: block;
margin: 0 10px;
}

}

Code Output in Video

Comments