Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a navigation menu with an input field inside of it?
On a web page, you may need to place an input field on a navigation menu. Such input field can be used as a search box for the users to search anything on the website. To place the search input field on the right, use the float CSS property and set it to the right value.
Create a navigation menu
The <nav> element is used to create a menu on a web page. The menu links are set using the <a> element −
<nav> <a class="links selected" href="#">Home</a> <a class="links" href="#">Login</a> <a class="links" href="#">Register</a> <a class="links" href="#">Contact Us</a> <a class="links" href="#">More Info</a> <input type="text" placeholder="Search Here.." /> </nav>
Style and display the menu links
The links in the menu are displayed using the display property with the inline-block value. This will set the height and width. To remove the default underline from the menu links, the text_decoration property is set to none −
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(100, 100, 100);
}
Position the menu
To position the menu, use the overflow and the height property. Set both the properties to auto. This will position the menu and also adjust its height. The width is set to 100% to set the width of the menu to be 100% of its parent container's width −
nav {
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
Create the input field
The <input> element creates and input field. We have set it inside the <nav> to place it in the menu. Also set the placeholder to allow the users to understand the purpose of the search field i.e. to search here −
<input type="text" placeholder="Search Here.." />
Position the input field
The float property is used to position the input field on the right −
input[type="text"] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 8px;
font-size: 17px;
}
Example
The following is the code to create a navigation menu with an input field inside of it −
<!DOCTYPE html>
<html>
<head>
<title>HTML Document</title>
<style>
body {
margin: 0px;
margin-top: 10px;
padding: 0px;
}
nav {
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(100, 100, 100);
}
input[type="text"] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 8px;
font-size: 17px;
}
.selected {
background-color: rgb(0, 18, 43);
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#">Home</a>
<a class="links" href="#">Login</a>
<a class="links" href="#">Register</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">More Info</a>
<input type="text" placeholder="Search Here.." />
</nav>
</body>
</html>
310 Views
