Testing new menu
This commit is contained in:
parent
f4dc85e434
commit
b368e65bd9
26
js/nav.js
26
js/nav.js
|
|
@ -1,19 +1,11 @@
|
|||
/* When the user clicks on the button,
|
||||
toggle between hiding and showing the dropdown content */
|
||||
function myFunction() {
|
||||
document.getElementById("myDropdown").classList.toggle("show");
|
||||
function sidebarOpen() {
|
||||
document.getElementById("sidebar").style.width = "50%";
|
||||
document.getElementById("sidebar_open_short").style.display = "none";
|
||||
document.getElementById("sidebar_close_short").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');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function sidebarClose() {
|
||||
document.getElementById("sidebar").style.width = "0%"
|
||||
document.getElementById("sidebar_open_short").style.display = "block";
|
||||
document.getElementById("sidebar_close_short").style.display = "none";
|
||||
}
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
<?php
|
||||
|
||||
echo '<div class="dropdown">';
|
||||
echo ' <button onclick="myFunction()" class="dropbtn">Menu</button>';
|
||||
echo ' <div id="myDropdown" class="dropdown-content">';
|
||||
echo ' <a class="dropdown-first" href="/">Home</a>';
|
||||
echo ' <a href="/issue.php">Report Issue</a>';
|
||||
echo ' <a href="/help.php">Help</a>';
|
||||
echo ' </div>';
|
||||
echo '</div>';
|
||||
<div id="menubar_hamburger" class="hide_micro">
|
||||
<button class="sidebar_control" id="sidebar_open_short" onclick="sidebarOpen()">☰</button>
|
||||
<button class="sidebar_control" id="sidebar_close_short" onclick="sidebarClose()">×</button>
|
||||
</div>
|
||||
<div id="sidebar">
|
||||
<a href="/">Home</a>
|
||||
<a href="/keys.php">Keys</a>
|
||||
<a href="/projects.php">Things I Do</a>
|
||||
<a href="/contact.php">Contact</a>
|
||||
<a href="/about.php">About</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -117,67 +117,50 @@ body {
|
|||
}
|
||||
|
||||
/* START MENU STYLE */
|
||||
|
||||
/* Menu Button */
|
||||
.dropbtn {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: #7fa7e6;
|
||||
color: white;
|
||||
padding: 12px;
|
||||
font-size: 12px;
|
||||
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
|
||||
border: none;
|
||||
border-bottom-left-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropbtn:hover, .dropbtn:focus {
|
||||
background-color: #0280e5;
|
||||
}
|
||||
|
||||
/* The container <div> - needed to position the dropdown content */
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Dropdown Content (Hidden by Default) */
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
#menubar_hamburger {
|
||||
position: absolute;
|
||||
top: -80px;
|
||||
/*right: -190px;*/
|
||||
left: 150px;
|
||||
background-color: #7fa7e6;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
top: 2px;
|
||||
right: 0;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* Links inside the dropdown */
|
||||
.dropdown-content a {
|
||||
color: white;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
.sidebar_control {
|
||||
background-color: transparent;
|
||||
color: whitesmoke;
|
||||
border: none;
|
||||
font-family: sans-serif;
|
||||
font-size: larger;
|
||||
}
|
||||
#sidebar_open_short {display: block;}
|
||||
#sidebar_close_short {
|
||||
display: none;
|
||||
font-size: x-large;
|
||||
}
|
||||
#sidebar {
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
height: 100%;
|
||||
display: block;
|
||||
border-bottom: 1px solid black;
|
||||
max-width: 250px;
|
||||
width: 0;
|
||||
background-color: navy;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
/*Final item of the dropdown has bottom border*/
|
||||
.dropdown-first {
|
||||
border-top: 1px solid black;
|
||||
#sidebar a {
|
||||
padding: 8px 8px 8px 8px;
|
||||
margin-top: 10px;
|
||||
font-family: indie-flower, sans-serif;
|
||||
font-weight: 300;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
color: white;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
|
|
|
|||
Reference in New Issue