Dropdownmenü automatisch erweitern lassen.

[Beer]

Hallo zusammen,

ich arbeite zurzeit an einer Intranetseite. Dabei habe ich zunächst ein Dropdownmenü wie im folgenden Video erstellt: https://www.youtube.com/watch?v=G1DJqPmp4ZU.

Nun Möchte ich die Möglichkeit, mehrere Menüpunkte hinzuzufügen ohne diese in HTML schreiben zu müssen. Also eine Art Formular, in dem ich Menüpunkt, Untermenü, Name, und bestenfalls Link einfügen kann, und dann automatisch die Menüpunkte angepasst/hinzugefügt werden.

Mein Gedanke wäre dabei gewesen (kenne mich aber nicht wirklich aus), dass durch ein Formular eine .html Datei erzeugt wird, welche die neue Unterseite wird. (Würde dabei mein Grundgerüst einfügen) Zusätzlich soll eine .txt oder .js Datei mit den, für das Menü relevanten Informationen (Link usw.) erstellt werden. Diese Datei wird anschließend über ein script ausgelesen und in meine menu.js Datei eingefügt, in welcher das HTML-Script für das Menü liegt.

Der Hauptgrund dafür ist, dass die Seite auch von Personen erweitert werden soll, welche keine Kenntnisse in HTML haben.

Ich hoffe ich habe alles verständlich beschrieben.

Danke im vorraus.

hier meine menu.js datei, welche ich in meine Unterseiten lade, um bei Veränderungen am Menü nicht jede .html seite einzeln anpassen zu müssen. (Benennung wurde verändert da Privat und so.)

document.write(`
<p>


<!--Sidebar-Menü-->

<div class="wrapper">
            <nav>
            <ul class="menu-area">
                <li><a href="index.html"><strong>Startseite</strong></a></li>                 

                <li><a href="#"><strong>Punkt1</strong></a>                                       
                    <ul>
                        <li><a href="Übersicht1.html">Übersicht1</a></li>
                        <li><a href="#">Übersicht2</a>
                            <ul>
                                <li><a href="Unterseite.html">Unterseite</a></li>
                            </ul>
                    </ul>
                </li>


                <li><a href="#"><strong>EG</strong></a>                                                     
                    <ul>
                        <li><a href="Übersicht2.html">Übersicht2</a></li>
                        <li><a href="#">OPD</a>
                            <ul>
                                <li><a href="Kamera_OPD1.html">Kamera OPD 1</a></li>
                                <li><a href="Kamera_OPD2.html">Kamera OPD 2</a></li>                                               
                            </ul>
                        </li>
                    </ul>
                </li>


                <li><a href="#"><strong>1.OG</strong></a>                                                   
                    <ul>
                        <li><a href="#">Bau1</a></li>
                        <li><a href="#">Bau2</a>
                            <ul>
                                <li><a href="#">OPD1</a></li>
                                <li><a href="#">OPD2</a></li>
                                <li><a href="#">OPD3</a></li>                        
                            </ul>
                        </li>
                    </ul>
                </li>


                <li><a href="#"><strong>2.OG</strong></a>                                                   

                </li>

                <li><a href="Formular" style="font-size: 20px">Formular</a></li>          
<!--Hiermit soll sich ein PopUP o.ä. öffnen, über welches ich die Informationen eingeben kann.-->


            </ul>
            </nav>
        </div>
</p>

`);

[Gunnar Bittersmann]

@@Beer

Ich habe dein Posting mal lesbar gemacht: Code als sochen ausgezeichnet; den URL zum Video als Link gemacht. Beim nächsten Mal bitte selber machen.

Nun Möchte ich die Möglichkeit, mehrere Menüpunkte hinzuzufügen ohne diese in HTML schreiben zu müssen. Also eine Art Formular, in dem ich Menüpunkt, Untermenü, Name, und bestenfalls Link einfügen kann, und dann automatisch die Menüpunkte angepasst/hinzugefügt werden.

Kurz gesagt: Du möchtest ein CMS.

hier meine menu.js datei, welche ich in meine Unterseiten lade, um bei Veränderungen am Menü nicht jede .html seite einzeln anpassen zu müssen.

Das machst du mit clientseitigem JavaScript? Keine gute Idee. Baue das Menü serverseitig in deine Seiten ein: PHP, SSI, serverseitiges JavaScript (Node.js), …

                <li><a href="#"><strong>Punkt1</strong></a>

<a href="#"> ist ein sicheres Zeichen für falsches HTML. Das sollte ein <button> sein?

Wo kann man sich dein Menü ansehen? Ich vermute, dass es gar nicht funktioniert.

🖖 Живіть довго і процвітайте

[Beer]

Hallo Gunnar,

erst mal danke für die Antwort, ich hoffe ich mach es diesmal richtig.

Ich hab die Dateien mal so angepasst, dass ich sie hochladen kann.

Der erste Code ist die index.html, der zweite ist menu.js und der dritte ist style.css. Wenn du alles in einen Ordner abspeicherst und index.html ausführst sollte es funktionieren.

Beim klicken auf die Menüpunkte öffnen sich jetzt natürlich keine Seiten, da die lokal auf meinem PC gespeichert sind.

Von CMS bzw. PHP oder SSI hab ich keine Ahnung. Ich bräuchte nur eine grobe Anleitung, wie ich vorgehen sollte, den Rest schaff ich schon irgendwie (hoffentlich).

index.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" href="style.css">
</head>

<body style="font-family: Arial">
    
    <script src="menu.js"></script>

    <footer>
        <div style="padding: 2px">Bei Fragen oder Anmerkungen bitte an .... wenden.</div>
    </footer>

    <div style="text-align: right;font-family: arial">Created by C....</div>
</body>

</html>

menu.js:

document.write(`
<p>

    <header>
        <h1 style="color:rgb(0, 0, 0);font-family:Arial;font-size:25px;text-align: left;margin-left: 25px"> 
            <img  alt=Logo witdh=80 height=80 src="./Logo.png">&nbsp; &nbsp; &nbsp; &nbsp;Überschrift</h1>        
    </header>

<!--Sidebar-Menü-->

<div class="wrapper">
            <nav>
            <ul class="menu-area">
                <li><a href="index.html"><strong>Startseite</strong></a></li>


                <li><a href="#"><strong>1</strong></a>
                    <ul>
                        <li><a href="1.1.html">Übersicht 1.1</a></li>
                        <li><a href="#">1.2</a>
                            <ul>
                                <li><a href="1.2.1.html">1.2.1</a></li>
                            </ul>
                    </ul>
                </li>


                <li><a href="#"><strong>2</strong></a>
                    <ul>
                        <li><a href="2.1.html">2.1</a></li>
                        <li><a href="2.2.html">2.2</a></li>
                        <li><a href="#">2.3</a>
                            <ul>
                                <li><a href="2.3.1.html">2.3.1</a></li>
                                <li><a href="2.3.2">2.3.2</a></li>                                               
                            </ul>
                        </li>
                    </ul>
                </li>


                <li><a href="#"><strong>3</strong></a>
                    <ul>
                        <li><a href="#">3.1</a></li>
                        <li><a href="#">3.2</a>
                            <ul>
                                <li><a href="#">3.2.1</a></li>
                                <li><a href="#">3.2.2</a></li>
                                <li><a href="#">3.3.3</a></li>                        
                            </ul>
                        </li>
                    </ul>
                </li>



                <li><a href="#" style="font-size: 20px">Menüpunkt hizufügen</a></li>


            </ul>
            </nav>
        </div>
</p>

`);

style.css

    header{
        text-align: center;
        border-radius: 7px;
        padding: 5px 5px 5px 5px;
        box-shadow: 0 5px 15px rgba(0,0,0,.15);
        margin-bottom: 0px;
        width: 100%
    }
    footer{
        position: relative;
        clear: both;
        color: #0e0d0d;
        text-align: center;
        font-family: arial;
        font-size: 20px;
        border-radius: 7px;
        padding: 25px;
        box-shadow: 0 5px 15px rgba(0,0,0,.08);
        margin: 25px 25px 25px 0px;
        width: 100%
        
    }
    /*Menü*/
    nav{
        margin-top: 5px;
        position: relative;
        float: left;
        box-shadow: 0 5px 15px rgba(0,0,0,.30);
    }
    /*Frame*/
    article{
        margin-top: 0px;
        margin-bottom: 75px;
        float: left;
        width: 70%;
        height: 80%;

    }
    iframe { border: none; 
    }

/*main*/
    body{
        overflow-x: hidden;
        height: 100vh;
    }
    .wrapper{
        position: relative;
        margin-left:0px;
        padding: 5px;        
    }
    .menu-area{
        list-style: none;
        padding: 0;
        margin: 0;
        background: #3d3d3d;
        width: 250px;
    }
    .menu-area li{
        position: relative;
    }
    /*Mainmenu*/
    .menu-area li a{
        font-family: Arial;
        font-size: 25px;
        text-align: center;
        height: 36px;
        position: relative;
        border-bottom: 1px solid #ddd;
        display: block;
        text-decoration: none;
        padding: 12px 12px;
        color: #fff;
    }
    /*Mainmenu*/
    .menu-area li a strong{
        display: block;
        text-transform: uppercase;
        font-family: Arial;
        font-size: 25px;
        letter-spacing: 2px;
    }
    /*Hoverfarbe*/
    .menu-area li:hover > a{
        color: rgb(255, 0, 0);
    }
    /*Animation*/
    .menu-area li ul,
    .menu-area li ul li ul{
        background: #3d3d3d;
        opacity: 0;
        visibility: hidden;
        transition: 300ms;
        z-index: 999;
        left: 280px;
        top: 0;
        list-style: none;
        position: absolute;
        height: auto;
        min-width: 250px;
        padding: 0;
        margin: 0;
    }
    /*Position der PopupMenüs*/
    .menu-area li:hover > ul, .menu.area li ul li:hover > ul{
        display: block;
        opacity: 1;
        visibility: visible;
        left: 250px;
    }
    /*Schrifteinstellungen der PopupMeüs*/
    .menu-area li ul li a{
        text-transform: uppercase;
        font-family: Arial;
        font-size: 20px;
        letter-spacing: 2px;
        padding: 10px;
        text-align: center;
        border: 0;
        border-bottom: 1px solid #ddd;
        border-left: 1px solid #ddd;
        height: auto;
    }
    /*Ka*/
    .menu-area li ul li ul{
        left: 230px;
        top: 0;
        border: 0;
    }

[Gunnar Bittersmann]

@@Beer

index.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">

Hier ist schon dein erster Fehler: deine Seite ist auf Deutsch, du gibst aber fälschlicherweise Englisch an. Richtig ist lang="de".

dir="ltr" ist nicht falsch, aber überflüssig, da default.

<body style="font-family: Arial">

Die Angabe der Schrift gehört ins Stylesheet.

Und WARUM denn bitte Arial?

„[Arial] wird genommen, weil sie im Computermenü … ganz oben steht. Würde sie Zarial heißen, hätte sie kein Mensch genommen.“ — Erik Spiekermann

Arial ist keine besonders gut lesbare Schrift (und nein, Helvetica auch nicht).

    <footer>
        <div style="padding: 2px">Bei Fragen oder Anmerkungen bitte an .... wenden.</div>
    </footer>

    <div style="text-align: right;font-family: arial">Created by C....</div>
</body>

Dito, die Stilangaben gehören ins Stylesheet. Wozu die 2px Padding da überhaupt gut sein sollen, erschließt sich mir nicht.

Die Angabe „Created by C....“ gehört mit ins footer-Element.

