update submenu

donation_website/index.html

@@ -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>

donation_website/main.js

@@ -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')
+        }
+    }

donation_website/style.css

@@ -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;
     }
-}
+   
+}
+