« Zurück

Dot Navigation

Version:
0.1.12
Release Date:
2026/05/13
License:
GPL
Authors:
rudi222, KI
Description language:
EN | DE
Description EN:

The **Dot Navigation** module creates an elegant dot navigation for one-page websites. The navigation is fixed to the right or left edge of the screen and indicates which section the visitor is currently viewing (scroll-spy). Hovering over a dot reveals the section label.

### Features

- Automatic detection of the active section (scroll-spy)
- Hover effect shows section label with connecting line
- Position: right or left, freely configurable distance from edge
- Breakpoint: navigation is only shown above a defined screen width
- Adjustable font size – dot and line scale automatically
- Colour: one colour for all elements or separate colours for dot, line and text
- Consistent hover area for all menu entries regardless of label length
- Accessible navigation (ARIA attributes)
- Language support: German and English

### Installation

1. Upload the ZIP file in the WBCE backend under **Add-ons → Modules**
2. Install the module
3. Add a new section of type **Dot Navigation** to the desired page

### Setup

1. Edit the page in the backend
2. Click edit on the **Dot Navigation** section
3. Select the sections to show in the menu (checkbox) and adjust labels
4. Configure position, font size and colour
5. Save

### Requirements

- WBCE CMS 1.4.0 or higher
- PHP 7.0 or higher
- Page sections must be available in the HTML as `` – WBCE handles this automatically

### Notes

- This module is designed exclusively for one-page websites
- The navigation is only visible above the configured breakpoint (default: 1200px)
- To update the module, simply upload the new ZIP file in the backend – uninstalling first is not required as long as the database structure has not changed

---

## Changelog

See `CHANGELOG.md`

Description DE:

Das Modul **Dot Navigation** erzeugt eine elegante Punktnavigation für OnePager-Websites. Die Navigation erscheint fest positioniert am rechten oder linken Bildschirmrand und zeigt an, in welchem Abschnitt der Seite sich der Besucher gerade befindet (Scroll-Spy). Beim Hover über einen Punkt erscheint die Bezeichnung des Abschnitts.

### Funktionen

- Automatische Erkennung des aktiven Abschnitts (Scroll-Spy)
- Hover-Effekt zeigt Abschnittsbezeichnung mit Verbindungsstrich
- Position: rechts oder links, frei konfigurierbarer Randabstand
- Breakpoint: Navigation wird erst ab einer bestimmten Bildschirmbreite angezeigt
- Schriftgröße einstellbar – Punkt und Strich skalieren automatisch mit
- Farbe: eine Farbe für alle Elemente oder separate Farben für Punkt, Strich und Text
- Gleichmäßiger Hover-Bereich für alle Menüeinträge
- Barrierefreie Navigation (ARIA-Attribute)
- Sprachunterstützung: Deutsch und Englisch

### Installation

1. ZIP-Datei im WBCE-Backend unter **Erweiterungen → Module** hochladen
2. Modul installieren
3. Auf der gewünschten Seite einen neuen Abschnitt vom Typ **Dot Navigation** hinzufügen

### Einrichtung

1. Im Backend die Seite bearbeiten
2. Im Abschnitt **Dot Navigation** auf Bearbeiten klicken
3. Sektionen auswählen die im Menü erscheinen sollen (Checkbox) und Bezeichnungen anpassen
4. Position, Schriftgröße und Farbe konfigurieren
5. Speichern

### Voraussetzungen

- WBCE CMS 1.4.0 oder höher
- PHP 7.0 oder höher
- Die Sektionen der OnePager-Seite müssen im HTML als `` vorhanden sein – das erledigt WBCE automatisch

### Hinweise

- Das Modul ist ausschließlich für OnePager konzipiert
- Die Navigation ist nur für Bildschirmbreiten ab dem konfigurierten Breakpoint sichtbar (Standard: 1200px)
- Beim Update des Moduls reicht es, die neue ZIP-Datei im Backend hochzuladen – eine Deinstallation ist nicht erforderlich, sofern sich die Datenbankstruktur nicht geändert hat

Slider picture Slider picture