Und warum auf Englisch? Und wenn auf Englisch, muss der Sprachwechsel angegeben werden: <div lang="en">.

Und warum div? Da wird nichts gruppiert. Für Textabsätze ist das p-Element vorgesehen.

menu.js:

<p>

    <header>

header darf nicht in p sein. Browser korrigieren den Fehler und schließen das p-Element. (Das End-Tag </p> am Ende des Scripts erzeugt ein weiteres leeres p-Element.) Weg mit den <p>/</p>-Tags!

        <h1 style="color:rgb(0, 0, 0);font-family:Arial;font-size:25px;text-align: left;margin-left: 25px">

Stilangaben gehören … – ach, das weißt du ja inzwischen.

Warum rgb(0, 0, 0) und nicht einfach (und lesbar) black? Und warum gibts du das überhaupt an, wo das doch default ist? Ebenso text-align: left.

Warum gibst du font-family an, wo sich die Schriftart gar nicht ändert? Dass Arial keine gute Schrift ist, sagte ich schon? Es kann nicht oft genug gesagt werden.

Und im Stylesheet sollte auch nicht px auftauchen. Gib Schriftgrößen, Abstände etc. relativ zur Basis-Schriftgröße an, d.h. in em bzw. rem.

            <img  alt=Logo witdh=80 height=80 src="./Logo.png">&nbsp; &nbsp; &nbsp; &nbsp;Überschrift</h1>        

Abstände mit CSS, nicht mit einer wilden Folge von  !

Und am Ende sollte da auch ein sinnvollerer Alternativtext stehen als „Logo“, logo.

<!--Sidebar-Menü-->

<div class="wrapper">
            <nav>

Das div gruppiert nichts, kann weg. Du kannst stattdessen das nav-Element stylen.

🖖 Живіть довго і процвітайте

[Der Martin]

Hallo Gunnar,

Und WARUM denn bitte Arial?

„[Arial] wird genommen, weil sie im Computermenü … ganz oben steht. Würde sie Zarial heißen, hätte sie kein Mensch genommen.“ — Erik Spiekermann

Arial ist keine besonders gut lesbare Schrift (und nein, Helvetica auch nicht).

und was wäre besser? Wenn du schon kritisierst, dann bitte konstruktiv. Abgesehen davon: Warum sollte Arial nicht gut sein? Dass wir zur Frage "Serifen: Ja oder nein?" unterschiedliche Ansichten haben, ist ja bekannt. Aber das meinst du vermutlich nicht.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Der Martin

Warum sollte Arial nicht gut sein? … [Serifen] meinst du vermutlich nicht.

Nein, sondern … – das hatten wir schon mal.

und was wäre besser?

Wie soll ich da eine Empfehlung geben, ohne zu wissen, worum es auf der Website geht? Die Schrift soll ja zum Inhalt passen.

Nur so ins Blaue: Wenn es eine serifenlose sein soll, die bei vielen Nutzern als Systemschrift vorhanden sein dürfte: Calibri.

Serifenlose Webfonts, wenn sie nichts kosten dürfen: Fira Sans, Lato, Open Sans, PT Sans, Source Sans, … Da sie nichts kosten, werden diese aber von vielen verwendet; man hebt sich damit nicht von der Masse ab (was man mit Arial oder Helvetica auch nicht tut). Weshalb Oliver Schöndorfer gegen Open Sans wettert (wettern lässt 😉). In der Langfassung gibt’s ein paar Tips.

Wenn du schon kritisierst, dann bitte konstruktiv.

Dass man zu jeder Kritik auch immer einen Gegenvorschlag bringen müsste, ist ein Irrglaube.

🖖 Живіть довго і процвітайте

[MudGuard]

Hi,

Warum gibst du font-family an, wo sich die Schriftart gar nicht ändert? Dass Arial keine gute Schrift ist, sagte ich schon? Es kann nicht oft genug gesagt werden.

Du hättest hier ja auch noch erwähnen können, daß man auch nicht nur eine, sondern mehrere Schriften, und zuletzt eine generische, angeben sollte.

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@Gunnar Bittersmann

        <h1 style="color:rgb(0, 0, 0);font-family:Arial;font-size:25px;text-align: left;margin-left: 25px">

Warum rgb(0, 0, 0) und nicht einfach (und lesbar) black? Und warum gibts du das überhaupt an, wo das doch default ist?

Zusätzlich zum bereits Gesagtem: Wenn eine Textfarbe angegeben wird, muss auch eine Hintergrundfarbe angeben werden.

Warum? Nutzer könnten in ihrem Browserstylesheet body { background: black; color: white } angegeben haben.

Wird nun h1 { color: black } ohne Angabe einer Hintergrundfarbe gesetzt, erbt h1 die Hintergrundfarbe von body, d.h. Schwarz auf Schwarz.

Man müsste also h1 { background: white; color: black } angeben. Aber wie schon gesagt, will man das gar nicht. h1 soll die Textfarbe von body erben; also gar keine Angabe für color (und dann auch nicht für background) machen.

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Beer

Von CMS bzw. PHP oder SSI hab ich keine Ahnung.

Die wirst du aber brauchen.

Wie du das Menü nicht mit clientseitigem JavaScript einbindest (was nicht funktioniert, wenn das JavaScript nicht geladen wird, sei es wegen schlechter Internetverbindung oder weil $Nutzer JavaScript generell deaktiviert hat), sondern serverseitig mit PHP, ist in Dateien mit include nachladen beschrieben. Ebenfalls im Wiki: wie’s mit SSI geht.

---

Für dein Vorhaben, das Menü erweiterbar zu machen, brauchst du auf deinem Server eine Ablage deines Menüs. Das kann in einer Datenbank sein oder in einer Datei, vorzugsweise JSON, so in etwa:

{
  "menu": [
    {
      "title": "Startseite",
      "url": "index.html"
    },
    {
      "title": "1",
      "menu": [
        {
          "title": "Übersicht 1.1",
          "url": "1.1.html"
        },
        {
          "title": "1.2",
          "menu": [
            {
              "title": "1.2.1",
              "url": "1.2.1.html"
            }
          ]
        }
      ]
    },
    {
      "title": "2",
      "menu": [ … ]
    },
    {
      "title": "3",
      "menu": [ … ]
    }
  ]
}

Das Include (s.o.) enthält dann nicht das Menü in statischem HTML, sondern ein Script, das aus dem JSON (bzw. aus der Datenbank) das HTML für das Menü generiert.

Weiterhin brauchst du eine Webseite, die nur berechtigeten Personen zugänglich ist, mit einem Formular, in das man zusätzliche Menüpunkte eintragen kann. Bei der serverseitigen Auswertung wird die JSON-Datei neu geschrieben (bzw. die Datenbankeinträge geändert).

Und schon hast du dein eigenes CMS speziell für deine Zwecke.

Aber vielleicht bist du doch mit einem fertigen CMS besser dran, das nicht nur das Menü, sondern auch die Seiteninhalte verwaltet? Sowas gibt’s auch ohne Datenbank-Managementsystem: Kirby.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Beer,

dein Video habe ich erstmal mit einem "Nicht Nachmachen" kommentiert. Es ist nicht bedienbar. Was heißt: Nicht mit jedem Eingabegerät bedienbar. Probier's mal mit Tastatur…

Unser Wiki hat leider auch noch kein einfaches, bedienbares Dropdownmenüs, was aber daran liegt, dass die bedienbare Version eines solchen Menüs auch nicht einfach ist.

Eine ausführliche, wenn auch anspruchsvolle Diskussion des Themas findet man bei Heydon Pickering, Inclusive Components

Unser Wiki enthält ein Dropdown-Menü, das auf dem details-Element aufbaut. Aus Sicht der Bedienbarkeit ganz gut, aus Sicht der Zugänglichkeit (sprich: Was macht ein Screenreader daraus) leider auch noch suboptimal.

Was Pickering und unser Wiki gemeinsam haben, ist: Ohne JavaScript geht's nicht. Ein reines CSS Dropdown-Menü ist schlecht bedienbar.

Zu deinem Anliegen: Welches serverseitige Know-How hast Du? Wenn Du das Menü über ein Form konfigurieren können möchtest, musst Du Dir eine passende Eingabelogik für eine Dropdown-Hierarchie überlegen. Das ist nicht einfach ein Form - du bräuchtest ja auch ggf. Möglichkeiten, Menüelemente von A nach B zu verschieben wenn sich am Menü etwas ändert, und das soll keine Klick-Orgie werden.

Eine simple Lösung ist eine Art Wiki-Syntax, die Du mit einer einfachen textarea bearbeitest. Diese Syntax in PHP zu parsen ist so kompliziert nicht. Das Arbeitstier ist explode, zuerst um die Zeilen aufzutrennen, dann um die Zeilen zu zerlegen. Man kann das auch in JavaScript tun. Aber deswegen fragte ich nach deinem Know How.

Ein Formular, das dem User ein bequemes Editieren des Menüs erlaubt und für jeden Menüpunkt ein Eingabefeld vorsieht, ist NICHT trivial zu programmieren. Ist es trivial programmiert, dann ist es extrem umständlich zu bedienen, sobald man Menüpunkte umstellen will. Eine textarea bietet dagegen dem User alle Cut+Paste Möglichkeiten. Natürlich muss der User die Eingabesyntax beherrschen, und deswegen muss sie einfach sein.

index.html|Startseite

#|Punkt1
* uebersicht1.html|Übersicht1
* #|Übersicht2
** Unterseite.html|Unterseite

#|EG
* uebersicht2.html|Übersicht2
* #|OPD
** Kamera_OPD1.html|Kamera OPD 1
** Kamera_OPD2.html|Kamera OPD 2

# | 1.OG

*  # | Bau1
*  # | Bau2

**  # | OPD1
**  # | OPD2
**  # | OPD3

#|2.OG

formular.html|Formular

Die Leerzeilen und Leerstellen hinter Sternchen oder um die | Zeichen sind nur für die Lesbarkeit. Beim Einlesen ignorierst Du die. Die Zeilen ohne Sternchen sind Hauptmenüpunkte, mit einem Stern die Untermenüs, mit zwei Sternen die Unter-Untermenüs. In jeder Zeile ist hinter den Sternchen das Link-Ziel angegeben, dann ein | und dahinter der Text.

Das kann man - beispielweise - am Server einlesen, zerlegen und daraus die Listenstruktur generieren, die Du verwendet hast.

Um die Hauptmenü-Elemente fett zu machen, sollte man nicht mit <strong> arbeiten. Statt dessen nimmt man CSS; es gibt im Stylesheet sicherlich eine Regel die nur die Hauptmenüs trifft und dort notierst Du font-weight: bold.

Wenn Du tatsächlich individuelle Formatierungen für einzelne Menüelemente brauchst, dann überlege Dir, ob Du einen zweiten senkrechten Strich akzeptieren willst. Damit könnte man dann schreiben:

formular.html|font-size:1.5em|Formular 

Wenn Du am Server PHP verwendest, machst Du auf die Zeile ein explode, um die Elemente am | aufzuteilen, und dann siehst Du an der erhaltenen Array-Größe, wieviele | in der Zeile waren. Entsprechend kannst Du den mittleren Teil als Formatierungsanweisung in ein style-Attribut packen.

Verwende dabei übrigens möglichst eine relative Fontgröße wie em. Nicht px. Das skaliert nicht, wenn der User sein Display zoomen möchte.

Alternativ könntest Du auch dies akzeptieren:

formular.html|.wichtig|Formular 

Der Punkt würde CSS-typisch einen Klassennamen bezeichnen und du könntest dann ein class="wichtig" generieren (ohne den Punkt). Im Stylesheet würde dann die Formatierung für wichtig hinterlegt.

Rolf

[Beer]

Hallo Rolf,

danke für die Antwort. Ich hab auf bei Gunnars Antwort mal den kompletten Code hinzugefügt.

Das Menü funktioniert an sich einwandfrei, mir ging es hauptsächlich um das "Formular".

Mein Know-How im Programmieren ist sehr beschränkt. Ich such mir aus Posts und Youtube-videos das was ich brauche heraus, und füge es in VSC so zusammen, dass es funktioniert.

Gruß Beer

[JürgenB]

Hallo

Das Menü funktioniert an sich einwandfrei, …

hast du das mal an einem Endgerät ohne Maus getestet?

Gruß
Jürgen

[Beer]

Hallo Jürgen,

stimmt, daran hab ich gar nicht gedacht. Funktioniert leider bloß mit Maus.

[Gunnar Bittersmann]

@@Rolf B

Unser Wiki hat leider auch noch kein einfaches, bedienbares Dropdownmenüs, was aber daran liegt, dass die bedienbare Version eines solchen Menüs auch nicht einfach ist.

Manuel Matuzović hat ein vorzügliches Tutorial geschrieben: Building the main navigation for a website.

🖖 Живіть довго і процвітайте

[JürgenB]

Hallo Gunnar,

Manuel Matuzović hat ein vorzügliches Tutorial geschrieben: Building the main navigation for a website.

wirklich einfach, nur Links ohne irgendetwas drumrum ^[1], dann noch ein bisschen CSS, und fertig ist es.

Gruß
Jürgen

---

1. Im Einsatz wird man die Links wohl in ein nav legen. ↩︎

[Matthias Scharwies]

Servus!

Hallo Gunnar,

Manuel Matuzović hat ein vorzügliches Tutorial geschrieben: Building the main navigation for a website.

wirklich einfach, nur Links ohne irgendetwas drumrum ^[1], dann noch ein bisschen CSS, und fertig ist es.

Das kommt bei ihm später!

Es entspricht: HTML/Tutorials/Navigation/Grundstruktur

Was bei uns fehlt ist ul role="list"damit VoiceOver in Safari die Anzahl der Listenelemente vorliest.

Dann kommt der Hamburger-Button, der in HTML/Tutorials/Navigation/Flyout-Menü erklärt wird.

Was bei ihm fehlt, sind eben die mehrstufigen Drowdown-Menüs.

Was mir auffällt: Unsere Namen Flyout-Menü und Dropdown-Menü bieten eine Verwechslungsgefahr zum menu-Element - evtl sollten wir durchgängig den Begriff Navigation verwenden.

Herzliche Grüße

Matthias Scharwies

---

1. Im Einsatz wird man die Links wohl in ein nav legen. ↩︎

[Rolf B]

Hallo Matthias,

Was bei uns fehlt ist ul role="list"damit VoiceOver in Safari die Anzahl der Listenelemente vorliest.

Wieso sollte das fehlen? Das wäre ein Safari-Bug, weil ul die list Rolle als Default hat.

invoke google-fu

Argh

Rolf

[Gunnar Bittersmann]

@@JürgenB

Manuel Matuzović hat ein vorzügliches Tutorial geschrieben: Building the main navigation for a website.

wirklich einfach, nur Links ohne irgendetwas drumrum … Im Einsatz wird man die Links wohl in ein nav legen.

Natürlich. Und auch in eine Liste. Und beides hat Manuel ja auch getan.

🖖 Живіть довго і процвітайте

[JürgenB]

Hallo Gunnar,

Natürlich. Und auch in eine Liste. Und beides hat Manuel ja auch getan.

ups, da habe ich zu früh aufgehört zu lesen, ich dachte, warum auch immer, da kämen nur noch Kommentare.

Gruß
Jürgen