diff options
| -rw-r--r-- | grid.css | 45 | ||||
| -rw-r--r-- | index.html | 6 | ||||
| -rw-r--r-- | js/navbar-burger.js | 23 |
3 files changed, 74 insertions, 0 deletions
@@ -59,7 +59,52 @@ body { .navbar-menu { grid-area: navbar-menu; + + display: none; +} + +/* ---------- Menu Mobile sin JS ------------ */ +/* --------- End Menu Mobile sin JS ----------- */ +/* input hidden */ +#navbar-toggle-cbox { + display: none; +} + +label[for=navbar-toggle-cbox] { + cursor: pointer; +} + +#navbar-toggle-cbox:checked ~ .navbar-menu { + display: block; +} + +/* --------- Menu Mobile JS ------------ */ +.navbar-burger.is-active { + display: flex; + cursor: pointer; + position: relative; + justify-content: center; +} + +.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; @@ -9,6 +9,9 @@ </head> <body> <header class="header"> + <!-- Input for menu-mobile with checkbox--> + <input id="navbar-toggle-cbox" role="button" type="checkbox"> + <!-- End Input for menu-mobile with checkbox--> <label class="navbar-burger" for="navbar-toggle-cbox" data-target="navMenu"> <span></span> <span></span> @@ -76,6 +79,9 @@ <p>08019 Barcelona, Spain</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 new file mode 100644 index 0000000..084f02b --- /dev/null +++ b/js/navbar-burger.js @@ -0,0 +1,23 @@ +document.addEventListener('DOMContentLoaded', () => { + // Get all "navbar-burger" elements + const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); + + // 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'); + + }); + }); + } +}); |