Responsive Side Navigation Bar | HTML & CSS | in Just 11 Min
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Side NavBar</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)"
class="closebtn"
onclick="closeNav()">×</a>
<a href="#">About Us</a>
<a href="#">Services</a>
<a href="#">Privacy Policy</a>
<a href="#">Contact Us</a>
</div>
<span style="font-size: 30px; cursor: pointer;"
onclick="openNav()"> <i class="fa fa-bars" aria-hidden="true"></i>
</span>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
CSS -->>
body{
font-family: "Lato" sans-serif;
}
.sidenav{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
/*Make a Gradient*/
background: rgb(1,44,255) ;
background: linear-gradient(180deg, rgba(1,44,255,1) 0%,
rgba(10,139,252,1) 56%, rgba(22,255,249,1) 100%);
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a{
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #fff;
display: block;
transition: 0.3s;
}
.sidenav .closebtn{
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.sidenav a:hover, .offcanvas a:focus{
color: cyan;
}
/* Make a Responsive */
@media screen and (max-height: 450px){
.sidenav {padding-top: 15px;}
.sidenav a{font-size: 18px;}
}
No comments: