marvin/schnittfest
1
0
Fork 0
mirror of https://github.com/Kugelschieber/schnittfest.git synced 2026-01-18 10:20:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added mobile menu and made menu links work.

Browse Source
This commit is contained in:
Daniel Schramm
2020-01-28 15:37:08 +01:00
parent 5284c4ba1a
commit 70b2a7b7fb
3 changed files with 99 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/main.css
View File

File diff suppressed because one or more lines are too long

22
style/sass/main.scss
View File

@@ -158,6 +158,28 @@ button {
}
}
.mobile-menu {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1000;
li {
color: white;
font-size: 24px;
line-height: 64px;
font-weight: 600;
text-align: center;
cursor: pointer;
}
}
.section-start {
.container {
padding: 0;

80
template/landing_page.html
View File

@@ -45,16 +45,28 @@
</div>
</div>
</section>
<nav id="mobileMenu" class="mobile-menu show-sm" style="display:none">
<ul>
<li class="scrollToService">Leistungen</li>
<li class="scrollToWork">Referenzen</li>
<li class="scrollToRental">Rental</li>
<li>Kontakt</li>
</ul>
</nav>
<nav class="header bg-black">
<div class="container" data-aos="fade-in" data-aos-delay="50">
<img src="static/wordmark-white.svg" alt="Schnittfest">
<img id="homeLink" src="static/wordmark-white.svg" alt="Schnittfest">
<ul class="hide-sm">
<li>Leistungen</li>
<li>Referenzen</li>
<li>Rental</li>
<li class="scrollToService">Leistungen</li>
<li class="scrollToWork">Referenzen</li>
<li class="scrollToRental">Rental</li>
<li>Kontakt</li>
</ul>
<ul class="show-sm">
<li id="mobileMenuOpen">Menü</li>
</ul>
</div>
</nav>
@@ -198,6 +210,66 @@
once: true,
offset: 32
});
// navbar mobile menu
let mobileMenu = document.getElementById("mobileMenu");
let mobileMenuOpen = document.getElementById("mobileMenuOpen");
let mobileMenuClose = document.getElementById("mobileMenuClose");
function toggleMobileMenu() {
let hidden = mobileMenu.style.display;
if(hidden) {
mobileMenu.style.display = "";
} else {
mobileMenu.style.display = "none"
}
}
mobileMenuOpen.addEventListener("click", e => {
e.preventDefault();
e.stopPropagation();
toggleMobileMenu();
});
// scroll to from navigation
let scrollToService = document.getElementsByClassName("scrollToService");
let scrollToWork = document.getElementsByClassName("scrollToWork");
let scrollToRental = document.getElementsByClassName("scrollToRental");
function addScrollTo(nodes, anchor) {
for (let node of nodes) {
node.addEventListener("click", () => {
toggleMobileMenu();
let section = document.getElementById(anchor);
if (window.location.pathname === "/") {
window.scrollTo({top: section.offsetTop, behavior: "smooth"});
} else {
window.location = `/#${anchor}`;
}
});
}
}
addScrollTo(scrollToService, "service");
addScrollTo(scrollToWork, "work");
addScrollTo(scrollToRental, "rental");
// click on logo navigation
let homeLink = document.getElementById("homeLink");
homeLink.addEventListener("click", e => {
e.preventDefault();
e.stopPropagation();
if(window.location.pathname === "/") {
window.scrollTo({top: 0, behavior: "smooth"});
}
else {
window.location = "/";
}
});
</script>
</body>
</html>