Yourhub

Horizontal Navigation bar with drop-down and dark mode || HTML CSS & JS

Author- Premraj MS

Hello guys, in this post I am going to share with you the source code of a Horizontal Navigation bar with drop-down and dark mode. It will look like Google support's(site) navigation bar. In this post, I am deeply explaining each CSS code and its purpose in this project and how it gives an awesome look. 

Vertical Navigation bar with drop-down and dark theme- HTML CSS and JavaScript

The header contains a navigation bar icon and site name on the left side and the search icon on the right side. If the user clicks on the top left navigation icon the Navigation bar will be visible in a vertical look. Both the search box and navigation come with a smooth animation. This navigation bar is almost similar to this site's navigation bar (fluratech 2022 template). 

Also, this is a simple and Responsive design. 

This video will give you an idea about the navigation bar. 

For this project, you want to create 3 files(index.html, style.css and script.js) in a folder. 

index.html


<!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">
    <title>navigation bar with drop-down</title>

    <!-- linking css and js -->
    <link rel="stylesheet" href="style.css">
    <!-- font-awesome 4 linking  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
</head>
<body >
    <header>
        <div class="headerContainer">
            <div class="leftContent">
                <span onclick="navigation()" id="navigationBtn"><i class="fa fa-bars"></i></span>
                <h1>Fluratech</h1>
            </div>
            <div class="rightContent">
                <span class="searchBtn" onclick="daynight()"><i id="icon" class="fa fa-moon-o"></i></span>
            </div>
        </div>
    </header>
    <!-- navigation bar -->
    <nav>
        <span class="navname">
            <b>Fluratech</b> <b onclick="navigation()"><i class="fa fa-times"></i></b>
        </span>
       <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li class="dropdown" onclick="drop1()">Drop down1 <span class="dropIcon"><i class="fa fa-angle-down"></i></span></li>
        <ul id="drop1">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
        </ul>
        <li class="dropdown" onclick="drop2()">Drop down2 <span class="dropIcon"><i class="fa fa-angle-down"></i></span></li>
        <ul id="drop2">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
        </ul>
        <li class="dropdown" onclick="drop3()">Drop down3 <span class="dropIcon"><i class="fa fa-angle-down"></i></span></li>
        <ul id="drop3">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
        </ul>
        
       </ul>
    </nav>
    <script src="script.js"></script>
    <main>
        Awesome NAVIGATION-bar using <br> HTML, CSS and JAVASCRIPT
    </main>
</body>
</html>

style.css

CSS variables

Here I have made two variable lists one for light mode and another for dark mode.


:root {
    --headerColor: rgb(0, 60, 255);
    --FontColor: rgb(56, 56, 56);
    --bodyColor: rgb(207, 207, 207);
    --colorday: rgb(255, 255, 255);
    --colorchan: rgb(255, 255, 255);
}
/* night mode */
body.dark {
    --headerColor: rgb(0, 60, 255);
    --FontColor: rgb(212, 212, 212);
    --bodyColor: rgb(23, 23, 31);
    --colorday: rgb(255, 255, 255);
    --colorchan: rgb(66, 58, 58);
}

Basic template design

Here I have added all the basic code to make the display the same output seen in the video. 


* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    text-decoration: none;
}

body {
    background-color: var(--bodyColor);
}
main{
    height:90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: 800;
    text-align: center;
    color: var(--FontColor);
}

Header

Here I have only added the code for the look, alignment and javascript function access. The header contains a navigation bar icon and site name on the left side and the search icon on the right side. If the user clicks on the top left navigation icon the Navigation bar will be visible in a vertical look. Both the search box and navigation come with a smooth animation. 


header {
    background-color: var(--headerColor);
    color: var(--colorday);
}

header .headerContainer {
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    padding: 20px 0 20px 0;

}

header .headerContainer .leftContent h1 {
    font-size: 30px;
    display: inline-block;
    margin-left: 20px;
    color: var(--colorday);
    transition: 0.7s;
}
header .headerContainer .leftContent span {
    font-size: 25px;
    margin-left: 20px;
    cursor: pointer;
    padding: 10px;
    transition: 0.7s;
}

header .headerContainer .rightContent span {
    font-size: 25px;
    margin-right: 20px;
    cursor: pointer;
    padding: 10px;

}

header .headerContainer span:hover {
    background-color: rgb(67, 67, 117);
    border-radius: 50%;
}

Navigation-bar

This code will give a look and alignment for both the navigation and dropdown. The navigation bar is fixed on the left side and its position will not change.

/* Navigation */
nav {
    width: 300px;
    position: fixed;
    top: 0;
    left: -400px;
    background-color: var(--colorchan);
    height: 100vh;
    font-size: 20px;
    transition: .3s;
    overflow: auto;
}

nav .navname {
    display: block;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--FontColor);
    color: var(--FontColor);
}

