Responsives WebDesign, Navigationsanzeige

[radarin]

Hallo zusammen.
Ich komme nicht darum herum, Webseiten für Handys zu optimieren, Stichwort Responsives Webdesign. Ist ja an sich auch eine gute Sache. Ich hab dafür ein fertiges Template übernommen, das ich optisch nun anpassen werde. Kopfzerbrechen macht mir allerdings die Navigation auf dem Handy. Im Quellcode besteht die Navigation aus <ul> und <li>, mit CSS zu Ausklappmenus formatiert. Auf dem Handy schaut es aber so aus, als wäre ein <input><select> formatiert. Im Quellcode gibt es aber sowas nicht. Ich kann mir nur vorstellen, dass der Interpreter den Code so umwandelt. Es geht aber auch anders, nicht jedes Template macht zwingend ein Rollmenu. Ich habe allerdings kein Plan davon, wie das der Browser handhabt und in welche Richtung ich suchen muss. Falls jemand sich die Darstellung ansehen will, ich hab das unveränderte Template online:

http://www.restaurant-waespi.ch/ref/

Ich hab ein CSS Codeschnipsel entdeckt, wenn ich das entferne, dann wird auf dem Desktop zur CSS Navi auch das Rollmenu eingeblendet. Das Scheint also generell irgendwie zu entstehen, und auf grossen Auflösungen einfach unsichtbar gemacht zu werden.

Gruß René

 

[Patrick Posner]

Du liegst vollkommen richtig, innerhalb deines #navi befindet sich die <ul>-Liste und ein Select-Menü.
Das select-Menü wird ab einem viewport von 800px eingeblendet:

@media screen and (max-width: 800px)
#navi select {
display: inline-block;
}

Der Austausch findet in deiner main.js statt, dort wird deiner Select-Liste die ID "navi" angehangen
und somit verschwindet deine <ul>-Liste in der mobilen Ansicht:

$("<select />&quot.appendTo("#navi"

Eine mobile Navigation über Select-Menüs ist zwar nicht mehr so gängig im Responsive Webdesign, aber das
muss nicht heißen, dass du die unbedingt ausbauen musst

 

[radarin]

Danke für Deine Antwort. Ich hab mitlerweile das Rollmenu ausgebendet und verlinke schlicht auf eine Sitemap Seite. Nicht ganz so elegant, aber wesentlch besser. jQuery hat mich auch noch geärgert. Das verwenden der neusten Version bringt die ganze Navigation zum Absturz und ist mit WOW Slider noch weniger kompatibel. Verwende da jetzt einen einfacheren CSS Slider. Funktioniert und die Kundin ist begeistert. Bei Gelegenheit werde ich mal versuchen ob ich für die Navi einen Layer drüber schieben kann. Wenn das nicht funktioniert lass ich es so, kann gut damit leben.

Gruss René