Responsive Navigation Menu with Search Bar and Popup
Updated on 15 May
Today in this article I am going to share with you the source code of responsive navigation menu with search bar and modal popup.
This is responsive navigation menu with menus and sub-menus and it is also having two buttons one is for search bar, to toggle it's visibility and the other is for showing and hiding modal popup.
Demo/Preview of Responsive Navigation Menu With Search Bar And Popup:
This is the preview/Demo of Responsive Navigation Menu With Search Bar And Popup.View Demo
Good day developers today we are going to make Responsive Navigation Menu With Search Bar And Popup
As you know the HTML markup is compulsory for that so we should have some HTML markup first. Below is the HTML markup.
The HTML, CSS & Javascript code that are provided below can have some encoding errors so i recommend you to used codes from project files only if there is any error with the working of code.
There are some external files used in the code provided below you can download them if you want:
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
HTML markup for Responsive Navigation Menu With Search Bar And Popup :
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css'>
<header id='menuheady'>
<nav id='asalmenu'>
<div class='logo'>
<div class='header-logo'>
<div class='header section' id='header' name='Logo & Title'>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<h1 class='title'>
<a href='https://www.softwebtuts.com/' title='Softweb Tuts'>
<span>
Softweb Tuts
</span>
</a>
</h1>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'>
<span>
Responsive Blogger Template
</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div id='head-mobile'></div>
<div class='buttonx'></div>
<ul>
<li>
<a href='#'><span>About <i aria-hidden='true' class='fa fa-angle-down fa-fw'></i></span></a>
<ul>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact Form</span></a></li>
<li><a href='#'><span>Disclaimer</span></a></li>
<li><a href='#'><span>Error 404</span></a></li>
<li><a href='#'><span>Sitemap</span></a></li>
</ul>
</li>
<li>
<a href='#'><span>Filter <i aria-hidden='true' class='fa fa-angle-down fa-fw'></i></span></a>
<ul>
<li>
<a href='#'><span>Product 1 <i aria-hidden='true' class='fa fa-angle-down fa-fw'></i></span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
<li>
<a href='#'><span>Product 2 <i aria-hidden='true' class='fa fa-angle-down fa-fw'></i></span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
<li><a href='#'><span>Product 3</span></a></li>
</ul>
</li>
<li>
<a href='#'><span>Filter <i aria-hidden='true' class='fa fa-angle-down fa-fw'></i></span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
<li><a href='#'><span>Product 3</span></a></li>
</ul>
</li>
<li><a href='#'><span>Entertainment</span></a></li>
<li><a href='#'><span>Food</span></a></li>
<li><a href='#'><span>Travel</span></a></li>
<li><a href='#' target='_blank'><span>Download</span></a></li>
</ul>
<div><a class='shownotif' href='javascript:;' title='Show Notification'><i aria-hidden='true' class='fa fa-bell'></i></a></div>
<div class='search-icon'>
<a href='#searchca'><i class='fa fa-search'></i></a>
</div>
</nav>
<div id='searchca'>
<form action='/search' id='search-form' method='get'>
<input name='q' placeholder='Search here and hit enter...' type='search' value=''/>
<input name='max-results' type='hidden' value='8'/>
<button class='close' type='button'>×</button>
</form>
</div>
</header>
<!--Modal Pop-up-->
<div class='asalseonotif'>
<div class='asalseotitle'>Notification</div>
<div class='notiftext'>
This is just an example, you can fill it later with your own note.</div>
<a class='waves-effect waves-light close-sf' href='javascript:;' title='Done'>Done</a>
<a class='waves-effect icx close-sf' href='javascript:;'></a>
</div>
<div class='matilampu'></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'><-e30/script>| Attribute | Belongs to | Description |
|---|---|---|
| action | <form> | Specifies where to send the form-data when a form is submitted |
| charset | <meta>, <script> | Specifies the character encoding |
| class | Global Attributes | Specifies one or more classnames for an element (refers to a class in a style sheet) |
| hidden | Global Attributes | Specifies that an element is not yet, or is no longer, relevant |
| href | <a>, <area>, <base>, <link> | Specifies the URL of the page the link goes to |
| id | Global Attributes | Specifies a unique id for an element |
| lang | Global Attributes | Specifies the language of the element's content |
| method | <form> | Specifies the HTTP method to use when sending form-data |
| name | <button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea> | Specifies the name of the element |
| placeholder | <input>, <textarea> | Specifies a short hint that describes the expected value of the element |
| rel | <a>, <area>, <link> | Specifies the relationship between the current document and the linked document |
| src | <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> | Specifies the URL of the media file |
| target | <a>, <area>, <base>, <form> | Specifies the target for where to open the linked document or where to submit the form |
| title | Global Attributes | Specifies extra information about an element |
| type | <a>, <button>, <embed>, <input>, <link>, <menu>, <object>, <script>, <source>, <style> | Specifies the type of element |
| value | <button>, <input>, <li>, <option>, <meter>, <progress>, <param> | Specifies the value of the element |
I have included the jquery script or plugin in the above code because we are going to use jquery code instead of javascript code so you have to include it if you already have added in your website then remove this one.
In the code provided above i have added some icons using fontawesome css library that's why i have included the fontawesome library if you will remove it then you will see squares instead icons.
HTML code provided above is not minified you can minify it according to your requirements. This code is having some lines of code that are not necessary for this navigation menu but i have used the to clarify the code you can remove that afterwards if you want.
Without CSS our this script (Responsive Navigation Menu With Search Bar And Popup) will never look comely. So here we are, our HTML markup is ready now we have to personalize our HTML markup and it can only be done using CSS.
So this is the CSS code which i have written and we will use this to customize Responsive Navigation Menu With Search Bar And Popup you can copy it by clicking on the code and code will be automatically copied to clipboard.
CSS Code for Responsive Navigation Menu With Search Bar And Popup :
body {
background: #f8f8f8;
color: #000;
font-family: 'Poppins',sans-serif;
font-size: 16px;
padding: 0;
margin: 0;
font-weight: normal;
}
a{text-decoration:none;}
/* Navigation */
#menuheady{position:fixed;width:100%;margin:auto;top:0;right:0;left:0;z-index:99;-webkit-transform:translateZ(0);transform:translateZ(0);background-color:#fff;color:#000;box-shadow:0 2px 10px rgba(0,0,0,0.06)}.logo{position:relative;padding:12px 0;color:#000;float:left;z-index:123}.logo a{color:#000}
nav{position:relative;width:100%;max-width:990px;margin:0 auto}
#asalmenu,#asalmenu ul,#asalmenu ul li,#asalmenu ul li a,#asalmenu #head-mobile{border:0;list-style:none;line-height:1;margin:0 auto;display:block;position:relative}#asalmenu{width:100%;max-width:990px}#asalmenu:after,#asalmenu >ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}#asalmenu #head-mobile{display:none}#asalmenu >ul >li{float:left}#asalmenu >ul >li >a{padding:24px 12px;font-size:14px;letter-spacing:.2px;text-decoration:none;color:#000;font-weight:600}#asalmenu >ul >li:hover >a,#asalmenu ul li.active a{color:#e74c3c}#asalmenu >ul >li:hover,#asalmenu ul li.active:hover,#asalmenu ul li.active,#asalmenu ul li.has-sub.active:hover{transition:background .3s ease}#asalmenu ul ul{padding:0;border-top:2px solid #e74c3c;position:absolute;left:-9999px;z-index:99;box-shadow:0 2px 2rem -1rem rgba(0,0,0,0.5)}#asalmenu ul ul li{height:0;background:#fff}#asalmenu ul ul li:hover{background:#e74c3c}#asalmenu li:hover >ul{left:auto}#asalmenu li:hover >ul >li{height:35px}#asalmenu ul ul ul{margin-left:100%;top:0}#asalmenu ul ul li a{border-bottom:1px solid rgba(255,255,255,0.1);padding:11px 15px;min-width:170px;font-size:13px;text-decoration:none;color:#222;font-weight:400;transition:initial}#asalmenu ul ul li:last-child >a,#asalmenu ul ul li.last-item >a{border-bottom:0}#asalmenu ul ul li:hover >a,#asalmenu ul ul li a:hover{color:#fff}#asalmenu ul ul li.has-sub:hover,#asalmenu ul li.has-sub ul li.has-sub ul li:hover{background:#e74c3c}#asalmenu ul ul ul li.active a{border-left:1px solid #333}#asalmenu >ul >li.has-sub >ul >li.active >a,#asalmenu >ul ul >li.has-sub >ul >li.active >a{border-top:1px solid rgba(0,0,0,0.03)}#asalmenu >ul >li.has-sub >a i {margin:0 0 0 5px}#asalmenu > ul ul > li.has-sub > a i{margin:0 0 0 5px;float:right;transform:rotate(-90deg)}
@media screen and (max-width:768px){.logo{position:absolute;top:0;left:0;width:100%;height:46px;text-align:center;padding:7px 0 0 0;float:none}.logo2{display:none}nav{width:100%}#asalmenu{background:#fff;width:100%;position:fixed;z-index:9999;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 2px 10px rgba(0,0,0,0.1)}#asalmenu ul{width:100%;display:none}#asalmenu ul li{width:100%;border-top:1px solid rgba(0,0,0,0.03)}#asalmenu ul li:hover{background:#363636}#asalmenu ul ul li,#asalmenu li:hover > ul > li{height:auto}#asalmenu ul li a,#asalmenu ul ul li a{padding:15px;color:#000;width:100%;border-bottom:0}#asalmenu > ul > li{float:none;background:#fff}#asalmenu ul ul li a{color:#000}#asalmenu ul ul li{background:#333;border-top:1px solid rgba(255,255,255,0.05)}#asalmenu ul ul li:hover{background:#2d2d2d}#asalmenu ul ul ul li a{padding-left:15px}#asalmenu ul ul li a{color:#fff;background:none;font-size:14px}#asalmenu ul ul li:hover > a,#asalmenu ul ul li.active > a{color:#000}#asalmenu ul ul,#asalmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left;box-shadow:none;border:0}#asalmenu #head-mobile{display:block;padding:25px;color:#000;font-size:12px;font-weight:600}.buttonx{width:55px;height:46px;position:absolute;left:0;top:0;cursor:pointer;z-index:12399994}.buttonx:after{content:'';position:absolute;top:23px;right:20px;display:block;height:4px;width:20px;border-top:2px solid #000;border-bottom:2px solid #000;-webkit-box-sizing:initial;-moz-box-sizing:initial;box-sizing:initial}.buttonx:before{content:'';transition:all .3s ease;position:absolute;top:17px;right:20px;display:block;height:2px;width:20px;background:#000}.buttonx.menu-opened:after{transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#222;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.buttonx.menu-opened:before{top:23px;background:#222;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}#asalmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid rgba(0,0,0,0.03);height:45px;width:50px;cursor:pointer}#asalmenu ul ul .submenu-button{height:45px;border-left:1px solid rgba(255,255,255,0.05)}#asalmenu ul ul ul li.active a{border-left:none}#asalmenu > ul > li.has-sub > ul > li.active > a,#asalmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}#asalmenu > ul > li:hover,#asalmenu ul li.active:hover,#asalmenu ul li.active,#asalmenu ul li.has-sub.active:hover{background:#fff;transition:background .3s ease}#asalmenu > ul > li:hover > a,#asalmenu ul li.active a{color:#000}#asalmenu > ul > li{float:none;background:#fff}#asalmenu ul ul li:hover > a,#asalmenu ul ul li a:hover{color:#fff}#asalmenu ul ul li.has-sub:hover,#asalmenu ul li.has-sub ul li.has-sub ul li:hover{background:#2d2d2d}#asalmenu >ul >li.has-sub >a i{margin:auto;position:absolute;right:0;text-align:center;width:48px;font-size:20px;line-height:20px}#searchca.open{position:fixed;top:46px;left:0;right:0;z-index:999}#asalmenu > ul ul > li.has-sub > a i{transform:none}}
/* Header */
#header{padding:0;margin:0}#header-inner{text-align:center;display:inline-block}#header h1,#header h2{color:#000;margin:0;font-size:1.6rem;font-weight:600;line-height:normal;text-align:center}#header h1 a,#header h2 a{color:#000}#header h1 a:hover,#header h2 a:hover{color:#e74c3c}.descriptionwrapper{display:none}.header-logo{float:left;padding:0 16px}.mudah-head{display:table;width:100%;height:100%}.mudah-sub-head{margin:auto;padding:0 10px;max-width:990px}#menuheady img{max-height:35px}
/* Search Form */
.search-icon a{background:#e74c3c;color:#fff;font-size:16px;padding:0;position:absolute;right:15px;top:13px;width:75px;height:35px;line-height:35px;text-align:center;border-radius:99em;transition:all .3s}.search-icon a:hover{background:#c0392b;color:#fff}#searchca{color:#7f8c8d;margin:auto;transition:all 0.1s ease-in-out;display:none}#searchca.open{background-color:#fff;background-size:400% 400%;animation:Gradient 15s ease infinite;display:block;position:relative;border-top:1px solid rgba(0,0,0,0.05);box-shadow:0 3px 3px rgba(0,0,0,0.05)}#searchca input[type="search"]{position:relative;background:transparent;color:#222;border:0;width:100%;font-size:16px;outline:none;padding:18px 20px;margin:auto}#searchca .close{position:absolute;top:15px;right:20px;color:#222;background-color:transparent;opacity:1;font-size:28px;border:none;outline:none;padding:0;z-index:9;transition:all .3s}#searchca .close:hover{cursor:pointer;opacity:0.8}#searchca form{margin:auto;max-width:990px;position:relative}
#searchca input[type="search"]::placeholder{color:#ccc;opacity:1}#searchca input[type="search"]:-ms-input-placeholder{color:#ccc}#searchca input[type="search"]::-ms-input-placeholder{color:#ccc}
/* Animation */
@keyframes moccaShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* Modal Box */
.asalseonotif,.matilampu{visibility:hidden;opacity:0}.asalseonotif{background:#fff;position:fixed;padding:25px;top:20%;transform:scale(1.2);max-width:450px;margin:auto;left:0;right:0;z-index:100;border-radius:4px;box-shadow:0 10px 3rem -1rem rgba(0,0,0,0.5);transition:all .5s}.asalseonotif button{border:none;position:absolute;margin-top:17px;right:30px;cursor:pointer;background:#e8e8e8;padding-left:7px;outline:0}a.waves-light.close-sf{background:#e74c3c;color:#fff;margin-top:15px;display:inline-block;padding:6px 13px;border-radius:3px;float:right;font-size:13px}a.waves-light.close-sf:hover{background:#c0392b;color:#fff}.matilampu{position:fixed;top:0;background:rgba(255,255,255,0.39);left:0;right:0;bottom:0;margin:0;z-index:99;transition:all .4s ease-in-out}.asalseotitle{margin-bottom:15px;font-weight:600}.asalseonotif.aktif,.matilampu.aktif{visibility:visible;opacity:1}.asalseonotif.aktif{transform:scale(1)}.icx{position:absolute;top:10px;right:15px;transform:rotate(180deg);transition:all .3s}.icx:before{content:'\f00d';font-family:fontawesome;font-size:18px;color:#ccc;transition:all .3s}.icx:hover{transform:rotate(360deg)}.icx:hover:before{color:#222}.notiftext{font-size:14px}a.shownotif{background:#f39c12;color:#fff;font-size:16px;padding:0;position:absolute;right:100px;top:13px;width:35px;height:35px;line-height:35px;text-align:center;border-radius:99em;transition:all .3s}a.shownotif:hover{background:#e67e22;color:#fff}
#menuheady.aktif,#pagepix.aktif,#downpix.aktif{filter-blur(4px):;-webkit-filter:blur(4px)}
@media screen and (max-width:768px){.asalseonotif,a.shownotif,.matilampu{display:none}}In the above CSS code I have separated styles of navigation menu, search bar and modal popup you can remove any if you want.
Also I have written the code for animations which is used to make this navigation work properly and beautifully.
The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.
I have used @media rule in the above css code for making this project responsive for all kind of devices.
These are some css selectors that are used in the above css code with their description and example.
| Selector | Example | Example description |
|---|---|---|
| :hover | a:hover | Selects links on mouse over |
| :last-child | p:last-child | Selects every <p> elements that is the last child of its parent |
| -webkit- | -webkit-color:red; | This prefix is used to specify style for any element On Chrome & Safari Browsers the color of text will be red. |
| -o- | -o-color:blue; | This prefix is used to specify style for any element On Opera Browser the color of text will be blue. |
| -moz- | -moz-color:green; | This prefix is used to specify style for any element On Mozilla or Firefox Browser the color of text will be green. |
| -ms- | -ms-color:yellow; | This prefix is used to specify style for any element On Internet Explorer Browser the color of text will be yellow. |
So we have written HTML markup and customized it using CSS and now we will add some functionality in this project (Responsive Navigation Menu With Search Bar And Popup) to make it work as we want it to be.
To make this project (Responsive Navigation Menu With Search Bar And Popup) work properly for that we will use JavaScript or jquery in some cases which is a javascript library.
This is the javascript code for our project you can also copy it by simple clicking once and code will be copied automatically.
JavaScript Code for Responsive Navigation Menu With Search Bar And Popup :
// Nav menu
!function(n){n.fn.menumaker=function(s){var e=n(this),i=n.extend({format:"dropdown",sticky:!1},s);return this.each(function(){return n(this).find(".buttonx").on("click",function(){n(this).toggleClass("menu-opened");var s=n(this).next("ul");s.hasClass("open")?s.slideToggle().removeClass("open"):(s.slideToggle().addClass("open"),"dropdown"===i.format&&s.find("ul").show())}),e.find("li ul").parent().addClass("has-sub"),multiTg=function(){e.find(".has-sub").prepend('<span class="submenu-button"></span>'),e.find(".submenu-button").on("click",function(){n(this).toggleClass("submenu-opened"),n(this).siblings("ul").hasClass("open")?n(this).siblings("ul").removeClass("open").slideToggle():n(this).siblings("ul").addClass("open").slideToggle()})},"multitoggle"===i.format?multiTg():e.addClass("dropdown"),!0===i.sticky&&e.css("position","fixed"),resizeFix=function(){n(window).width()>1e3&&e.find("ul").show(),n(window).width()<=1e3&&e.find("ul").hide().removeClass("open")},resizeFix(),n(window).on("resize",resizeFix)})}}(jQuery),function(n){n(document).ready(function(){n("#asalmenu").menumaker({format:"multitoggle"})})}(jQuery);
/*Modal Box*/
$(document)['ready'](function () {
$('.close-sf')['click'](function () {
$('.asalseonotif,.matilampu,#menuheady,#pagepix,#downpix')['removeClass']('aktif')
})
}), $(document)['ready'](function () {
$('.shownotif')['click'](function () {
$('.asalseonotif,.matilampu,#menuheady,#pagepix,#downpix')['toggleClass']('aktif')
})
});
// Search form
$(function(){$('a[href="#searchca"]').on("click",function(e){e.preventDefault(),$("#searchca").addClass("open"),$('#searchca > form > input[type="search"]').focus()}),$("#searchca, #searchca button.close").on("click keyup",function(e){e.target!=this&&"close"!=e.target.className&&27!=e.keyCode||$(this).removeClass("open")})});I have used some javascript/Jquery BuiltIn functions in the above code here is the list of them with description.
| Function | Description |
|---|---|
| event.preventDefault() | prevents the default action of the event |
| event.target | Returns which DOM element triggered the event |
| focus() | Attaches/Triggers the focus event |
| on() | Attaches event handlers to elements |
| ready() | Specifies a function to execute when the DOM is fully loaded |
| toggle() | Removed in version 1.9. Attaches two or more functions to toggle between for the click event |
I have also separated the JavaScript code for different things like for navigation menu, modal popup and search bar by using JavaScript comments you can remove any code if you want.
You can also add this navigation menu into your blogger blog and wordpress site if you want.
Denouement :
So here we are, We have done and our project Responsive Navigation Menu With Search Bar And Popup is ready now you can copy and combine all the codes provided above into single html file and have fun.If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment i will try to resolve the issue as soon as possible.
Download Project (Responsive Navigation Menu With Search Bar And Popup) File :
Responsive N... Popup.zip
File Size 5.68 KB
Click the download button and you will be redirected to download page from where you can download project files.
If you face any difficulty in downloading the project file leave you comment below i will resolve that issue as soon as possible.
That's pretty much today's topic is completed and now I am winding it up and in the last I want to say that subscribe to the newsletters of this blog.
We have build Responsive Navigation Menu with Search Bar and Popup in today's article.
Thank you !
source:softwebtuts.com
0 comments for Responsive Navigation Menu with Search Bar and Popup