Blog

How to Add Search Box to Navigation Menu Bar

Posted: March 23, 2018  |  By Andrei Pogorelov


How to Add Search Box to Navigation Menu Bar

It is no secret that the menu is the most convenient, simple and fast way to navigate. Also, existing research shows that most people look for a search box even if a website consists of only a few pages. That's why a combination of navigation menu and search input field is so important to the success of your website.

In this post, I will describe how to add a search box to your navigation menu.


Add New HTML Element

As usual, I recommend using Drop Down Menu Generator - an easy-to-use online tool that allows creating navigation menu in a few minutes.

Open the Structure Tree and click on the "Add HTML Element" button; the new element will be added to the menu structure.


Search Box: Add New HTML Element

Next, insert the Search Box code into the HTML element. Below is the basic sample (it opens Google Search in new window):

<form role="search" method="get" action="http://google.com/search?q=" target="_blank">
    <input type="text" name="q" placeholder="Search..." />
    <button type="submit"></button>
</form>


The form element is used as a wrapper. The input element is used as a search field. The button is required to submit the form.

The input element has the attribute name="q". The q is the most common name given to search inputs. When submitted, the data name/value pair sent to the server will be q=searchterm.

To search within a specific website (for example "microsoft.com"), use the code sample below:

<form role="search" method="get" action="http://google.com/search?q=" target="_blank" onsubmit="this.q.value='site:microsoft.com '+this.s.value;">
   <input type="text" name="s" placeholder="Search..." class="SearchText" />
   <input type="hidden" name="q" />
   <button type="submit" class="SearchButton" title="Submit the search"></button>
</form>



Style Your Search Box

By default, the Search Box looks a bit outdated. To improve the appearance, we use CSS (Cascading Style Sheets) code.

The final complete Search Box code consists of the CSS section and the Search Box form. The submit button is accompanied by the magnifying-glass icon.

<style type="text/css">

.SearchText
{
   border:solid 1px #AA822F;
   border-radius:4px; 
   padding:4px;
   padding-right:32px;
   width:180px;
   height:18px;
}

.SearchButton
{
   border:none;
   background-color:transparent;
   margin-right:6px;
   margin-left:-24px;
   line-height:16px;
   height:16px;
   cursor:pointer;
}

.SearchButton:before
{
   font-size:16px;
   font-family: 'MG_Icons', 'MG_Icons24';
   content: "\e72c"; /*magnifying-glass*/
   color: #CC9B39;
}

</style>

<form role="search" method="get" action="http://google.com/search?q=" target="_blank">
   <input type="text" name="q" placeholder="Search..." class="SearchText" />
   <button type="submit" class="SearchButton" title="Submit the search"></button>
</form>



Set the Location

For search, users first look at the upper-right corner of the page layout. Thus, it is strongly recommended to place a search box on the right side of the menu bar. In order to achieve that, just select the Search Box element and enable the "Right float" checkbox.


Search Box: Set the Location

If there is not enough space in the menu bar, make the Search Box as a drop-down element. It's easy.

Create the additional Link element which has only the magnifying-glass icon. Next, drag the Search Box element and put it underneath the "magnifying-glass" element with a small indent on the left.


Search Box as a drop-down element

Finally, set the Submenu Alignment property. It specifies the horizontal submenu position relative to its parent element. Select the "magnifying-glass" element (just click on it), open the Submenu Options and set the property value to the Right.


Further improvements

To provide a better user experience, you can add a drop-down menu with relevant links. For example, it could be the frequently used search queries.

Just add new Link elements to the menu structure and put them underneath the Search Box element with a small indent on the left. If required, set the Submenu Alignment (for the Search Box) to the Right as described above.

The submenu with relevant links appears when the user moves the mouse pointer over the Search Box element.


Search Box: Relevant Links


Live Demo

This Live Demo demonstrates the drop-down menu with the search box on the right side of the menu bar. The search box has relevant sub-links which appear when the user moves the mouse pointer over the search input field.


Conclusion

I hope this short post will help you to create a professional navigation menu, which includes Search Box as a must-have tool for any website. If you need technical assistance, please contact us.


Links

Live Demo: http://www.dropdownmenugenerator.com/Demos/SearchBox/
Menu Generator: http://www.dropdownmenugenerator.com
Question Form: http://www.dropdownmenugenerator.com/ContactUs.aspx

HTML Forms: https://www.w3schools.com/html/html_forms.asp
CSS Style Sheets: http://www.w3.org/TR/html401/present/styles.html






     Menu Generator  06/20/2018 (3719)         Follow Us         Links
   
APNSoft.com
 © 2003-2018 APNSoft.
  All rights reserved.
Uploading ...