update submenu
This commit is contained in:
parent
b771d105da
commit
d8fd7b4bbb
3 changed files with 107 additions and 9 deletions
|
@ -88,14 +88,16 @@
|
||||||
</nav>
|
</nav>
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=""><i class='bx bx-search' ></i></a></li>
|
<li><a href="#" open-btn><i class='bx bx-search' ></i></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main></main>
|
<main>
|
||||||
|
|
||||||
|
</main>
|
||||||
<footer></footer>
|
<footer></footer>
|
||||||
|
|
||||||
<div class="overlay" data-overlay></div>
|
<div class="overlay" data-overlay></div>
|
||||||
|
@ -136,6 +138,23 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
<div class="search-modal" data-show>
|
||||||
|
<div class="container">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="search-head">
|
||||||
|
<strong>Search</strong>
|
||||||
|
<a href="#" class="close-trigger" close-btn><i class='bx bx-x'></i></a>
|
||||||
|
</div>
|
||||||
|
<form action="" class="search">
|
||||||
|
<i class='bx bx-search' ></i>
|
||||||
|
<input type="search" placeholder="Search">
|
||||||
|
<input type="submit" value="Submit">
|
||||||
|
<i class='bx bx-right-arrow-alt' ></i>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="main.js"></script>
|
<script src="main.js"></script>
|
||||||
|
|
|
@ -14,4 +14,14 @@ for (let x = 0; x < menuTrigger.length; x++){
|
||||||
})
|
})
|
||||||
closeTrigger[x].addEventListener('click', closeMenu);
|
closeTrigger[x].addEventListener('click', closeMenu);
|
||||||
overlay.addEventListener('click', closeMenu)
|
overlay.addEventListener('click', closeMenu)
|
||||||
}
|
}
|
||||||
|
//submenu
|
||||||
|
const submenu = document.querySelectorAll('.sub-trigger');
|
||||||
|
submenu.forEach((menu) => menu.addEventListener('click', toggle));
|
||||||
|
|
||||||
|
function toggle(){
|
||||||
|
submenu.forEach((item) => item != this ? item.classList.remove('expand') : null);
|
||||||
|
if(this.classList != 'expand'){
|
||||||
|
this.classList.toggle('expand')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -147,7 +147,7 @@ header li a:hover{
|
||||||
.header-main :where(nav > ul > li >a span, .logo){
|
.header-main :where(nav > ul > li >a span, .logo){
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
/*---------- mobile menu ----------*/
|
/*---------- mobile menu & submenu----------*/
|
||||||
.overlay{
|
.overlay{
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -168,7 +168,7 @@ nav.mobile{
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 350px;
|
width: 300px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
max-width: calc(100vw -60px);
|
max-width: calc(100vw -60px);
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
|
@ -240,9 +240,76 @@ nav.mobile .submenu a{
|
||||||
nav.mobile .submenu a:hover{
|
nav.mobile .submenu a:hover{
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
nav.mobile .submenu{
|
||||||
|
transform: translateY(15px);
|
||||||
|
transition: height 0.3s, transform 0.3s;
|
||||||
|
}
|
||||||
|
nav.mobile .expand ~ .submenu{
|
||||||
|
height: auto;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
/*---------- search ----------*/
|
||||||
|
.search-modal{
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
padding: 30px 0;
|
||||||
|
background-color: whitesmoke;
|
||||||
|
z-index: 1000;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.search-modal.active{
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
.search-modal .wrap{
|
||||||
|
max-width: 640px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.search-modal .search-head{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
form.search{
|
||||||
|
position: relative;
|
||||||
|
height: 45px;
|
||||||
|
background-color: whitesmoke;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
form.search input{
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
form.search input[type=search]{
|
||||||
|
width: 100%;
|
||||||
|
height: 45px;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
padding: 10px 15px 10px 40px;
|
||||||
|
border: 1px solid gray;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
form.search input[type=submit]{
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
border: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
color: transparent;
|
||||||
|
height: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
form.search i{
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -284,4 +351,6 @@ nav.mobile .submenu a:hover{
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue