CODEwithCREST

support@codewithcrest.com

Simple nav bar with html, CSS and JavaScript

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

Leave a Reply

Your email address will not be published.

Table of Contents