Mobile Navigation

zJiaJun · zJiaJun · commit 14e405223bc3 · 2025-01-07T20:09:10.000+08:00
diff --git a/starter/08-Omnifood-Responsive/css/general.css b/starter/08-Omnifood-Responsive/css/general.css
@@ -67,13 +67,15 @@ html {
   /* 10px / 16px = 0.625 = 62.5% */
   /* Percentage of user's browser font-size setting */
   font-size: 62.5%;
+  overflow-x: hidden;
 }
 
 body {
   font-family: "Rubik", sans-serif;
   line-height: 1;
   font-weight: 400;
   color: #555;
+  overflow-x: hidden;
 }
 
 /**************************/
diff --git a/starter/08-Omnifood-Responsive/css/queries.css b/starter/08-Omnifood-Responsive/css/queries.css
@@ -120,4 +120,55 @@
   .btn--form {
     margin-top: 1.2rem;
   }
+
+  /* Mobile Navigation */
+  .btn-mobile-nav {
+    display: block;
+  }
+
+  .main-nav {
+    background-color: rgba(255, 255, 255, 0.97);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    transform: translateX(100%);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.5s ease-in;
+    /* 1. Hide it visually */
+    opacity: 0;
+    /* 2. Make it unaccessible to mouse and keyboard */
+    pointer-events: none;
+    /* 3. Hide it from screen readers */
+    visibility: hidden;
+  }
+
+  .nav-open .main-nav {
+    opacity: 1;
+    pointer-events: auto;
+    visibility: visible;
+    transform: translateX(0);
+  }
+
+  .nav-open .icon-mobile-nav[name="close-outline"] {
+    display: block;
+  }
+
+  .nav-open .icon-mobile-nav[name="menu-outline"] {
+    display: none;
+  }
+
+  .main-nav-list {
+    flex-direction: column;
+    gap: 4.8rem;
+  }
+
+  .main-nav-link:link,
+  .main-nav-link:visited {
+    font-size: 3rem;
+  }
 }
diff --git a/starter/08-Omnifood-Responsive/css/style.css b/starter/08-Omnifood-Responsive/css/style.css
@@ -11,6 +11,7 @@
   /* Because we want header to be sticky later */
   height: 9.6rem;
   padding: 0 4.8rem;
+  position: relative;
 }
 
 .logo {
@@ -56,6 +57,24 @@
   background-color: #cf711f;
 }
 
+/* Mobile */
+.btn-mobile-nav {
+  border: none;
+  background: none;
+  cursor: pointer;
+  display: none;
+}
+
+.icon-mobile-nav {
+  height: 4.8rem;
+  width: 4.8rem;
+  color: #333;
+}
+
+.icon-mobile-nav[name="close-outline"] {
+  display: none;
+}
+
 /**************************/
 /* HERO SECTION */
 /**************************/
diff --git a/starter/08-Omnifood-Responsive/index.html b/starter/08-Omnifood-Responsive/index.html
@@ -27,7 +27,7 @@
     <title>Omnifood</title>
   </head>
   <body>
-    <header class="header">
+    <header class="header nav-open">
       <a href="#">
         <img class="logo" alt="Omnifood logo" src="img/omnifood-logo.png" />
       </a>
@@ -40,6 +40,10 @@
           <li><a class="main-nav-link nav-cta" href="#">Try for free</a></li>
         </ul>
       </nav>
+      <button class="btn-mobile-nav">
+        <ion-icon class="icon-mobile-nav" name="menu-outline"></ion-icon>
+        <ion-icon class="icon-mobile-nav" name="close-outline"></ion-icon>
+      </button>
     </header>
 
     <main>

Original file line number	Diff line number	Diff line change
`@@ -67,13 +67,15 @@ html {`
`67`	`67`	`/* 10px / 16px = 0.625 = 62.5% */`
`68`	`68`	`/* Percentage of user's browser font-size setting */`
`69`	`69`	`font-size: 62.5%;`
	`70`	`+ overflow-x: hidden;`
`70`	`71`	`}`
`71`	`72`
`72`	`73`	`body {`
`73`	`74`	`font-family: "Rubik", sans-serif;`
`74`	`75`	`line-height: 1;`
`75`	`76`	`font-weight: 400;`
`76`	`77`	`color: #555;`
	`78`	`+ overflow-x: hidden;`
`77`	`79`	`}`
`78`	`80`
`79`	`81`	`/**************************/`