fusion menu mobile

Author: juandc

index.html

@@ -67,6 +67,50 @@
         </li>
       </ul>
     </div>
+
+    <div class="mobile-menu inactive">
+      <ul>
+        <li>
+          <a href="/">CATEGORIES</a>
+        </li>
+        <li>
+          <a href="/">All</a>
+        </li>
+        <li>
+          <a href="/">Clothes</a>
+        </li>
+        <li>
+          <a href="/">Electronics</a>
+        </li>
+        <li>
+          <a href="/">Furnitures</a>
+        </li>
+        <li>
+          <a href="/">Toys</a>
+        </li>
+        <li>
+          <a href="/">Other</a>
+        </li>
+      </ul>
+  
+      <ul>
+        <li>
+          <a href="/">My orders</a>
+        </li>
+        <li>
+          <a href="/">My account</a>
+        </li>
+      </ul>
+  
+      <ul>
+        <li>
+          <a href="/" class="email">[email protected]</a>
+        </li>
+        <li>
+          <a href="/" class="sign-out">Sign out</a>
+        </li>
+      </ul>
+    </div>
   </nav>
 
   <script src="./main.js"></script>

main.js

@@ -1,11 +1,15 @@
 const menuEmail = document.querySelector('.navbar-email');
 const desktopMenu = document.querySelector('.desktop-menu');
+const menuHamIcon = document.querySelector('.menu');
+const mobileMenu = document.querySelector('.mobile-menu');
 
 menuEmail.addEventListener('click', toggleDesktopMenu);
+menuHamIcon.addEventListener('click', toggleMobileMenu);
 
 function toggleDesktopMenu() {
-  console.log('Click');
   desktopMenu.classList.toggle('inactive');
 }
 
-console.log('JS funcionando');
+function toggleMobileMenu() {
+  mobileMenu.classList.toggle('inactive');
+}

styles.css

@@ -1,3 +1,4 @@
+/* General */
 :root {
   --white: #FFFFFF;
   --black: #000000;
@@ -12,12 +13,12 @@ body {
   margin: 0;
   font-family: 'Quicksand', sans-serif;
 }
-
 .inactive {
   display: none;
 }
 
 
+/* Navbar (general) */
 nav {
   display: flex;
   justify-content: space-between;
@@ -82,7 +83,7 @@ nav {
   align-items: center;
 }
 
-
+/* Menu en desktop */
 .desktop-menu {
   position: absolute;
   top: 60px;
@@ -121,6 +122,38 @@ nav {
   display: inline-block;
 }
 
+/* Menu en mobile */
+.mobile-menu {
+  position: absolute;
+  top: 60px;
+  padding: 24px;
+}
+.mobile-menu a {
+  text-decoration: none;
+  color: var(--black);
+  font-weight: bold;
+  /* margin-bottom: 24px; */
+}
+.mobile-menu ul {
+  padding: 0;
+  margin: 24px 0 0;
+  list-style: none;
+}
+.mobile-menu ul:nth-child(1) {
+  border-bottom: 1px solid var(--very-light-pink);
+}
+.mobile-menu ul li {
+  margin-bottom: 24px;
+}
+.email {
+  font-size: var(--sm);
+  font-weight: 300 !important;
+}
+.sign-out {
+  font-size: var(--sm);
+  color: var(--hospital-green) !important;
+}
+
 
 @media (max-width: 640px) {
   .menu {
@@ -132,4 +165,13 @@ nav {
   .navbar-email {
     display: none;
   }
+  .desktop-menu {
+    display: none;
+  }
+}
+
+@media (min-width: 641px) {
+  .mobile-menu {
+    display: none;
+  }
 }