fred.boniface
/
athena.fb-infra.uk
Archived
1
0
Fork 0
Code Issues 72 Pull Requests Packages Projects Releases Activity

Try nav menu again

This commit is contained in:
Fred Boniface 2022-09-22 21:00:49 +01:00
parent 42f2afe2e9
commit a484584400
3 changed files with 64 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
js/nav.js
View File

@ -1,8 +1,19 @@
function menuFunction() { /* When the user clicks on the button,
var hidden = document.getElementById("menu-hidden"); toggle between hiding and showing the dropdown content */
if (hidden.style.display === "block") { function myFunction() {
hidden.style.display = "none"; document.getElementById("myDropdown").classList.toggle("show");
} else { }
hidden.style.display = "block";
// 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');
}
}
} }
} }

13
page-blocks/nav-menu.php
View File

@ -1,10 +1,9 @@
<?php <?php
echo '<div class="nav-bar">';
echo '<div id="menu-hidden">'; echo '<div class="dropdown">';
echo '<a href="/">Home</a>'; echo ' <button onclick="myFunction()" class="dropbtn">Dropdown</button>'
echo '<a class="nav-bar-hidden" href="/issue.php">Report Issue</a>'; echo ' <div id="myDropdown" class="dropdown-content">';
echo '<a class="nav-bar-hidden" href="/help.php">Help</a>'; echo ' <a href="#">Link 1</a>';
echo ' <a href="#">Link 2</a>';
echo ' </div>'; echo ' </div>';
echo '<a href="javascript:void(0);" class="menu-icon" onclick="menuFunction()">';
echo '<img src="/assets/icons/menu.png"></img>';
echo '</div>'; echo '</div>';

68
styles/style.css
View File

@ -115,43 +115,55 @@ body {
cursor: pointer; cursor: pointer;
} }
/* Menu Styles */ /* START MENU STYLE */
.nav-bar { /* Dropdown Button */
overflow: hidden; .dropbtn {
background-color: #3c78d8; background-color: #3498DB;
position: relative;
}
.nav-bar #menu-hidden {
display: none;
}
.nav-bar a {
position: fixed;
top: 0;
right: 0;
color: white; color: white;
padding: 10px 10px; padding: 16px;
text-decoration: none; font-size: 16px;
font-size: 17px; border: none;
display: block; cursor: pointer;
/*background-color: #aac4ee;*/
} }
.nav-bar a.img { /* Dropdown button on hover & focus */
display: block; .dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative; position: relative;
max-width: 20px; display: inline-block;
right: 0;
top: 0;
} }
.nav-bar a:hover { /* Dropdown Content (Hidden by Default) */
background-color: #ddd; .dropdown-content {
color: black; display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
} }
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
/* END MENU STYLE */
/* Footer Styles */ /* Footer Styles */
footer { footer {