Create The Toggle Menu Buttons

MohamedKhamisMostafa · Jan 23, 2024 · ee09ad8 · ee09ad8
1 parent 0083b86
commit ee09ad8
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 11 deletions.
diff --git a/css/master.css b/css/master.css
@@ -218,12 +218,14 @@ body {
   padding: 15px;
 }
 
+.header-area .links-container{
+width: 100%;
+text-align: right;
+}
 .header-area .links {
   list-style: none;
   width: 100%;
-  text-align: right;
   padding-left: 0;
-  padding-right: 15px;
 
 
 }
@@ -245,6 +247,26 @@ body {
   color: var(--main-color);
 }
 
+.header-area .toggle-menu{
+  background: none;
+  border: none;
+  width: 40px;
+  cursor: pointer;
+  margin-top: 15px;
+  display: none;
+}
+
+.header-area .toggle-menu:focus{
+  outline: none;
+}
+
+.header-area .toggle-menu span{
+  display: block;
+  background-color: #fff;
+  height: 4px;
+  margin-bottom: 4px;
+}
+
 .introdaction-text {
   position: absolute;
   top: 50%;
@@ -272,6 +294,15 @@ body {
   margin: 0;
 }
 
+@media (max-width: 921px) {
+  .header-area .links{
+    display: none;
+  }
+  .header-area .toggle-menu{
+    display: inline-block;
+  }
+}
+
 /* End Landing Page */
 
 /* Start About Us */

diff --git a/index.html b/index.html
@@ -77,21 +77,27 @@ <h4>Show Bullets</h4>
 
   <!-- End Nav Bullets -->
 
-    <!-- Stat Nav Bullets -->
   <!-- Start Landing Page -->
   <div class="landing-page">
     <div class="overlay"></div>
     <div class="container">
       <div class="header-area">
         <div class="logo">Special Design</div>
-        <ul class="links">
-          <li><a href="#" data-section="about-us" class="active">About</a></li>
-          <li><a href="#" data-section="skills">Skills</a></li>
-          <li><a href="#" data-section="gallery">Gallery</a></li>
-          <li><a href="#" data-section="timeline">Timeline</a></li>
-          <li><a href="#" data-section="features">Features</a></li>
-          <li><a href="#" data-section="testimonials">Testimonials</a></li>
-        </ul>
+        <div class="links-container">
+          <ul class="links">
+            <li><a href="#" data-section="about-us" class="active">About</a></li>
+            <li><a href="#" data-section="skills">Skills</a></li>
+            <li><a href="#" data-section="gallery">Gallery</a></li>
+            <li><a href="#" data-section="timeline">Timeline</a></li>
+            <li><a href="#" data-section="features">Features</a></li>
+            <li><a href="#" data-section="testimonials">Testimonials</a></li>
+          </ul>
+          <button class="toggle-menu">
+            <span></span>
+            <span></span>
+            <span></span>
+          </button>
+        </div>
       </div>
     </div>
     <div class="introdaction-text">