Author: battleKing warehouse: Github, CodePen blog: CSDN, nuggets feedback email: [email protected] Special statement: original is not easy, shall not be reproduced without authorization or plagiarism, if need to be reproduced can contact the author authorized

background

Placing a search box in the top menu bar is a very common scenario, but if the top menu bar is already crowded, putting a full search box in it doesn’t look pretty. So it’s also a pretty common practice to just put one search icon and display the whole search box when you need it. This is not only more beautiful and save a lot of display space, in the limited space to show as many things as possible, so it is favored by many enterprises.

Import the Font Awesome icon library

<script src="https://use.fontawesome.com/ab349f0a54.js" ></script>
Copy the code

Add HTML

<form>
    <div class="search_box">
        <input class="search" type="text" name="search" placeholder="Search...">
        <i class="fa fa-search fa-lg" aria-hidden="true"></i>
    </div>
</form>
Copy the code

Add the CSS

We need to set up a nice search box CSS style.

For the outermost.search_box we set.search and.fa-search in position: relative to position: absolute

for.searchSearch box style

  1. Set the box model tobox-sizing: border-box
  2. The width is set towidth: 150px
  3. The border is set toborder: 5px solid #ccc
  4. Now web pages are popular with rounded corners, in order to keep the style consistent, we set the rounded corners toborder-radius: 5px
  5. Font size is set tofont-size: 16px
  6. The background color is usually set to the same as the navigation bar, but in this case it’s whitebackground-color: white
  7. Align the text with the search iconpadding: 12px 20px 12px 40px
  8. Sets the speed at which the animation changesThe transition: width 0.4 s ease - in-out
  9. Compatible with Chrome- its - the transition: width 0.4 s ease - in-out

The core step is to set the width property to 100% when searching for focus

for.fa-searchSearch icon style

  1. The purpose of setting up a prominent search icon is to inform the user that this is a search box
  2. The search icon is centeredtop: 14px 和 left: 14px
  3. Set the color of the search icon to the same as the text in the search box color:#b2b2b2
.search_box{
    position: relative;
}

.search {
    width: 150px;
    position: absolute;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    background-color: white;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4 s ease-in-out;
    transition: width 0.4 s ease-in-out;
}

.search:focus {
    width: 100%;
}

.fa-search {
    position: absolute;
    top: 14px;
    left: 14px;
    color:#b2b2b2;
}
Copy the code

The final result

Add JS

If we want to implement something like Huawei search box, where other elements in the same row disappear when the search box is opened, then we need to use JS to manipulate the DOM.

Implementing this feature is simple

  1. We just need to add one of the following red box elements when the search box gets focusclass="hidden_box"theclassIt containsvisibility:hidden.
  2. Delete when losing focusclass = "hidden_box".

New HTML section

<div class="nav_top">
    <text>Home page</text>
    <text>start</text>
    <text>Mobile phone</text>
    <text>The tablet</text>
    <text>Laptop computer</text>
</div>
Copy the code

New CSS

.nav_top {
    position: absolute;
    right: 20px;
    height: 46px;
    line-height: 46px;
}

.hidden_box {
    visibility: hidden;
}
Copy the code

JS part

document.querySelector(".search").addEventListener("focus",addClass);
document.querySelector(".search").addEventListener("blur",removeClass);

function addClass(){
    document.querySelector(".nav_top").classList.add("hidden_box")}function removeClass(){
    document.querySelector(".nav_top").classList.remove("hidden_box")}Copy the code

The final result

❤️ thank you

If this article is helpful to you, please support it by clicking a “like”. Your “like” is my motivation for writing.

If you like this article, you can “like” + “favorites” + “forward” to more friends.