Responsive Navigation
Create respnsive navigation using (HTML, CSS, JavaScript)
*HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>responsive navigation</title>
</head>
<body>
<nav>
<div class="logo">LOGO</div>
<ul class="links_group">
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">ABOUT</a>
</li>
<li>
<a href="#">SERVICES</a>
</li>
<li>
<a href="#">LOGIN</a>
</li>
</ul>
<div class="burger_icon">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</nav>
<script src="script.js"></script>
</body>
</html>
*CSS Code with media query
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background-image: url("background.jpg");
background-repeat: no-repeat;
background-size: 100% 800px;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 12vh;
background-color: rgb(27, 23, 23);
font-family: 'poppins', sans-serif;
}
.logo{
color: rgba(255, 255, 255, 0.301);
letter-spacing: 5px;
font-size: 20px;
}
.links_group{
display: flex;
justify-content: space-around;
width: 45%;
}
.links_group li{
list-style: none;
}
.links_group a{
color: white;
text-decoration: none;
letter-spacing: 2px;
font-weight: bold;
font-size: 14px;
}
.burger_icon{
cursor: pointer;
display: none;
}
.burger_icon div{
width: 30px;
height: 4px;
background-color: white;
margin: 4px;
}
@media screen and (max-width: 1024px){
.links_group{
width: 65%;
}
}
@media screen and (max-width:600px){
body{
overflow-x: hidden;
}
.links_group{
position: absolute;
right: 0px;
height: 92vh;
width: 100%;
top: 8vh;
background-color: rgba(27, 23, 23);
display: flex;
flex-direction: column;
text-align: center;
transform: translatex(100%);
}
.burger_icon{
display: block;
}
}
.links_new_style{
transform: translateX(0%);
transition: transform 0.7s ease-in;
}
*JavaScript Code.
const slide = () => {
const burger = document.querySelector('.burger_icon');
const links = document.querySelector('.links_group');
burger.addEventListener('click', ()=> {
links.classList.toggle('links_new_style');
});
}
slide();
channel link :- https://www.youtube.com/channel/UC1DFWpD1k1PtxIzYbdBAj6g
Add your comment
Signature :- Ayoub Shindi (Dev AAS).
Comments
Post a Comment