Menu with Animated Search Box
Hi Guys!
In this article I will show you how to Create Menu with Animated Search box Using HTML CSS and Javascript. I will also Provide Script (Source Code) of This Project.
Table of Contents
- Use of Menu With Search Box
- How to Create Menu With Search box using HTML CSS and Javascript.
- Source Code
Final View:
Use of Menu with Search If You have Big website (with respect to Content) Then You should Must add Menu with Search Box Because this helps your Users to Find Content on Your Website and also gives good experience to users.
Search bar Gives Content to Users What they actually want. So that's why Menu With Search Bar is More Important.
How to Create Menu with Search Box Using HTML CSS and JavaScript?
In This article I will Show you how to create Menu with Search Box HTML CSS and JavaScript. To Create Search Box in HTML CSS and JavaScript Follow these Steps:
- Open any Code Editor (VS Code , Note Pad etc)
- Create three (3) Files.
- First : Index.html
- Second: style.css
- Third app.js
Source Code
Now Open First File Named as Index.html and Paste the following Code HTML CODE:
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='content-wrapper'>
<div class='navmenu'>
<form action='/search' autocomplete='off' id='search-form' method='get'>
<input name='q' placeholder='Search here...' size='15' type='text'/>
<input id='button-submit' type='submit' value='Search'/>
</form>
<span id='menu'><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAC9JREFUeNpi/P//PwM1AQsQU9VEJgYqg8FvICgMGUeel0eTzWiyGU02Qz/ZAAQYAOPcBjEdYroKAAAAAElFTkSuQmCC' /></span>
<nav id='navbar' itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<ul class='navbar'>
<li><a href='/' itemprop='url' title='Home'><span itemprop='name'>Home</span></a></li>
<li><a href='/' itemprop='url' title='Home'><span itemprop='name'>News/Hints & Tips</span></a></li>
<li id='sub-menu'><span itemprop='name'>Courses</span>
<ul class="sub-menu">
<li><a href='/' itemprop='url' title='Home'><span itemprop='name'>Home</span></a></li>
<li><a href='/' itemprop='url' title='Home'><span itemprop='name'>Home</span></a></li>
</ul>
</li>
<li><a href='/' itemprop='url' title='Home'><span itemprop='name'>Contact Us</span></a></li>
</ul>
</nav>
</div>
</div>
<div style='clear: both;'/>
<script src="app.js"></script>
</body>
</html>
Now Open style.css file
CSS CODE:
Copy This Code and Paste in Your style.css file
/* CSS Main Menu */
.navmenu{width:100%;background:#303030;display:inline-block}
#menu{color:#fff;font-size:18px;position:relative;top:5px;font-weight:500;cursor:pointer;padding-left:10px;line-height:2.2em}
#menu a{text-decoration:none}
nav{display:none}
nav ul{list-style-type:none;padding-left:0;font-size:0;background-color:#303030}
nav li{display:block;font-size:16px;color:white}
ul.navbar>li>a{color:#fff}
ul.navbar>li>a:hover{color:red}
nav a{display:block;padding:10px;text-decoration:none;color:inherit}
/*==Dropdown Menu==*/
.sub-menu li{list-style-type:none;display:inline-block}
ul.navbar li ul.sub-menu{display:none;position:absolute}
ul.navbar li{position:relative}
ul.navbar li:hover ul.sub-menu{display:block}
.sub-menu li{margin-left:0!important}
ul.sub-menu>li>a{color:#fff}
ul.sub-menu>li>a:hover{color:red}
@media screen and (max-width:650px){nav ul{width:100%!important}#sub-menu{display:none} nav a{padding:5px 10px}
}
@media screen and (min-width:650px){#menu{display:none}nav{display:block!important}nav li{display:inline-block}}
/*----- Search -----*/
#search-form{display:inline-block;padding-top:4px;padding-right:5px;float:right}
#search-form input{width:200px;height:30px;padding:0 8px;float:left;border-radius:2px 0 0 2px;font-size:13px;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:0;font-size:100%;font:inherit}
#button-submit{width:auto!important;height:30px;padding:0 8px;float:right;border-radius:0 2px 2px 0;background:#66a992;font-size:13px;font-weight:600;text-shadow:0 1px 0 rgba(0,0,0,0.3);color:#fff}
@media screen and (max-width:480px){.toggle-nav{padding:6px 10px}#search-form input{width:150px}}
/* <----Finish menu */
Now at Last Open app.js File and paste the Code
JavaScript CODE:
document.getElementById('menu').addEventListener('click', function () {
var nav = document.getElementsByTagName('nav')[0];
if (nav.style.display == 'block') {
nav.style.display = 'none';
} else {
nav.style.display = 'block';
}
}, false);
By: Duc Nguyen
If You Like this Menu with Animated Search Box (Project) Then Subscribe Sinine Tech YouTube Channel Link and also Subscribe this blog. I Hope This Article Helps you in making Menu with Search Box using HTML CSS and Javascript.
Thanks For visiting Sinine Tech Blog.
