diff options
| -rw-r--r-- | index.html | 26 | ||||
| -rw-r--r-- | js/navbar-burger.js | 29 | ||||
| -rw-r--r-- | styles.css | 89 |
3 files changed, 51 insertions, 93 deletions
@@ -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; -}); @@ -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 { |