muayjtp/web_design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update submenu

Browse source
This commit is contained in:
JSriwongsa 2023-07-14 17:18:01 -05:00
parent b771d105da
commit d8fd7b4bbb
3 changed files with 107 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
donation_website/index.html
View file

@ -88,14 +88,16 @@
</nav>
<div class="icon">
<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>
</div>
</div>
</div>
</div>
</header>
<main></main>
<main>
</main>
<footer></footer>
<div class="overlay" data-overlay></div>
@ -136,6 +138,23 @@
</li>
</ul>
</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>
<script src="main.js"></script>

12
donation_website/main.js
View file

@ -14,4 +14,14 @@ for (let x = 0; x < menuTrigger.length; x++){
})
closeTrigger[x].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')
}
}

81
donation_website/style.css
View file

@ -147,7 +147,7 @@ header li a:hover{
.header-main :where(nav > ul > li >a span, .logo){
font-weight: 600;
}
/*---------- mobile menu ----------*/
/*---------- mobile menu & submenu----------*/
.overlay{
position: fixed;
top: 0;
@ -168,7 +168,7 @@ nav.mobile{
position: fixed;
top: 0;
left: 0;
width: 350px;
width: 300px;
height: 100%;
max-width: calc(100vw -60px);
padding: 30px;
@ -240,9 +240,76 @@ nav.mobile .submenu a{
nav.mobile .submenu a:hover{
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;
visibility: visible;
}
}
}