From 0e68257a647c2694570db9a87c4c10380f51534e Mon Sep 17 00:00:00 2001 From: SergejJahne Date: Wed, 17 Apr 2024 23:14:22 +0200 Subject: [PATCH] Navigation fertiggestellt --- Javascript/app.js | 18 +++++++++++++++ Styles/style.css | 56 +++++++++++++++++++++++++++++++++++++++++++++++ index.html | 33 +++++++++++++++------------- 3 files changed, 92 insertions(+), 15 deletions(-) diff --git a/Javascript/app.js b/Javascript/app.js index 2ee03a5..82f5e79 100644 --- a/Javascript/app.js +++ b/Javascript/app.js @@ -6,3 +6,21 @@ const swiper = new Swiper('.swiper', { 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'); + }); + }); +}); diff --git a/Styles/style.css b/Styles/style.css index dee8606..b099aa6 100644 --- a/Styles/style.css +++ b/Styles/style.css @@ -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 { width: 100%; height: 100vh; diff --git a/index.html b/index.html index 8ef8f83..dd15c57 100644 --- a/index.html +++ b/index.html @@ -11,21 +11,24 @@ - + +