nav .navname b {
    font-size: 30px;
    font-weight: 700;
    color: var(--headerColor);
    padding: 20px 10px 20px 10px;

}

nav ul {
    padding-left: 20px;
    list-style: none;
    color: var(--FontColor);
}

nav ul li {
    font-weight: 600;
    margin: 10px 0 10px 0;
    border-radius: 10px 0 0 10px;
}

nav ul a {
    color: var(--FontColor);
    display: block;
}

nav ul li a:hover {
    color: var(--headerColor);
}

nav ul ul {
    display: none;
    
}

nav ul ul li {
    font-weight: 550;
    font-size: 18px;
    padding: 0px;
}

.dropIcon {
    float: right;
    margin-right: 5px;
}

.dropdown {
    cursor: pointer;
}

Media query

The browser equal to or smaller than 400 px will affect the look of the site. So I have added media query to maintain its size to 100%.


@media only screen and (max-width:400px) {
    nav{width: 100%;}
}

All CSS code in one

This is all the CSS code that we discussed previously. 


* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    text-decoration: none;
}

body {
    background-color: var(--bodyColor);
}

:root {
    --headerColor: rgb(0, 60, 255);
    --FontColor: rgb(56, 56, 56);
    --bodyColor: rgb(207, 207, 207);
    --colorday: rgb(255, 255, 255);
    --colorchan: rgb(255, 255, 255);
}

header {
    background-color: var(--headerColor);
    color: var(--colorday);
}

header .headerContainer {
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    padding: 20px 0 20px 0;

}

header .headerContainer .leftContent h1 {
    font-size: 30px;
    display: inline-block;
    margin-left: 20px;
    color: var(--colorday);
    transition: 0.7s;
}

header .headerContainer .leftContent span {
    font-size: 25px;
    margin-left: 20px;
    cursor: pointer;
    padding: 10px;
    transition: 0.7s;
}

header .headerContainer .rightContent span {
    font-size: 25px;
    margin-right: 20px;
    cursor: pointer;
    padding: 10px;

}

header .headerContainer span:hover {
    background-color: rgb(67, 67, 117);
    border-radius: 50%;

}

/* Navigation */
nav {
    width: 300px;
    position: fixed;
    top: 0;
    left: -400px;
    background-color: var(--colorchan);
    height: 100vh;
    font-size: 20px;
    transition: .3s;
    overflow: auto;
}

nav .navname {
    display: block;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--FontColor);
    color: var(--FontColor);
}

nav .navname b {
    font-size: 30px;
    font-weight: 700;
    color: var(--headerColor);
    padding: 20px 10px 20px 10px;

}

nav ul {
    padding-left: 20px;
    list-style: none;
    color: var(--FontColor);
}

nav ul li {
    font-weight: 600;
    margin: 10px 0 10px 0;
    border-radius: 10px 0 0 10px;
}

nav ul a {
    color: var(--FontColor);
    display: block;
}

nav ul li a:hover {
    color: var(--headerColor);
}

nav ul ul {
    display: none;
    
}

nav ul ul li {
    font-weight: 550;
    font-size: 18px;
    padding: 0px;
}

.dropIcon {
    float: right;
    margin-right: 5px;
}

.dropdown {
    cursor: pointer;
}

/* night mode */
body.dark {
    --headerColor: rgb(0, 60, 255);
    --FontColor: rgb(212, 212, 212);
    --bodyColor: rgb(23, 23, 31);
    --colorday: rgb(255, 255, 255);
    --colorchan: rgb(66, 58, 58);
}
main{
    height:90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: 800;
    text-align: center;
    color: var(--FontColor);
}

@media only screen and (max-width:400px) {
    nav{width: 100%;}
}

script.js


function daynight() {
    var body = document.querySelector("body");
    body.classList.toggle("dark");
    if (!body.classList.contains("dark")) {
        localStorage.setItem("mode", "light-mode");
    } else {
        localStorage.setItem("mode", "dark-mode");
    }

}
if (localStorage.getItem("mode") && localStorage.getItem("mode") === "dark-mode") {
    document.querySelector("body").classList.add("dark");
}
function drop1(){
    if (document.getElementById("drop1").style.display == "block") {
        document.getElementById("drop1").style.display ="none";
    } else {
        document.getElementById("drop1").style.display = "block";
    }
    
}
function drop2() {
    if (document.getElementById("drop2").style.display == "block") {
        document.getElementById("drop2").style.display = "none";
    } else {
        document.getElementById("drop2").style.display = "block";
    }

}
function drop3() {
    if (document.getElementById("drop3").style.display == "block") {
        document.getElementById("drop3").style.display = "none";
    } else {
        document.getElementById("drop3").style.display = "block";
    }

}
function navigation(){
    if (document.querySelector("nav").style.left=="0px") {
        document.querySelector("nav").style.left = "-400px";
    } else {
        document.querySelector("nav").style.left = "0px";
    }
}

Discussions

Post a Comment