Transparent menu bar using JavaScript

Hello Readers,

Today in this blog you’ll learn how to create typing effect using JavaScript. Previously I have shared a Typing Effect Using JavaScript now it’s time to create a Transparent menu bar using JavaScript, HTML, CSS.

In that tutorial you have seen transparent menu bar using JavaScript. I used the CSS for styling, JavaScript for effect.

If you’re a beginner, you can also create this types of Transparent menu bar and good them according to your choice because there are no vast codes of JavaScript.

See also  Minimalist Tree View In Pure CSS

You might like this:

If you like this program (Custom Design) and want to get source code. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

<!DOCTYPE html>
<!-- code by CodeitHub ( https://CodeitHub.com ) -->
<html>
    <head>
        <title>CSS Transperent menu bar</title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <div class="header">
            <div class="navbar" id="nav">
                <ul>
                    <li>Home</li>
                    <li>Menu</li>
                    <li>Contact</li>
                    <li>About</li>
                    <li>Help</a></li>
                </ul>
            </div>
        </div>
        <div class="box">

        </div>
        <script src="script.js"></script>
    </body>
</html>
/** code by CodeitHub ( https://CodeitHub.com ) **/
*{
    padding:0px;
    margin:0px;
    box-sizing: border-box;
}
.header{
    width: 100%;
    height: 1000px;
    background-image:url(../Images/women.jpg);
    background-size: cover;
}
.navbar{
    width: 100%;
    padding:20px;
    position: fixed;
    top:0px;
    transition:.5 s;
}
.navbar ul li {
    list-style: none;
    display:inline-block;
    padding:10px 50px;
    color:white;
    font-size: 24px;
    font-family: sans-serif;
    cursor: pointer;
    border-radius: 10px;
    transition:.5s;
}
.navbar ul li:hover{
    background:orange;
}
.box{
    width:80%;
    height: 2000px;
    background:greenyellow;
    margin:20px;
}
var nav=document.getElementById('nav');
window.onscroll=function(){
    if(window.pageYOffset >100){
        nav.style.background="#007bff";
        nav.style.boxShadow="0px 4px 2px black";
    }
    else{
        nav.style.background="transparent";
        nav.style.boxShadow="none";
    }
}

Output

Leave a Reply

Your email address will not be published. Required fields are marked *