chrosey/urlaub-friedrichroda
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[TASK] Navigationsleiste hinzugefügt

Browse Source 
- scrollen per Javascript (wenn möglich)
- wenn nicht dann per Hash
This commit is contained in:
Christian Seyfferth 2020-04-10 18:45:52 +02:00
parent b30f548080
commit 94a9f48872
2 changed files with 39 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
index.html
View File

@ -15,25 +15,35 @@
</head> </head>
<body> <body>
<nav class="white" style="display:none"></nav> <div class="navbar-fixed">
<nav class="green lighten-2">
<div class="nav-wrapper container">
<a href="/" id="logo-container" class="brand-logo">
<img src="favicon.png" alt="Visitenkarten-Logo" height="64">
</a>
<ul class="right hide-on-med-and-down">
<li><a href="#willkommen">Willkommen</a></li>
<li><a href="#wohnung">Ferienwohnung</a></li>
<li><a href="#buchung">Anfahrt und Buchung</a></li>
</ul>
</div>
</nav>
</div>
<div id="willkommen-banner" class="parallax-container valign-wrapper" style="height:100vh"> <div id="willkommen-banner" class="parallax-container valign-wrapper" style="height:100vh">
<div class="container"> <div class="container">
<div class="card-panel"> <div class="card-panel">
<div class="center"> <div class="center">
<h1 class="heading-2">Ferienwohnung "<span class="uppercase">Wanderlust</span>"</h1> <h1 class="heading-2">Ferienwohnung "<span class="uppercase">Wanderlust</span>"</h1>
</div> </div>
<h2 class="heading-5 light center"><i>Entspannen in gemütlicher Atmosphäre</i></h2> <h2 class="heading-5 light center"><i>Entspannen in gemütlicher Atmosphäre</i></h2>
</div> </div>
</div> </div>
<div class="parallax"> <div class="parallax">
<img src="bilder/2400px/StartbildOriginal_Rev.jpg" alt="Eindrücke unserer Ferienwohnung"> <img src="bilder/2400px/StartbildOriginal_Rev.jpg" alt="Eindrücke unserer Ferienwohnung">
</div> </div>
</div> </div>
<div class="container"> <section id="willkommen" class="container">
<section id="willkommen" class="row"> <div class="row">
<div class="col s12 m8"> <div class="col s12 m8">
<h2>Willkommen</h2> <h2>Willkommen</h2>
<p> <p>
@ -57,8 +67,8 @@
Wir freuen uns auf Ihren Besuch. Wir freuen uns auf Ihren Besuch.
</p> </p>
</div> </div>
</section>
</div> </div>
</section>
<div id="wohnung-banner" class="parallax-container"> <div id="wohnung-banner" class="parallax-container">
<div class="parallax"> <div class="parallax">
<img src="bilder/2400px/5.jpg" alt=""> <img src="bilder/2400px/5.jpg" alt="">

20
script.js
View File

@ -10,4 +10,24 @@ document.addEventListener('DOMContentLoaded', function () {
return false; return false;
} }
}); });
var hashAnchors = document.querySelectorAll("a[href^='#']");
hashAnchors.forEach(element => {
element.onclick = function () {
var target = this.getAttribute("href");
scrollToElement(target);
return false;
}
});
}); });
function scrollToElement(name) {
var elementToScrollTo = document.querySelector(name);
var top = elementToScrollTo.getBoundingClientRect().top + window.pageYOffset - 48;
window.scrollTo({
top: top,
behavior: "smooth"
})
}