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

New JS for menu

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"; document.getElementById("sidebar").style.width = "0px";
} }
function sidebarToggle() { function openSidebar() {
var bar = document.getElementById("sidebar"); document.getElementById("sidebar").style.height = "100%";
if (bar.style.height === "0px") { document.getElementById("sidebar").style.display = "block";
bar.style.height = "100%"; document.getElementById("sidebar_open_short").style.display = "none";
bar.style.display = "block"; document.getElementById("sidebar_close_short").style.display = "block";
} else { }
bar.style.height = "0px";
bar.style.display = "none"; 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> </picture>
</div> </div>
<div class="menubar_hamburger"> <div class="menubar_hamburger">
<button class="sidebar_open_short" onclick="sidebarToggle()">&#9776;</button> <button id="sidebar_open_short" class="sidebar_open_short" onclick="sidebarOpen()">&#9776;</button>
<button class="sidebar_open_long" onclick="sidebarToggle()">Menu &#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> </div>
<div id="sidebar" class="sidebar"> <div id="sidebar" class="sidebar">

15
style/new_menu.css
View File

@ -20,11 +20,20 @@
padding: 5px; padding: 5px;
} }
.sidebar_open_long { .sidebar_open_long {display: none;}
display: none; .sidebar_close_long {display: none;}
}
.sidebar_open_short { .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; font-size: larger;
background-color: slategrey; background-color: slategrey;
color: azure; color: azure;