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>