From b771d105da02867a5edc84214ddef8d9d3297381 Mon Sep 17 00:00:00 2001 From: JSriwongsa Date: Thu, 13 Jul 2023 18:19:07 -0500 Subject: [PATCH] updated responsive navbar --- donation_website/index.html | 59 ++++++++++++++++--- donation_website/main.js | 17 ++++++ donation_website/style.css | 112 ++++++++++++++++++++++++++++++++++++ 3 files changed, 180 insertions(+), 8 deletions(-) diff --git a/donation_website/index.html b/donation_website/index.html index 91245bd..a3049c9 100644 --- a/donation_website/index.html +++ b/donation_website/index.html @@ -51,7 +51,7 @@
@@ -61,14 +61,14 @@
  • Donate
  • Learn
  • Support @@ -79,9 +79,9 @@
  • Service
    • @@ -95,6 +95,49 @@
    +
    + + +
    + + + + \ No newline at end of file diff --git a/donation_website/main.js b/donation_website/main.js index e69de29..388bf2e 100644 --- a/donation_website/main.js +++ b/donation_website/main.js @@ -0,0 +1,17 @@ +const menuTrigger = document.querySelectorAll('[open-btn]'); +const mobileMenu = document.querySelectorAll('[data-show]'); +const closeTrigger = document.querySelectorAll('[close-btn]'); +const overlay = document.querySelector('[data-overlay]'); + +for (let x = 0; x < menuTrigger.length; x++){ + const closeMenu = function(){ + mobileMenu[x].classList.remove('active'); + overlay.classList.remove('active'); + } + menuTrigger[x].addEventListener('click', function() { + mobileMenu[x].classList.add('active'); + overlay.classList.add('active'); + }) + closeTrigger[x].addEventListener('click', closeMenu); + overlay.addEventListener('click', closeMenu) +} \ No newline at end of file diff --git a/donation_website/style.css b/donation_website/style.css index 37bc97a..f8a7f98 100644 --- a/donation_website/style.css +++ b/donation_website/style.css @@ -102,6 +102,10 @@ header li a:hover{ color: #D22B2B; cursor: pointer; } + +.header-top, .header-main nav > ul{ + display: none; +} /*-------- header-main ---------*/ .header-main .container .wrap .logo img{ width: 60px; @@ -143,10 +147,118 @@ header li a:hover{ .header-main :where(nav > ul > li >a span, .logo){ font-weight: 600; } +/*---------- mobile menu ----------*/ +.overlay{ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + background-color: rgb(0 0 0 /50%); + pointer-events: none; + z-index: 15px; + transition: 0.5s ease; + opacity: 0; +} +.overlay.active{ + opacity: 1; + pointer-events: all; +} +nav.mobile{ + position: fixed; + top: 0; + left: 0; + width: 350px; + height: 100%; + max-width: calc(100vw -60px); + padding: 30px; + background-color: whitesmoke; + z-index: 1000; + display: flex; + flex-direction: column; + left: -100%; + visibility: hidden; + transition: 0.5s ease; +} +nav.mobile.active{ + left: 0; + visibility: visible; +} +nav.mobile > ul > li{ + position: relative; +} +nav.mobile > ul > li > a{ + position: relative; + display: block; + padding: 13px 0; +} +.close-trigger{ + font-size: 22px; + width: 40px; + height: 40px; + line-height: 40px; + text-align: center; + transition: color 0.3s; +} +.close-trigger:hover{ + color: #D22B2B; +} +nav.mobile .close-trigger{ + position: absolute; + right: -40px; + top: 0; +} +nav.mobile > ul{ + overflow-y: auto; + margin-bottom: 30px; +} +nav.mobile > ul >li > span{ + position: absolute; + right: 0; + top: 0; + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 55px; + font-size: 22px; + cursor: pointer; + transition: color 0.3s; +} +nav.mobile > ul >li > span:hover{ + color: #D22B2B; +} +nav.mobile .submenu{ + height: 0; + overflow: hidden; +} +nav.mobile .submenu a{ + color: #E34234; + padding-left: 15px; + transition: color 0.3s; +} +nav.mobile .submenu a:hover{ + color: black; +} + + + + + + + + + @media only screen and (min-width:992px){ + .header-main nav > ul{ + display: flex; + } + .header-top{ + display: block; + } .header-main .menu-trigger{ display: none; }