Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a navigation menu with an input field inside of it?
A navigation menu with an input field is commonly used to provide users with quick search functionality within the website header. The search input is typically positioned on the right side of the navigation using CSS float property.
Syntax
nav {
/* Navigation container styles */
}
input[type="text"] {
float: right;
/* Input positioning and styling */
}
Creating the Navigation Structure
The <nav> element contains both navigation links and the search input field −
<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>
Styling the Navigation Container
The navigation container uses overflow: auto to handle floating elements properly −
nav {
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
Styling Navigation Links
Links are displayed inline with proper spacing and hover effects −
.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);
}
Positioning the Input Field
The search input is positioned on the right using the float property −
input[type="text"] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 8px;
font-size: 17px;
}
Complete Example
Here's a complete navigation menu with an integrated search input field −
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0px;
margin-top: 10px;
padding: 0px;
font-family: Arial, sans-serif;
}
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);
}
.selected {
background-color: rgb(0, 18, 43);
}
input[type="text"] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 8px;
font-size: 17px;
border: 1px solid #ccc;
border-radius: 4px;
}
</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>
A dark navigation bar appears with purple navigation links on the left (Home, Login, Register, Contact Us, More Info) and a search input field positioned on the right. The Home link has a dark blue background indicating it's selected, and links show gray background on hover.
Conclusion
Creating a navigation menu with an input field involves using the float: right property to position the search box. The overflow: auto on the nav container ensures proper layout handling of floated elements.
647 Views
