Design a Navigation Bar with Animated Search Box

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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">      <!-- 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('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');        * {            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:
CSS-Misc
HTML-Misc
jQuery-Misc
CSS
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.