Website für Handy?

4 Antworten

Zu deinem Markup:

1) Wenn das:

<div id="header">

den Header darstellen soll, dann verwende doch besser auch einen header-Tag.

2) Für Eingabefelder sollte es noch eine Beschriftung geben (Stichwort: Barrierefreiheit). Du kannst hierfür ein label-Element nehmen (und dieses gegebenenfalls ausblenden, wenn du es nicht visuell zur Verfügung stellen möchtest) oder zumindest ein aria-label-Attribut verwenden.

<label for="searchfield">Search:</label>
<input id="searchfield" name="q" placeholder="Search..." type="search">

3) Die href-Attribute deiner Links benötigen natürlich noch einen Wert. Das ist bisher noch nicht überall so.

4) Die JavaScript-Datei würde ich anders benennen. Nicht dass noch jemand auf die Idee kommt, in ihr wäre tatsächlich Java-Code vorhanden.

Wie soll ich da anfangen? Was ist wichtig?

Zuerst einmal ist das Konzept wichtig. Das ein Flyout praktisch ist, welches die komplette Seite mit dem Menü bedeckt, ist wohl klar. Aber wie sich die Items darin aufteilen, nicht. Ein Submenü könnte sich in einer eigenen Seite des Flyouts öffnen oder einfach nur aufklappen. Vielleicht werden auch verschiedene Menüeinträge komplett ausgeblendet (z.B. eine dritte Navigationsebene)? Oder was ist mit der Metanavigation (falls es eine gibt)?

Auf technischer Ebene sollte klar sein, ab wann das mobile Menü angezeigt wird (ab welcher Bildschirmbreite) und welche Werkzeuge für die Umsetzung eingesetzt werden sollen (nur CSS? Auch JavaScript?). Für Symbole wie die des Burger-Menüs ist es nicht schlecht, eine Schriftfamilie einzubinden.

Diverse Tutorials / Beispiele (mit Code) für mobile Menüs findest du leicht via Google. Nur einmal die ersten drei Suchergebnisse gegriffen:

Für Symbole wie die des Burger-Menüs ist es nicht schlecht, eine Schriftfamilie einzubinden.

Geht aber auch mit CSS only sogar animiert

1

Wenn du 2 container hast, die beide exakt 1 zu 1 gleich heißen, macht das gar keinen sinn, da du dann in der css datei die nicht einzeln ansprechen kannst. In der css werden dann beide container angesprochen, da die nicht unterschieden werden können. Das heißt wenn du beide container sowieso komplett gleich haben möchtest, dann pack alles einfach in einen einzigen rein oder benenne einen davon um, damit du den unabhängig vom anderen container ansprechen kannst.

Wieso hast du 2x <li class="dropdown"> drinnen? Nenn die wenigstens anders oder pack alles nur in eine li class rein. Wenn beide gleich heißen macht es wenig sinn weil die css datei die nicht unterscheiden kann.

Im CSS habe ich jedoch nicht ein Name 2x verwendet. Oder was meinst du?

Ich habe im HTML 2x "dropdown" geschrieben da diese gleich aussehen sollen.

0

Was möchtest Du wissen?