Simple navigation bar 👨💻
html code
Welcome😍 to Code With crest blog. In this blog, we learn that how to create a simple navigation bar with just html css and javascript in few steps.. Hope you enjoy our blog so let’s start with a basic HTML structure for the navigation bar.
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” bg-color=”#abb8c3″ theme=”dark” language=”markup” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
<body>
<div class="container">
<div class="nav" id="nav">
<span>HTML</span>
<span>CSS</span>
<span>JAVASCRIPT</span>
<span>GRAPHIC DESIGN</span>
<span>WORDPRESS</span>
<span>COACHING</span>
<span class="button">PROCREST</span>
<span class="button">CRESTLEARN</span>
<span class="button">CRESTLANCING</span>
</div>
<i id="icon" class="bi bi-menu-down ic"></i>
<i id="icon-1" class="bi bi-x-lg ic"></i>
</div>
</body>
[/dm_code_snippet]
There is all HTML code for the navigation bar. Now, you can see output without CSS, then we write CSS for the navigation bar
css code
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” bg-color=”#abb8c3″ theme=”dark” language=”css” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css");
*{
margin: 0;
padding: 0;
}
.container{
position: relative;
}
.nav{
display: flex;
justify-content:space-between;
align-items: center;
height: 20vh;
width: 100%;
justify-content: center;
font-size: 1.1rem;
background-color: rgba(149, 14, 190, 0.82);
}
span{
margin: 10px;
cursor: pointer;
color: white;
}
span:hover{
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.413);
transition: 1s;
}
.button{
border: 1px solid rgba(255, 255, 255, 0.731);
border-radius: 10px;
padding: 10px;
background-color: rgba(123, 203, 238, 0.836);
}
.button:hover{
border: 1px solid rgba(255, 255, 255, 0.731);
border-radius: 10px;
padding: 10px;
background-color: rgba(255, 255, 255, 0.79);
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.413);
transition: 1s;
}
.ic{
font-size: 2.5rem;
position: absolute;
top: 20px;
left: 20px;
display: none;
}
@media screen and (max-width: 1000px) {
.ic {
display: inline;
}
.nav{
display: flex;
justify-content:center;
flex-direction: column;
align-items: center;
height: 150px;
width: 0%;
overflow: hidden;
justify-content: center;
font-size: 1.1rem;
background-color: rgba(149, 14, 190, 0.82);
transition: 300ms;
}
#icon-1{
display: none;
}
}
@media screen and (max-width: 1300px) {
.ic {
display: inline;
}
.nav{
display: flex;
justify-content:center;
flex-direction: column;
align-items: center;
height: 150px;
width: 0%;
overflow: hidden;
justify-content: center;
font-size: 1.1rem;
background-color: rgba(149, 14, 190, 0.82);
transition: 300ms;
}
#icon-1{
display: none;
}
}
[/dm_code_snippet]
javascript code
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
var x = document.getElementById('icon');
var y = document.getElementById('icon-1');
var z = document.getElementById('nav');
x.addEventListener("click", function(){
x.style.display = 'none';
y.style.display = "inline";
y.style.transition = "300ms";
z.style.width = "100%";
z.style.height = "100vh";
z.style.flexDirrection = "column";
})
y.addEventListener("click", function(){
y.style.display = 'none';
x.style.display = "inline";
y.style.transition = "300ms";
z.style.width = "0%";
z.style.height = "0vh";
z.style.flexDirrection = "row";
})
[/dm_code_snippet]
final output
Read more of our articles links bellow
Advantages online shop (e-commerce) for your business
6 essential qualities of a web editor
Check out best recommended hosting services
learn what hosting to chose this 2022 click here now