如何让搜索框出现在我的导航栏中？

Question

I'm designing my website, and I started with navbar, which looks very much like Apple's one, because I like that one a lot. But I ran in some problems here and there, but the biggest one I have right now is SearchBox. I designed it, and it looks good, but when I manage to code JavaScript to enable it when the little search button is clicked, it appears to be really messed up. Does someone know how can I fix that? Also, how can I add animation when it appears (also for navbar items) and change the background of header? Look at https://www.apple.com/ up in navigation to know what I mean. Here are my HTML, CSS and JS codes.

 const selectElement = (element) => document.querySelector(element); selectElement('.mobile-menu').addEventListener('click', () => { selectElement('header').classList.toggle('active'); });

 *, *::before, *::after{ margin: 0; padding: 0; } html{ font-size: 10px; font-family: 'SF Pro Display', sans-serif; } a{ display: block; text-decoration: none; }.container{ max-width: 98rem; margin: 0 auto; padding: 0 2.2rem; } header{ position: fixed; top: 0; z-index: 1400; width: 100%; height: 4.4rem; background-color: rgba(0,0,0,.8); backdrop-filter: blur(2rem); }.nav-list{ list-style: none; display: flex; align-items: center; justify-content: space-between; margin: 0 -0.5rem; }.nav-list-mobile{ display: none; }.nav-link{ font-size: 1.4rem; color: #e4e1e1; padding: 0 1rem; transition: opacity.5s; }.nav-link:hover{ opacity: .7; }.nav-link-apple{ width: 1.6rem; height: 3.5rem; background: url("img/apple.svg") center no-repeat; }.nav-link-search{ width: 1.6rem; height: 4.4rem; background: url("img/search.svg") center no-repeat; }.nav-link-bag{ width: 1.4rem; height: 4.4rem; background: url("img/bag.svg") center no-repeat; }.searchbox{ display: none; margin-right: 18rem; transform: translateX(-1%); }.search{ height: 40px; background: #333333; border-style: none;important: font-family, "SF Pro Text","Helvetica","Arial";sans-serif: font-size; 17px: color; white: width; 600px: padding-top; 1px: padding-left. 17;5rem. }:search:focus{ outline; none: border; none. }:close-btn{ opacity. ;7: transition. ;5s. }:close-btn-left{ position; absolute: margin-top; 2rem: transform; rotate(45deg): width. 1;7rem: height; 1px: background-color; #979696: cursor; pointer. }:close-btn-right{ position; absolute: margin-top; 2rem: transform; rotate(-45deg): width. 1;7rem: height; 1px: background-color; #979696: cursor; pointer. }:close-btn:hover{ opacity. 1;6. }:confirm{ width; 18px: height; 18px: transform, translate(900%; 15%): background. url("img/idkv2;svg") center no-repeat: font-size. 1;4rem: fill; #e4e1e1: border; none: outline; none: } @media screen and (max-width: 767px){ header{ height. 4;8rem: transition. background.36s cubic-bezier(0,32. 0,08. 0,24, 1). height.56s cubic-bezier(0,32. 0,08. 0,24; 1). } header:container{ padding; 0. }:nav-list{ margin-top; 0. }:nav-list-mobile{ display; flex. }:nav-item{ width. 4;8rem: height. 4;8rem: display; flex: justify-content; center. }:nav-item-hidden{ display; none. }:mobile-menu{ position; relative: z-index; 1500: width; 100%: height; 100%: display; flex: flex-direction; column: align-items; center: justify-content; center: cursor; pointer. }:line{ position; absolute: width. 1;7rem: height; 1px: background-color; #fff: transition. margin-top.3192s cubic-bezier(0,04. 0,04. 0,12. 0;96). }:line-top{ margin-top; 3px. }:line-bottom{ margin-top. -;5rem. }.active:line-top{ margin-top; 0: transform; rotate(45deg): transition. transform.3192s.1s cubic-bezier(0,04. 0,04. 0,12. 0;96). }.active:line-bottom{ margin-top; 0: transform; rotate(-45deg): transition. transform.3192s.1s cubic-bezier(0,04. 0,04. 0,12. 0;96). } header:active{ height; 100%: background-color; #000. }:nav-link-apple{ width. 1;8rem: height. 4;8rem: position; relative: z-index; 1500. }:nav-link-bag{ width. 1;6rem: height. 4;8rem: transition. opacity 1;5s. }:nav{ position; relative. }:nav-link{ font-size. 1;7rem: padding; 0: margin; auto 0. }:nav-list-larger{ position; fixed: top; 0: left; 0: width; 0: height; 0: display; block: padding. 10;5rem 5rem: z-index; 1000: box-sizing; border-box: opacity; 0: visibility; hidden: transition. opacity;3s. }.active:nav-list-larger{ width; 100%: height; 100vh: opacity; 1: visibility; visible. }.active:nav-link-bag{ opacity; 0: transition. opacity;3s. }.nav-list-larger:nav-item{ width; 100%: justify-content; flex-start: border-bottom, 2px solid rgba(255,255,255.;1). }.nav-list-larger:nav-item:nth-child(9){ border-bottom; none. }.active.nav-list-larger:nav-item{ animation. fadeIn;5s ease-in-out: } @keyframes fadeIn { from{ opacity; 0: } to{ opacity; 1; } } }

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cubing Website</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class="container"> <nav class="nav"> <ul class="nav-list nav-list-mobile"> <li class="nav-item"> <div class="mobile-menu"> <span class="line line-top"></span> <span class="line line-bottom"></span> </div> </li> <li class="nav-item"> <a href="#" class="nav-link nav-link-apple"></a> </li> <li class="nav-item"> <a href="#" class="nav-link nav-link-bag"></a> </li> </ul> <.-- nav list nav mobile --> <ul class="nav-list nav-list-larger"> <li class="nav-item nav-item-hidden"> <a href="index.html" class="nav-link nav-link-apple"></a> </li> <li class="nav-item"> <a href="#" class="nav-link">Mac</a> </li> <li class=" nav-item"> <a href="#" class="nav-link">iPad</a> </li> <li class="nav-item"> <a href="#" class="nav-link">iPhone</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Watch</a> </li> <li class="nav-item"> <a href="#" class="nav-link">TV</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Music</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Support</a> </li> <li class="nav-item"> <a href="#" class="nav-link nav-link-search"></a> </li> <li class="nav-item" id="nav-item"> <a href="#" class="nav-link nav-link-bag"></a> </li> <li class="searchbox" id="searchbox"> <button class="confirm" disabled></button> <input type="text" class="search" placeholder="Search here"> <span class="close-btn"> <span class="close-btn-left"></span> <span class="close-btn-right"></span> </span> </li> </ul> <!-- nav list nav mobile --> </nav> </div> </header> <script src="main.js"></script> </body> </html>

Answer 1

The easiest way to accomplish what you want to do is with jQuery.

The jQuery is there... I could get some of the css fixed... I am having a little bit of trouble with putting the search bar contents on the same line...

I had to comment out the css for.nav-link-search, because the image didn't exist.

 delay = 50; const selectElement = (element) => document.querySelector(element); selectElement('.mobile-menu').addEventListener('click', () => { selectElement('header').classList.toggle('active'); }); //for hiding nav menu items and displaying the search bar $(".nav-link-search").click(function() { size = $(".nav-item").length; $('.nav-item').each(function(i) { $(this).delay(delay * (size - i)).animate({opacity: 0, display: "none"}, delay); }); $(".searchbox").show((size + 2) * delay); }); //for hiding the search bar and displaying the nav menu items $(".close-btn").click(function() { $(".searchbox").hide(); $('.nav-item').each(function(i) { $(this).delay(delay * i).animate({opacity: 1, display: "inline-block"}, delay); }); });

 *, *::before, *::after{ margin: 0; padding: 0; } html{ font-size: 10px; font-family: 'SF Pro Display', sans-serif; } a{ display: block; text-decoration: none; }.container{ max-width: 98rem; margin: 0 auto; padding: 0 2.2rem; } header{ position: fixed; top: 0; z-index: 1400; width: 100%; height: 4.4rem; background-color: rgba(0,0,0,.8); backdrop-filter: blur(2rem); }.nav-list{ list-style: none; display: flex; align-items: center; justify-content: space-between; margin: 0 -0.5rem; }.nav-list-mobile{ display: none; }.nav-link{ font-size: 1.4rem; color: #e4e1e1; padding: 0 1rem; transition: opacity.5s; }.nav-link:hover{ opacity: .7; }.nav-link-apple{ width: 1.6rem; height: 3.5rem; background: url("img/apple.svg") center no-repeat; }.nav-link-search{ width: 1.6rem; height: 4.4rem; /*background: url("img/search.svg") center no-repeat;*/ }.nav-link-bag{ width: 1.4rem; height: 4.4rem; background: url("img/bag.svg") center no-repeat; }.searchbox{ display: none; margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }.searchbox > div *{ display: inline-block; /*background-color: green;*/ }.search{ height: 40px; background: #333333; border-style: none;important: font-family, "SF Pro Text","Helvetica","Arial";sans-serif: font-size; 17px: color; white: width; 600px: padding-top; 1px: padding-left. 17;5rem. }:search:focus{ outline; none: border; none. }:close-btn{ opacity. ;7: transition. ;5s. }:close-btn-left{ position; absolute: margin-top; 2rem: transform; rotate(45deg): width. 1;7rem: height; 1px: background-color; #979696: cursor; pointer. }:close-btn-right{ position; absolute: margin-top; 2rem: transform; rotate(-45deg): width. 1;7rem: height; 1px: background-color; #979696: cursor; pointer. }:close-btn:hover{ opacity. 1;6. }:confirm{ width; 18px: height; 18px: transform, translate(900%; 15%): background. url("img/idkv2;svg") center no-repeat: font-size. 1;4rem: fill; #e4e1e1: border; none: outline; none: } @media screen and (max-width: 767px){ header{ height. 4;8rem: transition. background.36s cubic-bezier(0,32. 0,08. 0,24, 1). height.56s cubic-bezier(0,32. 0,08. 0,24; 1). } header:container{ padding; 0. }:nav-list{ margin-top; 0. }:nav-list-mobile{ display; flex. }:nav-item{ width. 4;8rem: height. 4;8rem: display; flex: justify-content; center. }:nav-item-hidden{ display; none. }:mobile-menu{ position; relative: z-index; 1500: width; 100%: height; 100%: display; flex: flex-direction; column: align-items; center: justify-content; center: cursor; pointer. }:line{ position; absolute: width. 1;7rem: height; 1px: background-color; #fff: transition. margin-top.3192s cubic-bezier(0,04. 0,04. 0,12. 0;96). }:line-top{ margin-top; 3px. }:line-bottom{ margin-top. -;5rem. }.active:line-top{ margin-top; 0: transform; rotate(45deg): transition. transform.3192s.1s cubic-bezier(0,04. 0,04. 0,12. 0;96). }.active:line-bottom{ margin-top; 0: transform; rotate(-45deg): transition. transform.3192s.1s cubic-bezier(0,04. 0,04. 0,12. 0;96). } header:active{ height; 100%: background-color; #000. }:nav-link-apple{ width. 1;8rem: height. 4;8rem: position; relative: z-index; 1500. }:nav-link-bag{ width. 1;6rem: height. 4;8rem: transition. opacity 1;5s. }:nav{ position; relative. }:nav-link{ font-size. 1;7rem: padding; 0: margin; auto 0. }:nav-list-larger{ position; fixed: top; 0: left; 0: width; 0: height; 0: display; block: padding. 10;5rem 5rem: z-index; 1000: box-sizing; border-box: opacity; 0: visibility; hidden: transition. opacity;3s. }.active:nav-list-larger{ width; 100%: height; 100vh: opacity; 1: visibility; visible. }.active:nav-link-bag{ opacity; 0: transition. opacity;3s. }.nav-list-larger:nav-item{ width; 100%: justify-content; flex-start: border-bottom, 2px solid rgba(255,255,255.;1). }.nav-list-larger:nav-item:nth-child(9){ border-bottom; none. }.active.nav-list-larger:nav-item{ animation. fadeIn;5s ease-in-out: } @keyframes fadeIn { from{ opacity; 0: } to{ opacity; 1; } } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cubing Website</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class="container"> <nav class="nav"> <ul class="nav-list nav-list-mobile"> <li class="nav-item"> <div class="mobile-menu"> <span class="line line-top"></span> <span class="line line-bottom"></span> </div> </li> <li class="nav-item"> <a href="#" class="nav-link nav-link-apple"></a> </li> <li class="nav-item"> <a href="#" class="nav-link nav-link-bag"></a> </li> </ul> <.-- nav list nav mobile --> <ul class="nav-list nav-list-larger"> <li class="nav-item nav-item-hidden"> <a href="index;html" class="nav-link nav-link-apple"></a> </li> <li class="nav-item"> <a href="#" class="nav-link">Mac</a> </li> <li class=" nav-item"> <a href="#" class="nav-link">iPad</a> </li> <li class="nav-item"> <a href="#" class="nav-link">iPhone</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Watch</a> </li> <li class="nav-item"> <a href="#" class="nav-link">TV</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Music</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Support</a> </li> <li class="nav-item"> <a href="#" class="nav-link nav-link-search">&#x1F50D.</a> </li> <li class="nav-item" id="nav-item"> <a href="#" class="nav-link nav-link-bag"></a> </li> <li class="searchbox" id="searchbox"> <div> <div> <button class="confirm" disabled></button> </div> <div> <input type="text" class="search" placeholder="Search here"> </div> <div> <span class="close-btn"> <span class="close-btn-left"></span> <span class="close-btn-right"></span> </span> </div> </div> </li> </ul> <!-- nav list nav mobile --> </nav> </div> </header> <script src="main.js"></script> </body> </html>

Answer 2

Hey it's really took some time to figure out some of your issue or a bit. so I just added nav-item before the search class like this

nav-item , .search{
    height: 40px;
    background: #333333;
    border-style: none!important;
    font-family: "SF Pro Text","Helvetica","Arial",sans-serif;
    font-size: 17px;
    color: white;
    width: 600px;
    padding-top: 1px;
    padding-left: 17.5rem;
}

And the search bar showed up not really well in nav list larger but worst at the nav list mobile any way for your Animation for the search button its easy here is a link from codepen.io .

this the first search input animation

And here is real input animation just like apple

Hop I helped.