PBA3H22AJO/ProbelaufZoo
1
0
Fork 0
Code Issues 17 Pull Requests Packages Projects 2 Releases Wiki Activity

Navigation fertiggestellt

Browse Source
This commit is contained in:
Sergej Jahne 2024-04-17 23:14:22 +02:00
parent e17aab4e00
commit 0e68257a64
3 changed files with 92 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
Javascript/app.js
View File

@ -6,3 +6,21 @@ const swiper = new Swiper('.swiper', {
el: '.swiper-pagination', el: '.swiper-pagination',
}, },
}); });
// Für die Links in der Navbar, dass die Striche beim aktuell geklickten bleiben
document.addEventListener("DOMContentLoaded", function() {
var navLinks = document.querySelectorAll('.navbar .nav-link');
var initialSelected = document.querySelector('.navbar .nav-link[aria-current="page"]');
if (initialSelected) {
initialSelected.classList.add('selected');
}
navLinks.forEach(function(link) {
link.addEventListener('click', function() {
// Alle anderen Links zurücksetzen
navLinks.forEach(l => l.classList.remove('selected'));
// Die 'selected' Klasse zum angeklickten Link hinzufügen
link.classList.add('selected');
});
});
});

56
Styles/style.css
View File

@ -1,3 +1,59 @@
/* Navigation*/
.navbar {
background-color: #212121 !important;
margin-bottom: 20px;
height: 70px;
}
.navbar .navbar-nav .nav-link { /* Schrift für Nav-Links ändern */
color: #FFFFFF;
font-size: 13pt;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 20px !important;
}
.navbar-brand img {
padding-left: 10px;
}
.nav-link.selected::after { /* Über uns startet mit den Grünen-Nav-Strichen */
visibility: visible;
transform: scaleX(1);
}
.nav-link.active, .nav-link:hover, .nav-link:focus {
color: #4CAF50;
transition: color 0.5s ease;
color: #FFFFFF;
}
.nav-link { /* Animation für das die Links */
position: relative;
transition: all 0.3s ease-out;
}
.nav-link::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #4CAF50;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.nav-link:hover::after, .nav-link:focus::after {
visibility: visible;
transform: scaleX(1);
}
/* Navigationsende*/
section { section {
width: 100%; width: 100%;
height: 100vh; height: 100vh;

11
index.html
View File

@ -11,15 +11,17 @@
<body> <body>
<!-- Navbar --> <!-- Navbar -->
<nav class="navbar sticky-top navbar-expand-lg bg-body-tertiary bg-dark border-bottom border-body" data-bs-theme="dark"> <nav class="navbar sticky-top navbar-expand-lg">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand" href="#"><img src="Src/zoowebseite-high-resolution-logo-transparent.png" alt="Logo" width="120" height="120" class="d-inline-block align-text"></a> <a class="navbar-brand" href="#">
<img src="Src/zoowebseite-high-resolution-logo-transparent.png" alt="Logo" width="170" height="auto" class="d-inline-block align-text-top">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav"> <div class="navbar-nav ms-auto">
<a class="nav-link active" aria-current="page" href="#">Über uns</a> <a class="nav-link" aria-current="page" href="#ueberUns">Über uns</a>
<a class="nav-link" href="#openingHours">Öffnungszeiten</a> <a class="nav-link" href="#openingHours">Öffnungszeiten</a>
<a class="nav-link" href="#">Patenshop</a> <a class="nav-link" href="#">Patenshop</a>
</div> </div>
@ -27,6 +29,7 @@
</div> </div>
</nav> </nav>
<!-- Über Uns Section --> <!-- Über Uns Section -->
<section class="container" id="ueberUns"> <section class="container" id="ueberUns">
<div class="row"> <div class="row">