Ein Drop Down Menu für mehrere Seiten eines Webs

  • Rahmenbedingungen

    HTML-Version: HTML5

    zusätzliche Techniken:

    Einschränkungen:

    Browser & Betriebssystem: Chrome WIN 11

    Editor: Visual Studio Code


    Problembeschreibung

    Fehlermeldung/-beschreibung:

    Hallo allerseits

    Da ich noch gar keinen Code habe habe ich noch keine Fehlerbeschreibung. Meine Frage ist deshalb grundsätzlicher Natur.

    Ich möchte ein DropDown Menu erstellen, das auf allen Seiten meines zukünftigen Webs erscheinen soll. Ich habe mich im Netz schon umgesehen wie das gemacht wird. Das werde ich noch hinbekommen.

    Meine Frage ist, wenn ich das DD-Menu erstellt habe, sagen wir für die HP und ich rufe eine andere Seite von meinem Web auf, muss ich dann in dieser neuen Seite genau die gleichen Zeilen wiederholen wie ich es schon für die HP gemacht habe um das DD-Menu auch auf der neuen Seite zu haben.

    Mir würde vorschweben, dass ich das DD-Menu nur einmal definiere und dann auf allen Seiten einfach aufrufe. So würde ich Änderungen am DD-Menu nur an einer Stelle machen müssen.

    Leider fehlt mir jetzt die Phantasie wie das zu bewerkstelligen wäre. Ich würde auch den Einsatz von JavaScript in Kauf nehmen oder einer anderen zusätzlichen Technik.

    Ich hoffe ich konnte meine Frage verständlich formulieren.


    Viele Grüße

    Jürgen

  • Ok dann muß halt noch PHP und Server dazu.

    Aber wie machen das die Spezialisten? In den Beispielen mit DD-Menus, die im Internet mir angesehen habe, sind die weiterführenden Links "kastriert".

    Da steht dann nur sowas wie a href="#nogo", also kein echter Link.

    Ich versuche mal mein Glück.


    Vielen Dank

  • Hallo Jürgen,

    Zitat

    In den Beispielen mit DD-Menus, die im Internet mir angesehen habe, sind die weiterführenden Links "kastriert".

    Da steht dann nur sowas wie a href="#nogo", also kein echter Link.

    Das wäre dann ein seiteninterner Verweis auf einen Anker und es handelt sich wahrscheinlich um einen so genannten Onepager wo alle Seiten in einer HTML-Datei versammelt sind. (Es sei denn, die Links werden auf irgend eine Weise umgearbeitet.)

    Poste doch mal die URL einer solchen Seite, dann kann man genaueres sagen.

  • In dem Fall handelt es sich nur um Dummies weil der Autor seine Menüs präsentieren will, ohne auf echte Unterseiten zu verweisen.


    Aber Obacht, sieh dir mal das Datum an: Das CSS ist vollkommen veraltet, ist noch mit float realisiert. Vergiss diese Demos besser.

  • ja das sind quasi nur dummes. Danke für den Hinweis, dass man so nicht mehr programmiert.

    Ich glaube er hat aber auch aktuelle Menüs.

    Aber zurück zu meinem Kernproblem mit den Meüs auf jeder Seite. Ist der

    Ansatz von s.catello das mit PHP zu machen ok? Weil dafür brauche ich ja wieder sowad wie XAMPP also Webserver. Nicht das ich das ablehnen würde, ist nur mehr Aufwand.

    Und muss mich eben wieder reinarbeiten.

  • Ja, was m.scatello dir empfohlen hat ist eine empfehlenswerte und gebräuchliche Methode. Hier wird es genauer beschrieben:

    https://wiki.selfhtml.org/wiki…ien_mit_include_nachladen

    Es gibt auch Lösungen mit Javascript aber die sind mit Sicherheit komplizierter.

    Ich finde, es lohnt sich schon, einen lokalen Webserver zu installieren. Ist ja schnell gemacht und nicht besonders kompliziert.

    Ich habe diese Methode schon öfter zum Einbinden von größeren Navigationen, die öfter geändert werden müssen, benutzt. Was mir bisher fehlt ist die Möglichkeit den aktuell aktiven Link zum Beispiel farblich zu kennzeichnen. Kennt jemand eine Lösung?

  • Yep, weil diese Aufgabe hin und wieder vorkommt, habe ich etwas in der Schublade. Man kann das mit wenigen Zeilen Javascript erledigen:

    Code
            const url = document.location.href;
            document.querySelectorAll('nav li a').forEach(item => {
                if (url.includes(item.href)) {
                    item.classList.add('active');
                }
            });

    Den Selektor musst Du ggf. anpassen. Und basierend auf der Klasse "active" kannst Du dann den Link hervorheben wie Du es möchtest.

  • Man ist ja neugierig und ich wollte wissen, wie man das auch mit PHP machen kann. Dies ist das Ergebnis:


    1. Mit String-Manipulation des HTML:

    2. Mit Parsen durch DOMDocument:

    Bei beiden wird zunächst das HTML als String in der Variablen $html definiert, z. B.:

    Code
    $html = '
        <nav>
            <ul>
                <li> <a id="navi01" href="index.php">Startseite</a></li>
                <li> <a id="navi02" href="master-1.php">Seite 1</a></li>
                <li> <a id="navi03" href="master-2.php">Seite 2</a></li>
            </ul>
        </nav>';
    $parent = $_SERVER["SCRIPT_NAME"];

    Beides erfordert keine Änderungen in der Elterndatei und ist nicht viel komplizierter als die Lösung mit Javascript.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!