Menüs II

Menüs sind zentrale und verbindende Element einer Web-Präsenz. Häufig möchte man ein Hauptmenü haben, das – vergleichbar mit dem Hauptmenü z.B. bei WordPress – die Navigation zu den verschiedenen Bereichen des Webauftritts ermöglicht und auf allen Seiten wiederkehrend an der selben Stelle vorhanden ist.

Ein solches Menü kann, vertikal gestaltet, gut in einer Seitenleiste eingebaut werden, sofern alle Seiten, wo es erscheinen soll, eine solche Seitenleiste im Layout vorsieht. Dafür kann man durchaus die von der Webseiten-App gebotene Menü-Funktion verwenden. Allerdings ist sie nicht besonders attraktiv gestaltet, sondern lediglich eine Link-Liste (ohne Aufzählungszeichen).

Für ein attraktiveres Menü oder ein horizontales Menü erstellt man am besten selbst ein als Block. Ein horizontales Menü als Hauptmenü hat den Vorteil, dass man es im Layout über dem eigentlichen Content platzieren kann und somit auch Layouts genutzt werden können, die über keine Seitenleiste verfügen.

Die einfachste Methode ist, den Menüblock mit BBcode zu gestalten. Dafür reiht man Links mittels [url=<ZIEL_URL>]<LINKTEXT>[/url] einfach nebeneinander.

Beispiel:

