redesign #1
19
js/navbar.js
19
js/navbar.js
@ -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";
|
||||
}
|
@ -25,8 +25,10 @@
|
||||
</picture>
|
||||
</div>
|
||||
<div class="menubar_hamburger">
|
||||
<button class="sidebar_open_short" onclick="sidebarToggle()">☰</button>
|
||||
<button class="sidebar_open_long" onclick="sidebarToggle()">Menu ☰</button>
|
||||
<button id="sidebar_open_short" class="sidebar_open_short" onclick="sidebarOpen()">☰</button>
|
||||
<button class="sidebar_open_long" onclick="sidebarOpen()">Menu ☰</button>
|
||||
<button id="sidebar_close_short" class="sidebar_close_short" onclick="sidebarClose()">×</button>
|
||||
<button class="sidebar_close_long" onclick="sidebarClose()">Close ×</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sidebar" class="sidebar">
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user