Remove navbar-burger.js

author: Jesús <heckyel@hyperbola.info> 2021-12-07 15:20:53 -0500
committer: Jesús <heckyel@hyperbola.info> 2021-12-07 15:20:53 -0500
commit: add71295cfc81be4fe9ae787f72fdd780a861327 (patch)
tree: 6063fab78254c84e4067a91a3ad077dbaf06451e
parent: 0ec6329657706d8646cd384579a0e5a211c0dd5c (diff)
download: web-base-add71295cfc81be4fe9ae787f72fdd780a861327.tar.lz
web-base-add71295cfc81be4fe9ae787f72fdd780a861327.tar.xz
web-base-add71295cfc81be4fe9ae787f72fdd780a861327.zip
3 files changed, 51 insertions, 93 deletions
diff --git a/index.html b/index.html
index 4f4031d..dd73ee4 100644
--- a/index.html
+++ b/index.html
@@ -10,17 +10,28 @@
     <body>
         <header class="header">
             <!-- Input for menu-mobile with checkbox-->
-            <input id="navbar-toggle-cbox" role="button" type="checkbox">
+            <input id="navbar-toggle-cbox" type="checkbox">
             <!-- End Input for menu-mobile with checkbox-->
 
             <!-- controler search-mobile -->
-            <input id="cm-search" role="button" type="checkbox">
+            <input id="cm-search" type="checkbox">
             <!-- end-controler -->
 
-            <label class="navbar-burger" for="navbar-toggle-cbox" data-target="navMenu">
-                <span></span>
-                <span></span>
-                <span></span>
+            <label class="nav__toggle" for="navbar-toggle-cbox">
+                <!-- Menu -->
+                <svg class="menu" viewBox="0 0 448 512" width="100">
+                    <path
+                        d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
+                    />
+                    <title>Bars</title>
+                </svg>
+                <!-- Close -->
+                <svg class="close" viewBox="0 0 384 512" width="100">
+                    <path
+                        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                    />
+                    <title>Close</title>
+                </svg>
             </label>
             <a class="logo-name" href="#" rel="home">
                 <span class="logotype">
@@ -105,9 +116,6 @@
                     <p><a class="strong" href="tel:+9293025031">(929) 302-5031</a></p>
                 </address>
             </aside>
-            <!-- navbar-burger -->
-            <script src="js/navbar-burger.js"></script>
-            <!-- end of navbar-burger -->
         </footer>
     </body>
 </html>
diff --git a/js/navbar-burger.js b/js/navbar-burger.js
deleted file mode 100644
index cb632e0..0000000
--- a/js/navbar-burger.js
+++ /dev/null
@@ -1,29 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
-    // Get all "navbar-burger" elements
-    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
-
-    // Controler input checkbox
-    const box = document.getElementById('navbar-toggle-cbox');
-
-    // Check if there are any navbar burgers
-    if ($navbarBurgers.length > 0) {
-
-        // Add a click event on each of them
-        $navbarBurgers.forEach( el => {
-            el.addEventListener('click', () => {
-
-                // Get the target from the "data-target" attribute
-                const target = el.dataset.target;
-                const $target = document.getElementById(target);
-
-                // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
-                el.classList.toggle('is-active');
-                $target.classList.toggle('is-active');
-
-            });
-        });
-    }
-
-    // Prevent checkbox true when refresh page
-    box.checked=false;
-});
diff --git a/styles.css b/styles.css
index e2a931d..1bec822 100644
--- a/styles.css
+++ b/styles.css
@@ -3,6 +3,7 @@
     --background-l1:        #eff3f6;
     --background-l2:        #FFF;
     --background-l3:        #7c8083;
+    --toggle-bg:            #000;
     --header-bg:            #FFF;
     --vertical-block-space: 3.5rem;
     --text:                 #000;
