How to Create a Navigation Menu with an Input Field Inside it?

How to Add Icons in Navigation Drawer in Android?

JavaScript Program for Nth Catlan Numbers

For some web applications, it might be necessary to include an input field within the navigation menu. This input field can serve as a search box allowing users to search for anything on the website.

Approach

Create a <nav> element to contain the navigation menu.
Inside the <nav>, create a <ul> element to hold the menu items.
Within the <ul>, create <li> elements for each menu item and an additional <li> for the search input field.
Inside the search input <li>, add an <input> element.
Style the navigation menu container (<nav> element) to provide a background color and padding.
Style the <li> elements to create spacing between menu items.
Style the search input <input> element to align it to the right and add padding.

Example: To demonstrate the Implementation to create a navigation menu with an input field inside of it.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <style>
        .navigation-menu {
            background-color: green;
            padding: 10px 20px;
        }

        .navigation-menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .navigation-menu li {
            margin-right: 20px;
        }

        .navigation-menu li:last-child {
            margin-right: 0;
            margin-left: auto;
        }

        .navigation-menu a {
            color: #fff;
            text-decoration: none;
        }

        .search-box input {
            padding: 5px 10px;
            border: 1px solid #ccc;
        }

        @media (max-width: 768px) {
            .navigation-menu ul {
                flex-direction: column;
            }

            .navigation-menu li {
                margin-bottom: 10px;
            }

            .navigation-menu li:last-child {
                margin-bottom: 0;
            }
        }
    </style>
</head>

<body>

    <nav class="navigation-menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
            <li class="search-box"><input type="text" 
                placeholder="Search...">
              </li>
        </ul>
    </nav>
    <div>
        <h2>Wlcome to w3wiki!</h2>
    </div>

</body>

</html>

Output:

Input field inside of Navigation menu

Tags:

#CSS-Questions #CSS #Web Technologies

How to Add Icons in Navigation Drawer in Android?

JavaScript Program for Nth Catlan Numbers

How to Create a Navigation Menu with an Input Field Inside it?

Approach

Contact Us