Merge pull request #44 from atmaram-kambli/check-btn-feature

update the check button feature by @atmaram-kambli SWOC S4 2024
Mayuresh-22 · Jan 1, 2024 · 8fda887 · 8fda887
2 parents b062a70 + ffebb6a
commit 8fda887
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 32 deletions.
diff --git a/about-us.php b/about-us.php
@@ -17,10 +17,11 @@
 
 <body>
     <nav>
-      <input type="checkbox" id="check">
-      <label for="check" class="checkbtn">
-        <i class="fa-solid fa-bars" style="color: #12209d;"></i>
-      </label>
+      <div class="menu-btn">
+        <div class="bar bar1"></div>
+        <div class="bar bar2"></div>
+        <div class="bar bar3"></div>
+      </div>
       <label class="logo"><a href="/"><img class="logo" src="logo\logo.png"></a></label>
       <ul class="menu-items">
         <li class="menu-items-li"><a class="navv-item" href="feed.php">Feed</a></li>
@@ -90,5 +91,7 @@
         <p>This website is only for educational purpose and does not try to replicate any institution/enity/company - by Mayuresh Choudhary</p>
     </ul>
 </div>
+
+<script src="js/script.js"></script>
 </body>
 </html>
diff --git a/account.php b/account.php
@@ -48,10 +48,11 @@
 
 <body>
     <nav>
-      <input type="checkbox" id="check">
-      <label for="check" class="checkbtn">
-        <i class="fa-solid fa-bars" style="color: #12209d;"></i>
-      </label>
+      <div class="menu-btn">
+        <div class="bar bar1"></div>
+        <div class="bar bar2"></div>
+        <div class="bar bar3"></div>
+      </div>
       <label class="logo"><a href="/"><img class="logo" src="logo\logo.png"></a></label>
       <ul class="menu-items">
         <li class="menu-items-li"><a class="navv-item" href="feed.php">Feed</a></li>
@@ -378,6 +379,8 @@
             <p>This website is only for educational purpose and does not try to replicate any institution/enity/company - by Mayuresh Choudhary</p>
         </ul>
     </div>
+
+    <script src="js/script.js"></script>
 </body>
 
 </html>
diff --git a/feed.php b/feed.php
@@ -24,10 +24,11 @@
 
 <body>
     <nav>
-      <input type="checkbox" id="check">
-        <label for="check" class="checkbtn">
-            <i class="fa-solid fa-bars" style="color: #12209d;"></i>
-        </label>
+      <div class="menu-btn">
+            <div class="bar bar1"></div>
+            <div class="bar bar2"></div>
+            <div class="bar bar3"></div>
+      </div>
       <label class="logo"><a href="/"><img class="logo" src="logo\logo.png"></a></label>
       <ul class="menu-items">
         <li class="menu-items-li"><a class="navv-item active" href="feed.php">Feed</a></li>
@@ -193,5 +194,7 @@
             <p>This website is only for educational purpose and does not try to replicate any institution/enity/company - by Mayuresh Choudhary</p>
         </ul>
     </div>
+
+    <script src="js/script.js"></script>
 </body>
 </html>
diff --git a/index.php b/index.php
@@ -40,10 +40,11 @@
     <body>
 
     <nav>
-      <input type="checkbox" id="check">
-      <label for="check" class="checkbtn">
-        <i class="fa-solid fa-bars" style="color: #12209d;"></i>
-      </label>
+      <div class="menu-btn">
+        <div class="bar bar1"></div>
+        <div class="bar bar2"></div>
+        <div class="bar bar3"></div>
+      </div>
       <label class="logo"><a href="/"><img class="logo" src="logo\logo.png"></a></label>
       <ul class="menu-items">
         <li class="menu-items-li"><a class="navv-item" href="feed.php">Feed</a></li>
@@ -141,5 +142,7 @@
             <p>This website is only for educational purpose and does not try to replicate any institution/enity/company - by Mayuresh Choudhary</p>
         </ul>
     </div>
+
+    <script src="js/script.js"></script>
     </body>
 </html>
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,10 @@
+// Check button in mobile view
+const menuBTN = document.querySelector('.menu-btn');
+const menuItems = document.querySelector('.menu-items');
+
+function toggleBtn() {
+    menuBTN.classList.toggle("change");
+    menuItems.classList.toggle("active");
+}
+
+menuBTN.addEventListener('click', toggleBtn);
diff --git a/message.php b/message.php
@@ -84,10 +84,11 @@
 <body>
 
     <nav>
-      <input type="checkbox" id="check">
-      <label for="check" class="checkbtn">
-        <i class="fa-solid fa-bars" style="color: #12209d;"></i>
-      </label>
+      <div class="menu-btn">
+        <div class="bar bar1"></div>
+        <div class="bar bar2"></div>
+        <div class="bar bar3"></div>
+      </div>
       <label class="logo"><a href="/"><img class="logo" src="logo\logo.png"></a></label>
       <ul>
         <li><a class="navv-item" href="feed.php">Feed</a></li>
@@ -217,5 +218,6 @@
             </li>
         </ul>
     </div>
+    <script src="js/script.js"></script>
 </body>
 </html>
diff --git a/style/style.css b/style/style.css
@@ -93,21 +93,33 @@ nav{
     transition: .5s;
     color: #fff !important;
   }
-  .checkbtn{
-    font-size: 30px;
-    color: black;
+  .menu-btn {
     float: right;
-    line-height: 80px;
+    cursor: pointer;
     margin-right: 40px;
     margin-top: 25px;
-    cursor: pointer;
-    display: none;
     vertical-align: middle;
-  }
-  #check{
+    color: #12209d;
     display: none;
-  }
-
+}
+.bar {
+    width: 30px;
+    height: 5px;
+    border-radius: 1px;
+    margin: 5px 0;    
+    background-color: #12209d;
+    transition: all 0.5s;
+}
+.change .bar1 {
+    transform: translate(1px,10px) rotate(-45deg);
+}
+.change .bar2 {
+    opacity: 0;
+}
+.change .bar3 {
+    transform: translate(1px,-10px) rotate(45deg);
+}
+
 /* a:link {
     color:#022b59;
 }
@@ -291,8 +303,11 @@ a.foot-link:visited{
 }
 
 @media (max-width: 858px){
-  .checkbtn{
+  /* .cbtn{
     display: block;
+  } */
+  .menu-btn {
+    display: inline-block;
   }
   .menu-items{
     position:fixed;
@@ -322,7 +337,7 @@ a.foot-link:visited{
     background: none;
     color: #0082e6;
   }
-  #check:checked ~ .menu-items{
+  .active {
     left: 0%;
   }
 }