@@ -50,7 +51,7 @@ body {
     grid-template-rows: auto auto;
     gap: 0px 0px;
     grid-template-areas:
-        "navbar-burger logo-name   ."
+        "navbar-toggle logo-name   ."
         "navbar-menu   navbar-menu navbar-menu";
     grid-area: header;
 
@@ -81,6 +82,25 @@ body {
     display: none;
 }
 
+.nav__toggle {
+    grid-area: navbar-toggle;
+    margin: auto;
+}
+
+.nav__toggle svg {
+    width: 1rem;
+    fill: var(--toggle-bg);
+}
+
+.nav__toggle .close {
+    display: none;
+}
+
+.nav__toggle .close,
+.nav__toggle .menu {
+    margin: auto;
+}
+
 label[for=navbar-toggle-cbox] {
     cursor: pointer;
 }
@@ -93,6 +113,14 @@ label[for=navbar-toggle-cbox] {
     animation: bounceInDown 1s both;
 }
 
+#navbar-toggle-cbox:checked ~ label.nav__toggle svg.close {
+    display: block;
+}
+
+#navbar-toggle-cbox:checked ~ label.nav__toggle svg.menu {
+    display: none;
+}
+
 @-webkit-keyframes bounceInDown {
     0% {
         opacity: 0;
@@ -159,37 +187,6 @@ label[for=navbar-toggle-cbox] {
 }
 
 /* --------- End Menu Mobile sin JS ----------- */
-
-/* ---------   Menu Mobile JS  ------------ */
-.navbar-burger.is-active {
-    display: flex;
-    cursor: pointer;
-    position: relative;
-    justify-content: center;
-    width: 100%;
-    height: auto;
-}
-
-.navbar-burger.is-active span {
-    display: block;
-    position: absolute;
-}
-
-.navbar-burger.is-active span:nth-child(1) {
-    transform: translateY(5px) rotate(45deg);
-    top: calc(50% - 6px);
-}
-
-.navbar-burger.is-active span:nth-child(2) {
-    opacity: 0;
-}
-
-.navbar-burger.is-active span:nth-child(3) {
-    transform: translateY(-5px) rotate(-45deg);
-    top: calc(50% + 4px);
-}
-/* --------- End Menu Mobile JS ----------- */
-
 .navbar-menu > ul > li {
     list-style: none;
     padding-top: 1rem;
@@ -213,27 +210,6 @@ ul.list-item > li > a {
     text-decoration: none;
 }
 
-.navbar-burger {
-    grid-area: navbar-burger;
-    margin: auto;
-
-    display: grid;
-    grid-row-gap: .25rem;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr 1fr;
-}
-
-.navbar-burger span {
-    background-color: var(--text);
-    display: block;
-    height: 2px;
-    transform-origin: center;
-    transition-duration: 86ms;
-    transition-property: background-color,opacity,transform;
-    transition-timing-function: ease-out;
-    width: 16px;
-}
-
 .logo-name {
     grid-area: logo-name;
     justify-self: center;
@@ -288,7 +264,10 @@ ul.list-item > li > a {
 #cm-search:checked ~ .clicked {
     display: none;
 }
-#cm-search:checked ~ .navbar-burger {
+#cm-search:checked ~ .nav__toggle {
+    display: none;
+}
+#cm-search:checked ~ .nav__toggle .menu {
     display: none;
 }
 #cm-search:checked ~ .logo-name {
@@ -428,7 +407,7 @@ input::-webkit-inner-spin-button {
         color: var(--text);
         width: 150px;
     }
-    .navbar-burger {
+    .nav__toggle {
         display: none;
     }
     .navbar-menu {
author	Jesús <heckyel@hyperbola.info>	2021-12-07 15:20:53 -0500
committer	Jesús <heckyel@hyperbola.info>	2021-12-07 15:20:53 -0500
commit	add71295cfc81be4fe9ae787f72fdd780a861327 (patch)
tree	6063fab78254c84e4067a91a3ad077dbaf06451e
parent	0ec6329657706d8646cd384579a0e5a211c0dd5c (diff)
download	web-base-add71295cfc81be4fe9ae787f72fdd780a861327.tar.lz web-base-add71295cfc81be4fe9ae787f72fdd780a861327.tar.xz web-base-add71295cfc81be4fe9ae787f72fdd780a861327.zip