Ankündigung

Einklappen
Keine Ankündigung bisher.

Kennzeichnung des aktuellen Navigationspunktes

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Kennzeichnung des aktuellen Navigationspunktes

    Hallo zusammen,
    ich habe in der Vergangenheit bei kleinen Navigationsmenüs dem aktuellen Navigationspunkt immer die Klasse "aktiv" gegeben, um damit per CSS eine andere Farbe oder Border zuzuweisen.
    Wenn ich größere Navigationsmenüs per include Befehl in die einzelnen Webseiten einbinde, besteht diese Möglichkeit meines Erachtens nicht. gibt es dafür eine Lösung?

  • #2
    Mir scheint, Du hast bisher, wenn es auf jeder Seite eine kleine Nav gab, dem betr. Navigationspunkt statisch die Klasse "aktiv" gegeben. Das funktioniert natürlich nicht, wenn die Nav eingebunden wird und der Code immer aus der selben Datei kommt. Es ist jedoch kein Problem, den Navigationspunkt, der zu der aktuellen Seite gehört, dynamisch aus der URL zu ermitteln und die Klasse zuzuweisen:
    Code:
        <script>
            const
                links = document.querySelectorAll('nav a'),
                url = location.href;
            links.forEach(link => {
                if (url.includes(link.getAttribute('href'))){
                    link.classList.add('active');
                }
            });
        </script>
    Jedenfalls wenn ich mir deine Struktur richtig vorstelle.
    Zuletzt geändert von Sempervivum; 23.04.2022, 19:06.
    Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
    (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

    Kommentar


    • #3
      Danke für Deine schnelle Reaktion. Muss ich das Script in jede Seite in den head-Bereich einfügen oder nur in der navigation.php?

      Kommentar


      • #4
        Traditionell platziert man Javascript zwar entweder im head-Bereich oder am Ende des Body, aber es sollte kein Problem sein, dieses in der navigation.php einzufügen, das hat dann den Vorteil, dass Du es nicht mehrfach hast. Dann aber am Ende, damit die Links zur Verfügung stehen.
        Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
        (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

        Kommentar


        • #5
          Sorry, aber das script setzt nicht die class active beim aktiven Link und deshalb wird auch nicht die Gestaltung aus dem CSS benutzt.

          Kommentar


          • #6
            Passt denn der Selektor in dieser Zeile?
            Code:
            links = document.querySelectorAll('nav a')
            Es müssen Links in Form von a-href-Tags vorhanden sein innerhalb eines nav-Tags.
            In dieser Form hatte ich es getestet und es hatte funktioniert.
            Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
            (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

            Kommentar


            • #7
              Bei mir sieht die Navigationsstruktur so aus:

              <nav>
              <label for="drop" class="toggle">Menü</label>
              <input type="checkbox" id="drop" />
              <ul class="menu">
              <li><a href="index.php">Home</a></li>
              <li><a href="team.php">Team</a></li>
              <li>
              <!-- First Tier Drop Down -->
              <label for="drop-1" class="toggle">Studio+</label>
              <a href="#">Studio</a>
              <input type="checkbox" id="drop-1"/>
              <ul>
              <li><a href="studio.html">Studio </a></li>
              <li><a href="pkurse.html">Präventionskurs</a></li>
              <li><a href="ems.html">Ems</a></li>
              <li><a href="ptraining.html">Personal Training</a></li>
              <li><a href="faszien.html">Faszientherapie</a></li>
              <li><a href="wellness.html">Wellness</a></li>
              </ul>
              </li>

              <li><a href="mitglied.html">Mitgliedschaft</a></li>
              <li><a href="kurse.html">Kurse </a></li>
              <li>
              <!-- First Tier Drop Down -->
              <label for="drop-2" class="toggle">Firmen Kooperationen+</label>
              <a href="#">Firmen Kooperationen</a>
              <input type="checkbox" id="drop-2"/>
              <ul>
              <li><a href="firmen.html">Firmen Kooperationen </a></li>
              <li><a href="https://reha-webpage.firebaseapp.com/#/page/kurse/recaro" target="_blank"> <b>RECARO</b> Login</a></li>
              </li>
              <!--<li><a href="firmen.html">Firmen Kooperationen</a></li>-->

              </ul>
              </nav>

              Muss ich dann in dieser Zeile - links = document.querySelectorAll('nav a'), - nach nav auch noch ul und li einfügen?

              Kommentar


              • #8
                Muss ich dann in dieser Zeile - links = document.querySelectorAll('nav a'), - nach nav auch noch ul und li einfügen?
                Nein, weil zwischen "nav" und "a" ein Leerzeichen steht kann das a-Element ein Nachfahre auf einer beliebigen Stufe sein. Eigentlich müsste es so funktionieren.
                Wenn Du das online hast, dann poste doch die URL.
                Und spielt da vielleicht eine Weiterleitung mit htaccess hinein?
                Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
                (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

                Kommentar


                • #9
                  Wenn du einen Apache-Webserver oder Windows-Webserver hast, kannst du mit der .htaccess-Datei das Rewirite-Modul verwenden. Damit lassen sich URLS so anpassen das sie so aussehen: https://meinedomain.de/aktuelles anstatt https://meinedomain.de/akutuelles.html
                  PS: Wenn euch mein Post gefallen hat, dann lasst mir ein "Daumen hoch" da!

                  Kommentar


                  • #10
                    Es gibt keine htaccess Datei. Ich habe jetzt mal die Änderungen hochgeladen. Geändert sind die Dateien index.php, team.php und navigation.php. Die Url ist - http://erich-wolf.bplaced.net/
                    Der Rest ist noch alt.

                    Kommentar


                    • #11
                      Alles klar, die Klasse wird korrekt gesetzt, aber beim a-href-Element während Du dich im CSS auf das li beziehst. Ändere das Javascript so:
                      Code:
                       const
                      links = document.querySelectorAll('nav a'),
                      url = location.href;
                      links.forEach(link => {
                      if (url.includes(link.getAttribute('href'))){
                      link.closest('li').classList.add('active');
                      }
                      });
                      BTW: Dein HTML ist nicht valide weil die eingebundene Datei das HTML-Grundgerüst mit html, head etc. enthält. Die Browser sind zwar sehr tolerant gegenüber so etwas, sollte aber nicht sein.
                      Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
                      (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

                      Kommentar


                      • #12
                        Das war die Lösung. Herzlichen Dank.

                        "BTW: Dein HTML ist nicht valide weil die eingebundene Datei das HTML-Grundgerüst mit html, head etc. enthält. Die Browser sind zwar sehr tolerant gegenüber so etwas, sollte aber nicht sein." - reicht es, wenn man nur den head-Bereich weglässt oder muss auch das html-Gerüst komplett weg?

                        Kommentar


                        • #13
                          Das gesamte HTML-Gerüst muss raus. Ich hoffe, Du brauchst es nicht anders wo mit dem Gerüst?
                          Zuletzt geändert von Sempervivum; 27.04.2022, 10:09.
                          Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
                          (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

                          Kommentar


                          • #14
                            Denk an den Datenschutz; wenn du externe Dienste wie von Google nutzt, solltest du bedenken, dass an diese Daten gesendet werden. Binde lieber lokal die Daten und Dateien die du benötigst ein oder frage vorher ob die Besucher das so möchten.
                            PS: Wenn euch mein Post gefallen hat, dann lasst mir ein "Daumen hoch" da!

                            Kommentar


                            • #15
                              Zitat von Localfu Beitrag anzeigen
                              Denk an den Datenschutz; wenn du externe Dienste wie von Google nutzt, solltest du bedenken, dass an diese Daten gesendet werden. Binde lieber lokal die Daten und Dateien die du benötigst ein oder frage vorher ob die Besucher das so möchten.
                              Sprichst du hier von den Links im head-Bereich und wenn ja, wie informierst Du Deine User?

                              Kommentar

                              homepage-forum.de - Hilfe für Webmaster! Statistiken

                              Einklappen

                              Themen: 57.089   Beiträge: 432.164   Mitglieder: 29.279   Aktive Mitglieder: 38
                              Willkommen an unser neuestes Mitglied, Grufty.

                              Online-Benutzer

                              Einklappen

                              217 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 215.

                              Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

                              Die neuesten Themen

                              Einklappen

                              • daniel5959
                                Gaspreise - gut wer Energie auf Vorrat lagern kann
                                Hallo,

                                jetzt sind alle Leute gut dran, die ihre Heizenergie im eigenen Haus lagern können und schon im Frühjahr Heizöl bestellt haben, sie müssen sich keine Sorgen um die Gaspreissteigerungen der kommenden Monate machen.

                                Bisher waren die Gaskunden gut dran, sie haben sich...
                                24.06.2022, 01:37
                              • Grufty
                                Handydarstellung
                                In der Handydarstellung meiner Homepage fehlt neuerdings das Menue. War bisher ok. Sonst alles ok.

                                Problem durch sehr prompte Hilfe durch IN MEDIA gelöst!
                                Es lag am COUNTER CODE.
                                22.06.2022, 09:04
                              • Sprueche
                                LustigX.de - Lustige Bilder & witzige Memes
                                Hallo liebe Leute,

                                ich will Euch ein neues Projekt von mir vorstellen. Es handelt sich um "LustigX.de". Auf der Webseite werden von Mitgliedern "Lustiges/Witziges" gepostet. Du kannst gerne ein Teil der Community werden und selber "Lustiges/Witziges" posten....
                                21.06.2022, 02:08
                              • daniel5959
                                Energiewende mit günstigem Ökostrom und Wärmepumpe
                                Hallo,

                                meine Berechnung für eine persönliche Energiewende.

                                A) Grob geschätzt für mein kleines Häuschen rund 850 Liter Heizöl im langjährigen Mittel, das wären (Heizöl - Heizwert ca. 9,8 kWh pro Liter) 8.330 kWh und wenn ich diese Wärme mit einer Wärmepumpe und einer Jahresarbeitszahl
                                ...
                                18.06.2022, 02:45
                              • rene_j
                                Euere Meinung und Feedback zu meinem Projekt - van-reise.eu
                                Um welches Thema geht es?
                                Es geht primär um die Themen Reisen, Wandern, Geocaching, Trekking, Urban Exploration (Lost Places) und Übernachtungen im Freien (Wälder, Berge etc.) sowie Fahrzeug Anschaffung und Ausbau.

                                Das Projekt steckt noch in Kinderschuhen.
                                Die Social-Media-Kanäle...
                                14.06.2022, 13:41

                              Die neuesten Beiträge

                              Einklappen

                              • Sprueche
                                Antwort auf SpruecheX.de - Sprüche, Zitate und Weisheiten
                                Wegen Social-Media und SEO.

                                Update: Neues Design ist online!...
                                26.06.2022, 22:51
                              • eloms
                                Antwort auf Feedback zur Überarbeitung meiner Homepage
                                Hallo

                                So, ich habe diverse Ändeungen vorgenommen und ein Zufallsbild auf der Startseite eingefügt. Klickt man auf den Link, wird das ausgewählte Bild grün angezeigt.
                                War für mich gar nicht so einfach da so umzusetzen.
                                Langsam wird die Seite fertig.

                                mfg
                                ...
                                26.06.2022, 05:47
                              • daniel5959
                                Gaspreise - gut wer Energie auf Vorrat lagern kann
                                Hallo,

                                jetzt sind alle Leute gut dran, die ihre Heizenergie im eigenen Haus lagern können und schon im Frühjahr Heizöl bestellt haben, sie müssen sich keine Sorgen um die Gaspreissteigerungen der kommenden Monate machen.

                                Bisher waren die Gaskunden gut dran, sie haben sich...
                                24.06.2022, 01:37
                              • ST747
                                Antwort auf Gaspreise - gut wer Energie auf Vorrat lagern kann
                                hi,

                                beim gas ist die lieferung derzeit gedrosselt, weil ein pumpe kaputt ist.

                                deshalb werden auch die gasspeicher nicht so gefüllt, wie geplant.

                                nach meinen informationen muss die pumpe von einer deutschen firma gewartet oder repariert werden. das geht aber nicht,...
                                25.06.2022, 13:48
                              • daniel5959
                                Antwort auf Gaspreise - gut wer Energie auf Vorrat lagern kann
                                Nachtrag 2:

                                Frage: Wie weit würde man mit maximal 256 TWh (= max. 256 Mrd. kWh) Gas kommen?



                                In den letzten 3 Monaten des Jahres - Oktober, November und Dezember - werden im Mittel 277 TWh an Gas verbraucht, d.h. die maximal gefüllten Gasspeicher wären am Jahresende...
                                25.06.2022, 05:53
                              • daniel5959
                                Antwort auf Gaspreise - gut wer Energie auf Vorrat lagern kann
                                Nachtrag:

                                Deutschland hat genau genommen keinen Gasvorrat, sondern nur einen Gaspuffer, um die Spitzen im Winter abzupuffern.



                                Also wenn die Erdgasspeicher ganz voll wären, dann würde es für 2 bis 3 Monate reichen, aber nur wenn in dieser Zeit weiterhin Gas...
                                25.06.2022, 00:15
                              • Grufty
                                Handydarstellung
                                In der Handydarstellung meiner Homepage fehlt neuerdings das Menue. War bisher ok. Sonst alles ok.

                                Problem durch sehr prompte Hilfe durch IN MEDIA gelöst!
                                Es lag am COUNTER CODE.
                                22.06.2022, 09:04
                              • Localfu
                                Antwort auf Handydarstellung
                                Hier eine Lösung von mir
                                Code:
                                var linkTitle = ['Startseite', 'Über mich', 'Aktuelles', 'Kontakt', 'Impressum'];
                                var linkURL = ['home.html', 'about.html', 'news.html', 'contact.html', 'impressum.html'];
                                var topnav;
                                document.addEventListener('DOMContentLoaded', ()=> {
                                ...
                                24.06.2022, 16:16
                              • Localfu
                                Antwort auf Handydarstellung
                                Hallo Grufty,
                                leider ist dein JavaScript-Code fehlerhaft und weisst viele Fehler auf:
                                Code:
                                jQuery.noConflict()(function($){$("<form id='mobilemenu' class='right2'><select /></form>").appendTo("#topnav"),$("<option />",{selected:"selected",value:"",value:"",text:"F"
                                ...
                                24.06.2022, 15:22
                              • daniel5959
                                Antwort auf SpruecheX.de - Sprüche, Zitate und Weisheiten
                                Hallo,

                                mich ärgern immer noch die aufs Foto geklatschten Texte.

                                Warum wird nicht einfach nur ein unifarbener Hintergrund verwendet, wenn das Foto eh nicht so wichtig ist?

                                Den Text könnte man besser ins Foto einbauen, siehe Beispiel



                                ...
                                23.06.2022, 22:58
                              Lädt...
                              X