diff --git a/js/nav.js b/js/nav.js index 19b4753..6cbf18e 100644 --- a/js/nav.js +++ b/js/nav.js @@ -1,8 +1,19 @@ -function menuFunction() { - var hidden = document.getElementById("menu-hidden"); - if (hidden.style.display === "block") { - hidden.style.display = "none"; - } else { - hidden.style.display = "block"; +/* When the user clicks on the button, +toggle between hiding and showing the dropdown content */ +function myFunction() { + document.getElementById("myDropdown").classList.toggle("show"); +} + +// Close the dropdown menu if the user clicks outside of it +window.onclick = function(event) { + if (!event.target.matches('.dropbtn')) { + var dropdowns = document.getElementsByClassName("dropdown-content"); + var i; + for (i = 0; i < dropdowns.length; i++) { + var openDropdown = dropdowns[i]; + if (openDropdown.classList.contains('show')) { + openDropdown.classList.remove('show'); + } + } } } diff --git a/page-blocks/nav-menu.php b/page-blocks/nav-menu.php index 7696b21..b763089 100644 --- a/page-blocks/nav-menu.php +++ b/page-blocks/nav-menu.php @@ -1,10 +1,9 @@ '; -echo '
'; -echo ''; -echo ''; + +echo ''; diff --git a/styles/style.css b/styles/style.css index 926e8d2..2a3005a 100644 --- a/styles/style.css +++ b/styles/style.css @@ -115,43 +115,55 @@ body { cursor: pointer; } -/* Menu Styles */ +/* START MENU STYLE */ -.nav-bar { - overflow: hidden; - background-color: #3c78d8; - position: relative; -} - -.nav-bar #menu-hidden { - display: none; -} - -.nav-bar a { - position: fixed; - top: 0; - right: 0; +/* Dropdown Button */ +.dropbtn { + background-color: #3498DB; color: white; - padding: 10px 10px; - text-decoration: none; - font-size: 17px; - display: block; - /*background-color: #aac4ee;*/ + padding: 16px; + font-size: 16px; + border: none; + cursor: pointer; } -.nav-bar a.img { - display: block; +/* Dropdown button on hover & focus */ +.dropbtn:hover, .dropbtn:focus { + background-color: #2980B9; +} + +/* The container