[url=https://pepecyb.hu]Link 1[/url] [url=https://hubzilla.hu]Link 2[/url] [url=https://klacker.org/channel/tutorial01]Link 3[/url]

Der Nachteil bei dieser Methode ist, dass Links auf diese Weise immer in einem neuen Browserfenster bzw. Browsertab geöffnet werden.

Besser in Hinblick auf die Steuerung der Links lässt sich das Menü mit HTML erzeugen. Dafür reiht man Links mittels <a href="<ZIEL_URL>" target="_self"><LINKTEXT></a> einfach nebeneinander. Durch target="_self" wird erreicht, dass die gewählte Zielseite im selben Browsertab geöffnet wird.

Beispiel:

<a href="https://pepecyb.hu">Punkt 1</a> <a href="https://hubzilla.hu">Punkt 2</a> <a href="https://klacker.org/channel/tutorial01" target="_self">Punkt 3</a>

Beachte: Um die Menüpunkte besser zu trennen, könnte man mehrere Leerzeichen zwischen die einzelnen href einfügen. Allerdings unterdrückt HTML traditionell mehrere aufeinander folgende Leerzeichen, weshalb hier geschützte Leerzeichen mit   eingefügt werden müssen. Ein Trennzeichen kann auch eine gute Idee sein.

Das kann dann so aussehen:

Wesentlich flexibler und featurereicher kann man ein Menü mit dem Framework Bootstrap5 gestalten. Von Vorteil ist, dass Hubzilla selbst dieses Framework nutzt und es bereits eingebunden ist. Es ist also nicht erforderlich, es für die Verwendung in eigenen Blöcken selbst einzubinden.

Für ein horizontales Menü verwenden Sie einfach eine unsortierte Liste (<ul></ul>) und fügen die Klasse .nav zum <ul> Element hinzu: <ul class="nav">.

Den einzelnen Listenelementen (<li></li>) fügen Sie die Klasse nav-item hinzu: <li class="nav-item">.

Innerhalb der Listenelement-Tags fügen sie dem <a href=> Element noch die Klasse nav-link hinzu: <a class="nav-link" href=>.

Die Definition des Beispiel-Menüs würde dann z.B. so aussehen:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="https://pepecyb.hu">Punkt 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="https://hubzilla.hu">Punkt 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="https://klacker.org/channel/tutorial01">Punkt 3</a>
  </li>
</ul>

Und als Ergebnis:

Ergänzen Sie die in <ul> verwendete Klasse nav um justify-content-center, wird das Menü zentriert dargestellt, mit nav justify-content-end rechtsbündig:

Sie können auch ein vertikales Menü mit diese Bootstrap-Klasse erzeugen: <ul class="nav flex-column">.

Noch moderner können Sie Ihr Menü gestalten, indem Sie die Klasse “navbar” verwenden. Sie kann in der Grundfunktion so verwendet werden, wie die nav-Klasse. Die Navigationsbar kann responsiv konfiguriert werden, so dass sie auf eine vertikale Darstellung ab einer bestimmten Bildschirmgröße umstellt. Dazu wird die Klasse mit

• navbar-expand-sm kleiner Bildschirm
• navbar-expand-md mittlerer Bildschirm
• navbar-expand-lg großer Bildschirm
• navbar-expand-xl sehr großer Bildschirm
• navbar-expand-xxl extrem großer Bildschirm

Außerdem kann die Hintergrundfarbe der Navigationsleiste unter Verwendung der Klassen für die Bootstrap-Hintergrundfarben festgelegt werden.

Das Beispielmenü als Navigationsleiste mit blauem Hintergrund (bg-primary), welche bei kleinen Bildschirmen in den vertikalen Modus umschaltet, würde also so erstellt werden:

<nav class="navbar navbar-expand-sm bg-light">

  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="https://pepecyb.hu">Punkt 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://hubzilla.hu">Punkt 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://klacker.org/channel/tutorial01">Punkt 3</a>
    </li>
  </ul>

</nav>

Wenn Sie die Klassenangabe für das responsive Umschalten weglassen, wird die Navigationsleiste generell vertikal dargestellt.

Mit der Klasse justify-content-center werden die Menüpunkte in der Navigationsleiste zentriert dargestellt.

Verwenden Sie eine Hintergrundfarbe für die Leiste, legen Sie mit der Klasse navbar-dark fest, dass die Menüpunkte in weißer Schrift dargestellt werden, mit der Klasse navbar-light ist die Schrift schwarz.

Weitere Möglichkeiten finden Sie in der Bootstrap-Dokumentation.

In meinem Repo mit Gestaltungswerkzeugen und Vorlagen gibt es ein Python-Skript, welches den Code für eine Navigationsleiste mit Logo-Grafik erzeugt. Weitere Features müssen Sie dann von Hand in die entsprechende Klasse einfügen: gen_navbar.py

Der Aufruf erfolgt in der Konsole:

python3 gen_navbar.py OUTFILE LOGO_URL LOGO_LINK [LINK_TITLE LINK_URL]...

Für ein Beispiel habe ich ein Hauptmenü mit dem Skript erstellt. Es verwendet eine Logo-Datei, welche zur Profilseite des Kanals führt. Darauf folgen Links zur Homepage (eine Beispiel-Webseite), zu der Artikel-, der Kanalstream- und der Wiki-Seite.

python3 gen_navbar.py tutnavbar.txt https://klacker.org/cloud/tutorial01/misc/tutlogo.png https://klacker.org/profile/tutorial01 Home https://klacker.org/page/tutorial01/home Artikel https://klacker.org/articles/tutorial01 Kanal https://klacker.org/channel/tutorial01 Wikis https://klacker.org/wiki/tutorial01

Das Ergebnis

<nav class="navbar navbar-expand-lg bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="https://klacker.org/profile/tutorial01">
      <img src="https://klacker.org/cloud/tutorial01/misc/tutlogo.png" alt="Logo" height="30" class="d-inline-block align-text-top">
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      <li class="nav-item"><a class="nav-link text-white" href="https://klacker.org/page/tutorial01/home">Home</a></li>
      <li class="nav-item"><a class="nav-link text-white" href="https://klacker.org/articles/tutorial01">Artikel</a></li>
      <li class="nav-item"><a class="nav-link text-white" href="https://klacker.org/channel/tutorial01">Kanal</a></li>
      <li class="nav-item"><a class="nav-link text-white" href="https://klacker.org/wiki/tutorial01">Wikis</a></li>
      </ul>
    </div>
  </div>
</nav>

wurde als Block “main_menu” genutzt. Diesen Block habe ich dann auf allen “beteiligten” Seiten (Profil, Artikel, Kanal, Wiki) über den Inhaltsbereich geschoben und in der Layout-Datei für die Demo-Homepage ebenfalls über den Inhaltsbereich $content:

[region=aside]
[widget=notifications][/widget]

[/region]
[region=content]
[block]main_menu[/block]
$content

[/region]
[region=right_aside]
[widget=profile][/widget]
[widget=articles_categories][/widget]

[/region]

Damit gibt es nun eine grundlegende Navigation: