Aktive Navi Tutorial

Tutorial

Diese JavaScript habe ich bei stackoverflow.com gefunden und hier eingepasst.

Für das Script müsst ihr im "Code Editor" an das <nav> Tag von Mobirise, die im Script verwendete id="mynav" schreiben, also hier:

<nav id="mynav" class="navbar navbar-dropdown" ........ >

Weiterhin sucht das Script in einer "for" Schleife ab Position i=0 nach <a> Tags, die dann mit i++ hochzählt, bis es keine mehr findet. Durch diese Schleife wird dann jede später hinzukommende Seite in der Navigation ebenfalls durch das Script automatisch erkannt.

Ich habe hier i=2 gesetzt, da mein Logo und der Text-Link "Mobirise" in meiner Navi auch bereits <a> Tags, also Links, besitzen und sonst mit in die Hervorhebung aufgenommen würden. So gilt die CSS hier dann erst ab dem 3. Link "Startseite". Andererseits muss jeder Link, also auch diese ersten beiden Links, vom Script erfasst werden, denn sonst funktionieren die Links nicht mehr. Dies gilt auch für den Hamburger-Button am Smartphone. Die ID muss also ganz außen am <nav> Tag angebracht werden.

<!-- JavaScript to change active menu link -->
<script>
function setActive() {
  linkObj = document.getElementById('mynav').getElementsByTagName('a');
  for(i=2;i<linkObj.length;i++) {
    if(document.location.href.indexOf(linkObj[i].href)>=0) {
      linkObj[i].classList.add("active");
    }
  }
}
window.onload = setActive;
</script>

Dazu habe ich folgende CSS verwendet. Das Gestalten der CSS hat sich als etwas schwierig erwiesen, weil Mobirise und Bootstrap viele CSS-Klassen an der Navigation verwendet, die sich teilweise nicht oder nur schwierig ändern lassen. Da das JavaScript die <a> Tags anspricht, kann ich auch nur diesen Tags durch die class="active" eine CSS geben. Insofern habe ich hier nur eine andere Hintergrundfarbe mit einem auf 10px abgerundeten Rahmen zur Hervorhebung gewählt.

Damit hier eine rote Textfarbe angezeigt wird, musste ich die Mobirise class="text-black" für die Linkfarbe entfernen, da diese Class direkt am <a> Tag steht. Zusätzlich habe ich an den <a> Tags vom Submenü auch noch die class="text-primary" entfernt.  Dafür habe ich dann dem <a> Tag einfach die Farbe Schwarz im "CSS Editor" vom Menü-Block zugeordnet also dann so:

a {
  color: black;
}

Das könnt ihr natürlich individuell gestalten und selbst anpassen wie ihr wollt und müsst das ein wenig ausprobieren. Die zusätzliche CSS Anweisung !important (!wichtig) wird nur für das Dropdown Submenü benötigt, da diese Anweisungen sonst von Mobirise überschrieben werden.

<style>
.active {
  color: red !important;
  background-color: #ffffff !important;
  border-radius: 10px !important;
  border: 1px solid #000000 !important;
}
</style>

Bitte fügt die CSS inklusive des öffnenden <style> und des schließenden </style> Tags und das JavaScript in den globalen Einstellungen von Mobirise ein, damit diese über alle Seiten wirken. So wie auch im Screenshot unten zu sehen.

> Menü > Sites > an Projekt-Kachel auf das Zahnrad ⚙️ klicken > "Global HTML Insert"

Die Style-Anweisung fügt ihr oben in dem Bereich "Before </head> code:" ein.

Das JavaScript fügt ihr weiter unten in den Bereich "Before </body> code:" ein.

Beachtet, dass diese Hervorhebungen erst nach dem lokalen oder entfernten Publizieren sichtbar sind, also noch nicht auf der Arbeitsseite von Mobirise, da die Skripte in der HTML der Seite erst vom Browser verarbeitet werden müssen.

Beachtet bitte auch, dass immer der Dateiname der Seite in einem Link dabei steht. Also auch bei der Startseite "index.html", da das Skript die Class nur über den Dateinamen setzen kann.