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

Add js to control new_menu

Browse Source
This commit is contained in:
Fred Boniface 2022-10-18 12:48:35 +01:00
parent 0d15875f22
commit eee9dd5fe6
4 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
js/navbar.js
View File

@ -4,4 +4,15 @@ function inflateSidebar() {
function collapseSidebar() { function collapseSidebar() {
document.getElementById("sidebar").style.width = "0px"; document.getElementById("sidebar").style.width = "0px";
}
function sidebarToggle() {
var bar = document.getElementById("sidebar");
if (bar.style.height === "0") {
bar.style.height = "100%";
bar.style.display = "block";
} else {
bar.style.height = "0";
bar.style.display = "none";
}
} }

4
new_index.html
View File

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

20
style/new_menu.css
View File

@ -37,20 +37,30 @@
top: 40px; top: 40px;
right: 0; right: 0;
margin: auto; margin: auto;
height: 100%; height: 0;
display: none;
max-width: 60%; max-width: 60%;
background-color: darkslategrey; background-color: darkslategrey;
} }
.sidebar a { .sidebar a {
padding: 50px; padding: 8px 8px 8px 8px;
align: right; margin-left: 20px;
width: 100%; margin-top: 10px;
} font-family: sans-serif;
font-weight: 300;
text-decoration: none;
text-align: right;
font-size: 25px;
color: cyan;
display: block;
transition: 0.7s;
}
.sidebar_social { .sidebar_social {
position: absolute; position: absolute;
bottom: 50px; bottom: 50px;
width: 100%;
} }
@media screen and (min-width: 800px) { @media screen and (min-width: 800px) {

10
style/new_style.css
View File

@ -7,15 +7,19 @@ body {
} }
.header-image-home { .header-image-home {
background-image: url(https://via.placeholder.com/375x335webp);
min-height: 50%; min-height: 50%;
width: 100%; width: 100%;
position: fixed; position: fixed;
top: 0; top: 40px;
left: 0;
} }
.page-title { .page-title { /* This needs to be bottom center of header-image-home/header-image */
font-family: sans-serif; font-family: sans-serif;
font-size: 4vw; font-size: 4vw;
position: relative; text-align: center;
position: absloute;
box-shadow: 3px; box-shadow: 3px;
color: azure;
} }