Jquery Simple Working Nanbar
Explanation of main Conent:-
When the use clicks on the button names as toggler.
js tiggers a class for the navbar. In your case the class called as "x"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navbar</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.toggler').click(function(){
$('.navbar').toggleClass("x");
});
$('.dp').click(function(){
$('.dropdown').toggleClass("show");
});
});
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
font-size: 1.2rem;
font-weight: 400;
text-decoration: none;
list-style-type: none;
color: black;
}
.nav{
background: palegoldenrod;
display: flex;
justify-content: space-evenly;
align-items: center;
height: 10vh;
width: 100vw;
}
.toggler{
background: transparent;
width: 26px;
height: 20px;
border-radius: none;
border: none;
}
.toggler .layer{
width: 100%;
height: 4px;
background-color: black;
border-radius: 4px;
margin: 1px 0;
}
.navbar{
background-color: palevioletred;
height: 60vh;
width: 50vh;
position: absolute;
top: 10vh;
right: 0;
display: flex;
justify-content: space-evenly;
flex-direction: column;
align-items: center;
transform: translateY(100%);
transition: all .6s ease-in-out;
}
.x{
transform: translateY(0%);
}
.dropdown{
background-color: white;
width: max-content;
padding: 1em;
display: none;
}
li .dropdown li{
margin: 0 0 5px 0;
}
.show{
display: block;
}
</style>
</head>
<body>
<nav class="nav">
<a class="navbar-brand"></TKKCODE></a>
<button class="toggler">
<div class="layer top"></div>
<div class="layer middle"></div>
<div class="layer bottom"></div>
</button>
<ul class="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">End</a></li>
<li><a href="#">Justify</a></li>
<li class="dp"><a href="#">Kiran 2</a></li>
<ul class="dropdown">
<li><a href="">link 1</a></li>
<li><a href="">link 2</a></li>
<li><a href="">link 3</a></li>
<li><a href="">link 4</a></li>
</ul>
<li><a href="#">Kiran</a></li>
</ul>
</nav>
</body>
</html>