fred.boniface/fredboniface.co.uk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New JS for menu

Browse Source
This commit is contained in:
Fred Boniface 2022-10-18 13:00:41 +01:00
parent 1d5c9b2109
commit 1a9d95b701
3 changed files with 28 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
js/navbar.js
View File

@ -6,13 +6,16 @@ function collapseSidebar() {
document.getElementById("sidebar").style.width = "0px";
}
function sidebarToggle() {
var bar = document.getElementById("sidebar");
if (bar.style.height === "0px") {
bar.style.height = "100%";
bar.style.display = "block";
} else {
bar.style.height = "0px";
bar.style.display = "none";
}
function openSidebar() {
document.getElementById("sidebar").style.height = "100%";
document.getElementById("sidebar").style.display = "block";
document.getElementById("sidebar_open_short").style.display = "none";
document.getElementById("sidebar_close_short").style.display = "block";
}
function closeSidebar() {
document.getElementById("sidebar").style.height = "0%";
document.getElementById("sidebar").style.display = "none";
document.getElementById("sidebar_open_short").style.display = "block";
document.getElementById("sidebar_close_short").style.display = "none";
}

6
new_index.html
View File

@ -25,8 +25,10 @@
</picture>
</div>
<div class="menubar_hamburger">
<button class="sidebar_open_short" onclick="sidebarToggle()">&#9776;</button>
<button class="sidebar_open_long" onclick="sidebarToggle()">Menu &#9776;</button>
<button id="sidebar_open_short" class="sidebar_open_short" onclick="sidebarOpen()">&#9776;</button>
<button class="sidebar_open_long" onclick="sidebarOpen()">Menu &#9776;</button>
<button id="sidebar_close_short" class="sidebar_close_short" onclick="sidebarClose()">&times;</button>
<button class="sidebar_close_long" onclick="sidebarClose()">Close &times;</button>
</div>
</div>
<div id="sidebar" class="sidebar">

15
style/new_menu.css
View File

@ -20,11 +20,20 @@
padding: 5px;
}
.sidebar_open_long {
display: none;
}
.sidebar_open_long {display: none;}
.sidebar_close_long {display: none;}
.sidebar_open_short {
display: block;
font-size: larger;
background-color: slategrey;
color: azure;
border: none;
border-radius: 2px;
}
.sidebar_short_close {
display: none;
font-size: larger;
background-color: slategrey;
color: azure;