Bootstrap 5：我需要做什么才能在导航栏中有一个搜索图标，当我单击它时，它会在导航栏下方显示一个搜索框？

Question

This is what I have done so far for the navbar

I need to put a search icon beside log in button. When I click the search icon, a search box will appear under the navbar that look something like in the picture below. My navbar is transparent, position is relative and the header beneath is a video loop with autoplay, position is relative.

Taken from DataCamp website

I have tried free templates codes from other sites but it will give weird results when combined with my existing code and I have tried to change the template codes, still negative results. If possible I want to minimize the usage of js and css so that I can tweak the look easily without hassling too much. Thank you for the help.

Answer 1

You need a flag shouldShowSearchInput . By default, it should be false.

You can use it to change display of Search Input Element to be none or block

When you click SearchIcon changes the value of that flag.

Answer 2

You just need to position the search box under the navbar. Then add a class that will make it visible and add and event listener to the button that toggles that class on and off.

See snippet below

 document.querySelector(`#btn-search`).addEventListener(`click`, function() { document.querySelector(`#search`).classList.toggle(`show-search`); });

 #search { bottom: 0; right: 0; width: 25%; z-index: -1; transition: transform 500ms; position: absolute; }.show-search { transform: translate(0, 100%); }

 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap.min.css' integrity='sha512-siwe/oXMhSjGCwLn+scraPOWrJxHlUgMBMZXdPe2Tnk3I0x3ESCoLz7WZ5NTH6SZrywMY+PB1cjyqJ5jAluCOg==' crossorigin='anonymous' /> <nav class="navbar navbar-dark navbar-expand bg-dark py-3 position-relative"> <div class="container"> <ul class="navbar-nav me-auto"> <li class="nav-item"> <a class="nav-link active" href="#">First Item</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Second Item</a> </li> </ul> <div class="d-block"> <input type="search" id="search" class="form-control position-absolute shadow-sm" placeholder="Search"> <a class="btn btn-light me-2" role="button" id="btn-search" href="#"></a> <a class="btn btn-primary" role="button" href="#">Login</a> </div> </div> </nav>

You could also use the off-canvas component baked into bootstrap: https://getbootstrap.com/docs/5.2/components/offcanvas/

See off canvas snippet below

 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap.min.css' integrity='sha512-siwe/oXMhSjGCwLn+scraPOWrJxHlUgMBMZXdPe2Tnk3I0x3ESCoLz7WZ5NTH6SZrywMY+PB1cjyqJ5jAluCOg==' crossorigin='anonymous' /> <nav class="navbar navbar-dark navbar-expand bg-dark py-3 position-relative"> <div class="container"> <ul class="navbar-nav me-auto"> <li class="nav-item"> <a class="nav-link active" href="#">First Item</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Second Item</a> </li> </ul> <div class="d-block"> <button class="btn btn-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight"></button> <a class="btn btn-primary" role="button" href="#">Login</a> </div> </div> </nav> <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button> </div> <div class="offcanvas-body"> <input type="search" id="search" class="form-control shadow-sm" placeholder="Search"> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.bundle.min.js' integrity='sha512-1TK4hjCY5+E9H3r5+05bEGbKGyK506WaDPfPe1s/ihwRjr6OtL43zJLzOFQ+/zciONEd+sp7LwrfOCnyukPSsg==' crossorigin='anonymous'></script>