Skip to content
Related Articles

Related Articles

Improve Article

Design a Navigation Bar with Animated Search Box

  • Last Updated : 20 Jan, 2021

A navigation bar is one of the most important components of a website. It is the top bar that generally contains all the essential links in form of menus.

In this tutorial, we are going to create a navigation bar with the following components:

  • Menus
  • An animated search bar
  • Login icon
  • Logo

But before moving on to the code let us see what languages we are going to use for the code, for the basic structure and the style we are going to use HTML CSS, and JQuery for the animated search bar.

Approach:

  • Link the jquery and the stylesheet with the HTML code.
  • Design the jquery code for the animated search bar using the toggle class.
  • Using the nav class to structure the elements to be included on the navigation bar.
  • Design each element and the whole navigation bar as a whole using the CSS.

Here is the implementation of the above approach:



The code:

HTML




<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
    <meta charset="utf-8">
  
    <!-- Linking the stylesheet -->
    <link rel="stylesheet" href=
  
    <!-- Linking the Jquery script -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  
    <script>
        $(document).ready(function() {
            $(".fa-search").click(function() {
                $(".icon").toggleClass("active");
                $("input[type='text']").toggleClass("active");
            });
        });
    </script>
  
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  
    <style>
  
        /* Importing the fonts */
        @import url(
        * {
            margin: 0;
            padding: 0;
            outline: none;
            box-sizing: border-box;
            font-family: 'Montserrat', sans-serif;
        }
  
        /* Body of the page */
        body {
            background: #f2f2f2;
        }
  
        /* Styling all the elements in nav as a whole */
        nav {
            background: #037729;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            height: 70px;
            padding: 0 100px;
        }
  
        /* Styling the logo */
        nav .logo {
            color: #fff;
            font-size: 30px;
            font-weight: 600;
            letter-spacing: -1px;
        }
  
        /* Styling all the nav items as a whole */
        nav .nav-items {
            display: flex;
            flex: 1;
            padding: 0 0 0 200px;
        }
  
        /* Styling the list items in the nav tag */
        nav .nav-items li {
            list-style: none;
            padding: 0 10px;
        }
  
        /* Styling each list items */
        nav .nav-items li a {
            color: #fff;
            font-size: 15px;
            font-weight: 500;
            text-decoration: none;
        }
  
        /* Setting the hover colour on the list items*/
          
        nav .nav-items li a:hover {
            color: #19191b;
        }
          
        nav .searchbar {
            position: relative;
        }
  
        /* Styling the search box where the 
            input would be given */
        nav .searchbar input[type="text"] {
            border: 0;
            padding: 0;
            width: 0px;
            height: 35px;
            border-radius: 3px;
            transition: all 0.3s ease;
        }
  
        /* Styling the search bar icon */
        nav .searchbar .icon {
            display: flex;
            position: absolute;
            top: 0;
            right: 0;
            width: 35px;
            height: 100%;
            background: none;
            border-radius: 3px;
            color: #fff;
            transition: all 0.5s 0.3s ease;
        }
          
        nav .searchbar .icon i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer;
        }
          
        nav .searchbar .icon.active {
            background: #062333;
            transition: all 0.3s ease;
        }
          
        nav .searchbar input[type="text"].active {
            width: 250px;
            padding: 0 10px;
            transition: all 0.5s 0.2s ease;
        }
          
        nav .licon li {
            list-style: none;
            display: flex;
        }
          
        nav .licon li a {
            padding: 0 20px;
        }
  
        /* Changing the colour of the login 
            icon when hovered over*/
          
        .fa-user-circle:hover {
            color: #0e0d0d !important;
        }
    </style>
</head>
  
<body>
    <nav>
        <div class="logo">
            GeeksforGeeks
        </div>
  
        <div class="nav-items">
  
            <!-- The Menu items -->
            <li><a href="#">TUTORIALS</a></li>
            <li><a href="#">STUDENT</a></li>
            <li><a href="#">JOBS</a></li>
            <li><a href="#">COURSES</a></li>
        </div>
  
        <!-- Defining the search bars -->
        <div class="searchbar">
            <input type="text" placeholder="search">
            <div class="icon">
                <i class="fas fa-search"></i>
            </div>
        </div>
  
        <!-- Defining the login button -->
        <div class="licon">
            <li>
                <a href="#">
                    <i class="fas fa-user-circle
                        fa-2x" style="color: white;">
                    </i>
                </a>
            </li>
        </div>
    </nav>
</body>
  
</html>

Output:

  • Only adding the HTML file along with the jQuery would produce the following result:

  • Adding the CSS stylesheet along with the HTML and jquery code would produce the final result:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :