Mobirise-Tutorials.com

Mal gucken, ob der Volker Zeit und Lust hat:

Bei einer umfangreichen Webseite bin ich nach wie vor der Meinung, daß es wichtig ist zu erkennen, wo man sich gerade befindet.
Für mich war es ziemlich aufwändig, das auf jeder Seite im HTML händisch zu bearbeiten. Global mußte auch entfernt werden. Aber es geht:
https://www.meinlangengrassau.de
Das muss doch einfacher möglich sein !
Das Internet sagt mir folgendes:

[Ein Webseiten-Menü, das immer anzeigt, wo man sich gerade befindet, ist ein essenzielles Element für eine gute Benutzererfahrung.
Es hilft Nutzern, sich auf der Seite zu orientieren.
Dies wird technisch meist durch CSS-Klassen (z. B. .active oder .current) umgesetzt, die den aktuellen Menüpunkt visuell hervorheben.

Methode z.B.:
1. Technische Umsetzung (CSS & JavaScript)
CSS-Klassen: Sie können eine CSS-Klasse erstellen, die den aktiven Link beispielsweise farblich unterstreicht oder fett darstellt.

css
.nav-link.active {
font-weight: bold;
color: blue;
border-bottom: 2px solid blue;
}

Verwende Code mit Vorsicht.
JavaScript: Ein Skript kann die aktuelle URL der Seite (window.location.pathname) mit den Links im Menü vergleichen und die entsprechende Klasse (.active) automatisch hinzufügen.

aria-current="page": Aus Gründen der Barrierefreiheit ist es ratsam, das Attribut aria-current="page" im HTML zu verwenden, um Screenreadern mitzuteilen, welcher Link aktiv ist.

Einen schönen Sonntag noch

Moin,

das nennt man übrigens "Breadcrumb Navigation", die ich hier schon mal vor vielen Jahren vorgestellt hatte:

https://www.mobirise-tutorials.com/Tuto ... crumb.html

Um die Navigationsleiste selbst hervorzuheben, kann man ein JavaScript hinzufügen. Das hatte ich als Beispiel auch schon einmal vor vielen Jahren hier erstellt:

https://www.mobirise-tutorials.com/High ... ive-Class/

Ja, alles ok. Aber jetzt stell Dir mal vor, es gäbe als Erweiterung ein Menü, wo die aktiv besuchte Seite hervorgehoben wird. Und natürlich auch noch die Unterseite, also beides !

Gibt es ab jetzt als Block - allerdings unter dem Menü

https://www.niederastroth.de/bewertung/

Hab den mal blau hinterlegt. den block in jede Seite unter das Menü und schon weiß man wo man ist

Hier der Code für diesen Block:

HTML:

Code: Alles auswählen

<section data-bs-version="5.1" class="breadcrumb-section" style="margin-top: {{marginTop}}px; background-color: {{bgColor}} !important;">
    <mbr-parameters>
        <header>Abstände</header>
        <input type="range" title="Abstand oben" name="marginTop" min="0" max="250" step="5" value="0">
        <input type="range" title="Balken Höhe" name="paddingVertical" min="0" max="100" step="5" value="20">
        <header>Farben</header>
        <input type="checkbox" title="Volle Breite" name="fullWidth">
        <input type="color" title="Hintergrund" name="bgColor" value="#9fdbf8">
        <input type="color" title="Text Farbe" name="textColor" value="#232323">
    </mbr-parameters>

    <div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}" style="padding-top: {{paddingVertical}}px; padding-bottom: {{paddingVertical}}px;">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb-list">
                <li class="breadcrumb-item">
                    <a href="index.php" style="color: {{textColor}} !important;">Home</a>
                </li>
                <li class="breadcrumb-item active" style="color: {{textColor}};">
                    <span id="auto-breadcrumb-name" class="current-text">...</span>
                </li>
            </ol>
        </nav>
    </div>

   <script>
document.addEventListener("DOMContentLoaded", function() {
    // 1. Pfad auslesen
    let path = window.location.pathname;
    
    // 2. Dateinamen isolieren (entfernt Pfade und Endungen wie .php oder .html)
    let filename = path.split("/").pop().split(".")[0];

    // 3. Logik für die Startseite (index)
    if (filename === "" || filename === "index") {
        document.getElementById("auto-breadcrumb-name").innerText = "Startseite";
    } else {
        // 4. Namen formatieren: Bindestriche/Unterstriche weg, erster Buchstabe groß
        let formattedName = filename.replace(/[-_]/g, ' ');
        document.getElementById("auto-breadcrumb-name").innerText = formattedName;
    }
});
</script>
</section>

CSS:

Code: Alles auswählen

.breadcrumb-section {
  position: relative;
  z-index: 10;
  width: 100%;
}
.breadcrumb-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  padding: 0 15px;
  color: #cccccc;
}
.current-text {
  font-weight: bold;
  text-transform: capitalize;
}

So geht das natürlich auch

So bleibt auch die globale Einstellung bestehen.

Was mich nur beschäftigt hat, ist die Tatsache, daß es händisch möglich ist, im Menü die aktive Seite und die aktive Unterseite hervorzuheben. Und wenn es händisch möglich ist, müßte es doch eigentlich auch automatisch möglich sein.
Vielleicht bin ich aber auch zu blauäugig

Auch das geht

Hab ich gerade eingebaut https://www.niederastroth.de/bewertung/index.php

Wenn du das so meinst

Das kann man in jedes Menü einbauen

So kannst Du auch den Block unten weg lassen dann sieht man ja oben im Menü welche Seite aktiv ist.

Hier das geänderte Original Menü:

HTML:

Code: Alles auswählen

<section data-bs-version="5.1" class="menu menu2" group="Menu" plugins="DropDown, TouchSwipe" always-top global once="menu" not-draggable position-absolute>
    <mbr-parameters>
        <header>Size</header>
        <input type="checkbox" name="fullWidth" title="Full Width">
        <header>Show/Hide</header>
        <input type="checkbox" title="Logo" name="showLogo" checked>
        <input type="range" title="Logo Size" inline name="logoSize" min="3" max="8" step="0.1" value="3" condition="showLogo">
        <input type="checkbox" title="Brand Name" name="showBrand" checked>
        <input type="checkbox" title="Menu Items" name="showItems" checked>
        <input type="checkbox" title="Icons" name="showIcons">
        <select title="Amount" name="iconsAmount" condition="showIcons">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected>3</option>
            <option value="4">4</option>
        </select>
        <input type="color" title="Icons Color" name="iconsColor" value="#000000" condition="showIcons">
        <input type="checkbox" title="Button" name="showButtons" checked>
        <header>Styles</header>
        <input type="checkbox" title="Sticky" name="sticky" checked>
        <input type="checkbox" title="Collapsed" name="collapsed">
        <input type="checkbox" title="Transparent" name="transparent">
        <input type="range" title="Opacity" name="opacity" min="0" max="1" step="0.1" value="0.2" condition="transparent">
        <input type="color" title="Color" name="menuBgColor" value="#ffffff">
        <input type="color" title="Hamburger" name="hamburgerColor" value="#000000">
    </mbr-parameters>
    <nav class="navbar navbar-dropdown" mbr-class="{'navbar-fixed-top':sticky,
                    'navbar-expand-lg':!collapsed,
                    'collapsed':collapsed}">
        <div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
            <div class="navbar-brand">
                <span mbr-if="showLogo" class="navbar-logo">
                    <a href="https://mobiri.se">
                        <img src="../_images/logo.png" alt="Mobirise Website Builder" mbr-style="{'height': logoSize + 'rem'}">
                    </a>
                </span>
                <span mbr-if="showBrand" mbr-buttons mbr-theme-style="display-7" class="navbar-caption-wrap" data-toolbar="-mbrBtnMove,-mbrBtnAdd,-mbrBtnRemove,-iconFont"><a class="navbar-caption text-black" data-app-selector=".navbar-caption" href="https://mobiri.se" data-app-placeholder="Type Text">Mobirise</a></span>
            </div>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-bs-toggle="collapse" data-target="#navbarSupportedContent" data-bs-target="#navbarSupportedContent" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation" mbr-if="showItems || showIcons || showButtons">
                <div class="hamburger">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent" mbr-if="showItems || showIcons || showButtons">
                <ul mbr-menu class="navbar-nav nav-dropdown" mbr-theme-style="display-4" mbr-if="showItems" mbr-class="{'nav-right': !showButtons,'navbar-nav-top-padding': isPublish && !showBrand && !showLogo}"><li class="nav-item"><a class="nav-link link text-black text-primary" href="index.php" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">Start</a></li>
                    <li class="nav-item"><a class="nav-link link text-black text-primary" href="seite2.html" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">Seite2</a></li>
                    <li class="nav-item"><a class="nav-link link text-black text-primary" href="contacts.html" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">Contacts</a>
                    </li></ul>
                <div class="icons-menu" mbr-if="showIcons">
                    <a class="iconfont-wrapper" href="https://mobiri.se" target="_blank">
                        <span mbr-icon class="p-2 mbr-iconfont socicon-facebook socicon"></span>
                    </a>
                    <a class="iconfont-wrapper" href="https://mobiri.se" target="_blank" mbr-if="iconsAmount > 1">
                        <span mbr-icon class="p-2 mbr-iconfont socicon-twitter socicon"></span>
                    </a>
                    <a class="iconfont-wrapper" href="https://mobiri.se" target="_blank" mbr-if="iconsAmount > 2">
                        <span mbr-icon class="p-2 mbr-iconfont socicon-instagram socicon"></span>
                    </a>
                    <a class="iconfont-wrapper" href="https://mobiri.se" target="_blank" mbr-if="iconsAmount > 3">
                        <span mbr-icon class="p-2 mbr-iconfont socicon-linkedin socicon"></span>
                    </a>
                </div>
                <div mbr-if="showButtons" mbr-buttons mbr-theme-style="display-4" class="navbar-buttons mbr-section-btn">
                    <a class="btn btn-primary" href="https://mobiri.se" data-app-placeholder="Type Text">
                        Download Now</a>
                </div>
            </div>
        </div>
    </nav>
    <script>
document.addEventListener("DOMContentLoaded", function() {
    var currentUrl = window.location.pathname.split("/").pop();
    if (currentUrl === "") currentUrl = "index.php";

    // Alle Links im Menü durchsuchen
    var navLinks = document.querySelectorAll('.nav-link, .dropdown-item');
    
    navLinks.forEach(function(link) {
        var linkHref = link.getAttribute('href');
        if (linkHref === currentUrl) {
            link.classList.add('active');
            // Wenn es ein Dropdown-Item ist, auch den übergeordneten Punkt markieren
            var parentDropdown = link.closest('.dropdown');
            if (parentDropdown) {
                parentDropdown.querySelector('.nav-link').classList.add('active');
            }
        }
    });
});
</script>
</section>

CSS:

Code: Alles auswählen

& when not (@sticky) {
  .navbar-dropdown {
    position: relative !important;
  }
  & when (@transparent) {
    .navbar-dropdown {
      position: absolute !important;
    }
  }
}
& when (@sticky) {
  z-index: 1000;
  width: 100%;
  & when not (@transparent) {
    position: relative;
    min-height: 60px;
  }
  nav.navbar {
    position: fixed;
  }
}
.dropdown-item:before {
  font-family: Moririse2 !important;
  content: "\e966";
  display: inline-block;
  width: 0;
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  margin-right: 0.5rem;
  line-height: 1;
  font-size: inherit;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
  transform: scale(0, 1);
  transition: all 0.25s ease-in-out;
}
.dropdown-menu {
  padding: 0;
  border-radius: 4px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.dropdown-item {
  border-bottom: 1px solid #e6e6e6;
  &:hover, &:focus {
    background: @primaryColor !important;
    color: white !important;
  }
  &:hover span {
    color: white;
  }
  &:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  &:last-child {
    border-bottom: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}
.nav-dropdown .link {
  padding: 0 0.3em !important;
  margin: 0.667em 1em !important;
}
.nav-dropdown .link.dropdown-toggle::after {
  margin-left: 0.5rem;
  margin-top: 0.2rem;
}
.nav-link {
  position: relative;
}
.container {
  display: flex;
  margin: auto;
  flex-wrap: nowrap;
  @media (max-width: 991px) {
    flex-wrap: wrap;
  }
  & when (@collapsed) {
    flex-wrap: wrap;
  }
}
.container-fluid {
  flex-wrap: nowrap;
  @media (max-width: 991px) {
    flex-wrap: wrap;
  }
  & when (@collapsed) {
    flex-wrap: wrap;
  }
}
.iconfont-wrapper {
  color: @iconsColor !important;
  font-size: 1.5rem;
  padding-right: 0.5rem;
}
.navbar-caption {
}
.navbar-nav {
}
.dropdown-menu, .navbar.opened {
  background: @menuBgColor !important;
}
.nav-item:focus, .nav-link:focus {
  outline: none;
}
.dropdown .dropdown-menu .dropdown-item {
  width: auto;
  transition: all 0.25s ease-in-out;
  &::after {
    right: 0.5rem;
  }
  .mbr-iconfont {
    margin-right: 0.5rem;
    vertical-align: sub;
    &:before {
      display: inline-block;
      transform: scale(1, 1);
      transition: all 0.25s ease-in-out;
    }
  }
}
.collapsed {
  .dropdown-menu .dropdown-item:before {
    display: none;
  }
  .dropdown .dropdown-menu .dropdown-item {
    padding: 0.235em 1.5em 0.235em 1.5em !important;
    transition: none;
    margin: 0 !important;
  }
}
.navbar {
  min-height: 70px;
  transition: all 0.3s;
  border-bottom: 1px solid transparent;
  &:not(.navbar-short) {
  }
  & when not (@transparent) {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    background: @menuBgColor;
  }
  & when (@transparent) {
    position: absolute;
    background: rgba(red(@menuBgColor), green(@menuBgColor), blue(@menuBgColor), @opacity);
  }
  &.opened {
    transition: all 0.3s;
  }
  .dropdown-item {
    padding: 0.5rem 1.8rem;
  }
  .navbar-logo img {
    width: auto;
  }
  .navbar-collapse {
    justify-content: flex-end;
    z-index: 1;
  }
  &.collapsed {
    justify-content: center;
    .nav-item .nav-link::before {
      display: none;
    }
    &.opened {
      .dropdown-menu {
        top: 0;
      }
      @media (min-width: 992px) {
        &:not(.navbar-short) .navbar-collapse when (@showLogo) {
          max-height: ~"calc(98.5vh - @{logoSize}rem)";
        }
      }
    }
    .dropdown-menu {
      .dropdown-submenu {
        left: 0 !important;
      }
      .dropdown-item:after {
        right: auto;
      }
      .dropdown-toggle[data-toggle="dropdown-submenu"]:after {
        margin-left: 0.5rem;
        margin-top: 0.2rem;
        border-top: 0.35em solid;
        border-right: 0.35em solid transparent;
        border-left: 0.35em solid transparent;
        border-bottom: 0;
        top: 41%;
      }
    }
    ul.navbar-nav {
      li {
        margin: auto;
      }
    }
    .dropdown-menu .dropdown-item {
      padding: 0.25rem 1.5rem;
      text-align: center;
    }
    .icons-menu {
      padding-left: 0;
      padding-right: 0;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }
  }
  @media (max-width: 991px) {
    .nav-item .nav-link::before {
      display: none;
    }
    &.opened {
      .dropdown-menu {
        top: 0;
      }
    }
    .dropdown-menu {
      .dropdown-submenu {
        left: 0 !important;
      }
      .dropdown-item:after {
        right: auto;
      }
      .dropdown-toggle[data-toggle="dropdown-submenu"]:after {
        margin-left: 0.5rem;
        margin-top: 0.2rem;
        border-top: 0.35em solid;
        border-right: 0.35em solid transparent;
        border-left: 0.35em solid transparent;
        border-bottom: 0;
        top: 40%;
      }
    }
    .navbar-logo {
      img {
        height: 3rem !important;
      }
    }
    ul.navbar-nav {
      li {
        margin: auto;
      }
    }
    .dropdown-menu .dropdown-item {
      padding: 0.25rem 1.5rem !important;
      text-align: center;
    }
    .navbar-brand {
      flex-shrink: initial;
      flex-basis: auto;
      word-break: break-word;
      padding-right: 2rem;
      @media (max-width: 767px) {
        width: ~"calc(100% - 31px)";
      }
    }
    .navbar-toggler {
      flex-basis: auto;
    }
    .icons-menu {
      padding-left: 0;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }
  }
  &.navbar-short {
    min-height: 60px;
    .navbar-logo {
      img {
        height: 2.5rem !important;
      }
    }
    .navbar-brand {
      min-height: 60px;
      padding: 0;
    }
  }
}
.navbar-brand {
  min-height: 70px;
  flex-shrink: 0;
  align-items: center;
  margin-right: 0;
  padding: 10px 0;
  transition: all 0.3s;
  word-break: break-word;
  z-index: 1;
  .navbar-caption {
    line-height: inherit !important;
  }
  .navbar-logo a {
    outline: none;
  }
}
.dropdown-item.active, .dropdown-item:active {
  background-color: transparent;
}
.navbar-expand-lg .navbar-nav .nav-link {
  padding: 0;
}
.nav-dropdown .link.dropdown-toggle {
  margin-right: 1.667em;
  &[aria-expanded="true"] {
    margin-right: 0;
    padding: 0.667em 1.667em;
  }
}
.navbar.navbar-expand-lg .dropdown {
  .dropdown-menu {
    background: @menuBgColor;
    .dropdown-submenu {
      margin: 0;
      left: 100%;
    }
  }
}
.navbar .dropdown.open > .dropdown-menu {
  display: block;
}
ul.navbar-nav {
  flex-wrap: wrap;
}
.navbar-buttons {
  text-align: center;
  min-width: 170px;
}
button.navbar-toggler {
  outline: none;
  width: 31px;
  height: 20px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  align-self: center;
  .hamburger span {
    position: absolute;
    right: 0;
    width: 30px;
    height: 2px;
    border-right: 5px;
    background-color: @hamburgerColor;
    &:nth-child(1) {
      top: 0;
      transition: all 0.2s;
    }
    &:nth-child(2) {
      top: 8px;
      transition: all 0.15s;
    }
    &:nth-child(3) {
      top: 8px;
      transition: all 0.15s;
    }
    &:nth-child(4) {
      top: 16px;
      transition: all 0.2s;
    }
  }
}
nav.opened .hamburger span {
  &:nth-child(1) {
    top: 8px;
    width: 0;
    opacity: 0;
    right: 50%;
    transition: all 0.2s;
  }
  &:nth-child(2) {
    transform: rotate(45deg);
    transition: all 0.25s;
  }
  &:nth-child(3) {
    transform: rotate(-45deg);
    transition: all 0.25s;
  }
  &:nth-child(4) {
    top: 8px;
    width: 0;
    opacity: 0;
    right: 50%;
    transition: all 0.2s;
  }
}
.navbar-dropdown {
  padding: 0 1rem;
  & when (@sticky) {
    position: fixed;
  }
}
a.nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
}
.icons-menu {
  flex-wrap: nowrap;
  display: flex;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.3rem;
  text-align: center;
}
@media screen and (~'-ms-high-contrast: active'), (~'-ms-high-contrast: none') {
  .navbar {
    height: 70px;
    &.opened {
      height: auto;
    }
  }
  .nav-item .nav-link:hover::before {
    width: 175%;
    max-width: calc(100% ~"+" 2rem);
    left: -1rem;
  }
}
.nav-item.active .nav-link, .nav-link.active {
  color: @primaryColor !important;
  font-weight: bold !important;
  border-bottom: 2px solid @primaryColor;
}
.dropdown-item.active {
  background-color: @primaryColor !important;
  color: #ffffff !important;
  font-weight: bold;
}

Einfach einen Menüblock nehmen und da meinen Code rein

Mach' ich mal, freu mich schon !

.... übrigens nur als Hinweis, mein Beispiel (oben) ist die von Bootstrap dafür vorgesehene Anwendung:

https://getbootstrap.com/docs/5.0/compo ... readcrumb/

Mobirise-Tutorials.com

Benutzerführung

Benutzerführung

Re: Benutzerführung

Re: Benutzerführung

Re: Benutzerführung

Re: Benutzerführung

Re: Benutzerführung

Re: Benutzerführung

Re: Benutzerführung

Re: Benutzerführung

Re: Benutzerführung