In this post, I am going to share with you a source code of an amazing navigation bar containing a drop-down, search box and dark mode.
You can easily choose the background colour of the header and navigation by changing the CSS variable. This project will be the most memorable project in your life. So, guys, this is another post-sharing source code of a responsive mobile-friendly navigation bar using HTML CSS and JavaScript. This is an awesome-looking one because this navigation bar contains a search box, dark mode and drop-down website development career.
I checked the demo video to get more idea about how the navigation bar will look like:
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-3369924130518182"
data-ad-slot="1112293816"></ins>
On this site fluratech.com, we publish the source of different web projects. Till now we are created more than 3 different types of navigation bars. You can check it out. To get notified about new projects, you can subscribe to our YouTube channel: www.youtube.com/@fluratech
Also read:
Source code
You want to create 3 files named index.html style.css and script.js in a folder called navigation or whatever you like.
For the icons displayed on the project, I have used font-awesome. That's why you need to download or link it from the URL. I have already linked it by using the URL. So, the icon only displays wether the device is connected to the internet.
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>advanced Navigation with search, dark mode and drop down- fluratech</title>
<!-- css link & font awesome -->
<link rel="stylesheet" href="style.css">
<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="mainHead">
<!-- navigation icon -->
<span class="navbarIcon" onclick="navigation()"><i class="fa fa-bars"></i></span>
<!-- site name -->
<span class="logoHead">
<h1>fluratech</h1>
</span>
<!-- Navigation -->
<nav>
<ul class="sliderMobi">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a class="dropdown">Category <i class="fa fa-angle-down"></i></a>
<ul>
<li><a href="#">Tech</a></li>
<li><a href="#">Psycology</a></li>
<li><a href="#">Motivation</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">fitness</a></li>
</ul>
</li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- Search and theam icon -->
<span class="headerTool">
<span onclick="darkmode()" class="mainTheam" id="darkmode"><i class="fa fa-moon-o"></i></span>
<span class="mainSearch" onclick="searchBar()"><i class="fa fa-search"></i></span>
</span>
</div>
</header>
<div class="searchBar">
<div>
<input type="text" placeholder="SEARCH" />
<button type="submit"><i class="fa fa-search"></i> SEARCH</button>
</div>
</div>
<main>
Fluratech.com
</main>
<script src="script.js"></script>
</body>
</html>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-3369924130518182"
data-ad-slot="1112293816"></ins>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--main);
}
a {
text-decoration: none;
}
/* CSS VERIABLE */
:root {
--mainColor: rgb(97, 0, 189);
--textcolor: rgb(37, 37, 37);
--hoverBtn: rgb(182, 182, 182);
--header: rgb(255, 94, 0);
--main: rgb(228, 245, 243);
}
body.dark {
--mainColor: rgb(97, 0, 189);
--textcolor: rgb(219, 219, 219);
--main: rgb(22, 20, 34);
}
header {
background-color: var(--header);
}
header a {
color: white;
}
header ul {
list-style: none;
}
header .mainHead {
max-width: 1200px;
margin: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 15px;
}
header .mainHead .navbarIcon {
display: none;
}
header .mainHead .logoHead {
color: white;
font-weight: 800;
}
header nav ul {
display: flex;
line-height: 41px;
font-size: 18px;
font-weight: 600;
}
header nav ul li a {
margin: 0 10px 0 10px;
}
header nav ul li a:hover {
color: rgb(165, 165, 165);
}
header nav ul li ul {
position: absolute;
display: none;
background-color: var(--main) !important;
border: 2px solid var(--textcolor);
font-size: 16px;
}
header nav ul li:hover ul {
display: block;
background-color: var(--header);
line-height: 0px;
}
header nav ul li:hover ul a {
display: block;
padding: 20px;
margin: 3px;
transition: .4s;
color: var(--textcolor);
font-weight: 700;
}
header nav ul li:hover ul a:hover {
background-color: var(--hoverBtn);
color: var(--header);
}
header .headerTool {
padding: 10px;
}
header .headerTool span {
color: white;
padding: 10px;
border-radius: 50%;
background-color: rgb(218, 128, 12);
}
header .headerTool span:hover {
background-color: rgb(14, 13, 12);
}
header .headerTool span.active {
background-color: rgb(14, 13, 12);
}
main {
height: 89vh;
color: var(--textcolor);
background-color: var(--main);
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
font-weight: 600;
}
.searchBar {
max-width: 500px;
margin: auto;
padding: 20px;
border: 2px solid var(--header);
margin-top: 20px;
position: relative;
display: none;
z-index: -20;
}
.searchBar input {
width: 100%;
padding: 10px;
font-size: 18px;
font-weight: 700;
}
.searchBar button {
padding: 10px;
color: white;
background-color: var(--header);
font-size: 18px;
font-weight: 700;
width: 100%;
}
@media only screen and (max-width:700px) {
header .mainHead .navbarIcon {
display: block;
color: white;
position: absolute;
font-size: 18px;
padding: 10px;
border-radius: 50%;
background-color: rgb(218, 128, 12);
}
header .mainHead .navbarIcon:hover {
background-color: black;
}
header .mainHead .logoHead {
margin-left: 50px;
}
nav ul {
display: flex;
flex-direction: column;
position: fixed;
left: 0;
top: 64px;
background-color: rgb(255, 115, 0);
width: 300px;
height: 100%;
transition: 1s;
left: -400px;
}
nav ul li a {
display: block;
padding: 9px 21px 13px 20px;
font-size: 20px;
}
nav ul li ul {
position: relative;
overflow: scroll;
display: block;
background-color: var(--main) !important;
border: none;
font-size: 16px;
left: -400px;
}
nav ul li:hover ul {
font-size: 16px;
left: 0;
}
}
@media only screen and (max-width:400px) {
nav ul {
width: 100%;
}
}
script.js
function searchBar() {
if (document.querySelector(".searchBar").style.display == "block") {
document.querySelector(".searchBar").style.display = "none";
document.querySelector(".mainSearch").innerHTML = "<i class='fa fa-search'>";
} else {
document.querySelector(".searchBar").style.display = "block";
document.querySelector(".mainSearch").innerHTML = "<i class='fa fa-times'>";
}
}
function darkmode() {
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 navigation() {
if (document.querySelector(".sliderMobi").style.left == "-400px") {
document.querySelector(".sliderMobi").style.left = "0px";
} else {
document.querySelector(".sliderMobi").style.left = "-400px";
}
}
conclusion
Hoping that this post will be helpful to your purpose. If you have any doubts you can contact us in the comment section. Also if you have faced any bugs in the source code, you can comment it out. Also, don't forget to subscribe to our channel FLURATECH for getting notified whenever we have posted a new source code project.
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-3369924130518182"
data-ad-slot="1112293816"></ins>
Comments