HTML 2 Navigationen auf einer Seite

[Speedy.]

Hallo zusammen,

ich wollte mal eure Meinung zu folgendem hören: auf einer Webseite habe ich eine Hauptnavigation, welche komplett responsive sein soll. Das bekomme ich so aber nicht mit reinen Media Queries hin, sondern muss auch mit jQuery arbeiten. Da sich die Navigation auf mobilen Devices also anders verhält und bedient wird, habe ich im HTML-Code unter der Hauptnavigation diese "geklont" und daruntergesetzt (siehe Code). Durch das Twitter Bootstrap wird dann die mobile Navigation erst ab entsprechender Auflösung angezeigt, die normale Navigation wird dann ausgeblendet. Meine Frage: ist das (vor allem in Bezug auf SEO) ratsam oder gibt es da bessere Lösungen? Ich bin mir echt unschlüssig darüber, zwei Navigationen mit identischem Inhalt auf der Seite zu haben. Wäre super, wenn jemand seine Erfahrungen und Ratschläge darlegen könnte

<!-- Main Navigation -->
<nav class="main-nav hidden-sm">
 <ul>
  <li>Hier ist die Main Navigation</li>
 </ul>
</nav> <!-- end main-nav -->

<!-- Responsive Navigation -->
<nav class="responsive-nav visible-sm">
<a href="#" class="nav-toggle"><span class="icon-menu"></span> Menu anzeigen</a>
 <ul>
  <li>Hier ist die mobile Navigation</li>
 </ul>
</nav> <!-- end responsive-nav -->

 

[palaber]

Also ich bin da sicher nicht der Held drin, aber vielleicht hilft dir der Gedanke weiter. Du willst ne Website einmal für z.B. PCs und einmal für z.B. Smartphones, oder? Falls ja, kannst du da nicht im Java Script abfragen was für ein Gerät genutz wird dann den entsprechenden Code ausführen?

 

[BlackMonday]

Sowas kannst Du auch mit nur einer einzigen Navigation umsetzen, z.B so wie hier: http://kulturbanause.de/ oder hier: http://foundation.zurb.com/ (ist in diesem Fall mit zwei Navis, habe ich aber auch schon mit einer gesehen. Finde allerdings nichts in meinen Bookmarks).

EDIT: hier die zweite Variante mit nur einer Navi: http://source.tutsplus.com/webdesign/tutorials/014_rwd-nav-patterns-4/demo/sidebar-nav.html

Um zu sehen wie sich die Navigation verhält einfach nur das Browserfenster auf Smartphone größe verkleinern.

 

[rony]

kannst du das verhalten beschreiben, dass deine navi haben soll?

ich bin da auch einer drin, der bei der thematik jeden tag etwas neues lernt - aber das man es mit den media querys nicht hinbekommt, hatte ich noch nicht gesehen ^^

ich bin immer einer, der versucht solange eine lösung mit js herauszuschieben wie es geht, gerade wenn man dafür auch noch ein framework braucht. Weil wenn ich im zug sitze kann ich quasi jeden bit abzählen der in mein smartphone rein kommt


auch ein tipp....ist zwar noch etwas experimentel, aber du kannst navigationen bei seiten mittlerweile durch box-flexing bauen, dadurch wird schon einiges automatisiert, und ggf. dein problem gelöst.

 

[Speedy.]

Kurz zur Funktion der Navigation. Bild 1 zeigt die mobile Version, welche erst ausgeklappt wird, wenn man auf das blaue "Menu anzeigen" klickt. Ansonsten ist die Navigation durch jQuery versteckt und es wird nur der blaue Balken angezeigt. Im zweiten Bild seht ihr dann die normale Desktop-Version.

Mein Problem ist wohl, dass ich zum einen einmal das "Menu anzeigen" verstecken bzw. anzeigen muss und zum anderen die Navigation in der mobilen Version solange versteckt werden muss, bis der Anwender auf den Link klickt (jQuery .hide() und .fadeToggle()).

Das reine Umstylen geht sicher mit reinen Media Queries, aber beim Verhalten stoße ich dann an die Grenzen.

Die anderen Links schaue ich mir gleich mal an, wenn es aber von Tuts+ ist, kann es schonmal nicht verkehrt sein

@palaber
Sicher, ich könnte auch die Seitenbreite des Browserfenster abfragen und darauf mit if-else-Bedingungen reagieren, aber irgendwie ist mir diese Lösung nicht sympatisch. Außerdem brauche ich dann ja weiterhin das HTML-Markup als Quelle, dass ändert also an dem Problem nicht viel. Wie gesagt, meine Idee war, die Navigation mit jQuery zu klonen und dann anzuzeigen, aber irgendwie führt das zum Gleichen...

 

[QXARE]

Du kannst das einfach mit einer Navigation und Media Queries umsetzen. Den "Menü anzeigen" Button würde ich extra platzieren und dann je nach Auflösung ein- oder ausblenden - dasselbe gilt für die Navigation. Dann reicht es, beim Button ein Click-Event zu hinterlegen, welches je nach Status die Sichtbarkeit der Navigation ändert. Dabei brauchst du dann auch nichts zu klonen, etc.

 

[Daaron]

Also im Endeffekt sowas hier? http://bella-salsa.de/
Bedien dich... Ist zwar in Mootools, nicht in jQuery, aber das ist ja wohl eher nebensächlich.

Praktischer finde ich es aber, wenn man für niedrigere Auflösungen, und insbesondere für Smartphones, auf n kleines Formular mit nem <select> setzt. Das Coole an so einer Lösung ist, dass die Navigation auf Smartphones dann im OS - Look&Feel erscheint.

 

[Speedy.]

Ja, so wie auf der Seite von Daaron soll es sich verhalten. Ist der Code von dir? Werde mir auf jeden Fall etwas davon abschauen. Das ist dann wohl auf den ersten Blick betrachtet der Lösungsansatz von QXARE.

 

[Daaron]

Ist ja nicht sehr schwer, auf so etwas zu kommen. Aber wie gesagt: <select> halte ich für etwas besser. Probier's mal aus. Brauchst halt noch n Einzeiler für den Submit als onchange.

 

[Tumbleweed]

Man beachte, dass die bella salsa Navigation im FF23 (Xubuntu) kaputt ist. Also ruhig mal testen, wenn du da abschreibst.

 

[Daaron]

hm... irgend ne Eigenartigkeit in der aktuellen FF-Version. Chrome machts richtig, der IE machts richtig, glaub Mobile Safari machts richtig. Nur der aktuelle FF spinnt. Als ich den Mist geschrieben hab gings wenn ich mich richtig erinner' auch im FF.
Wenn ich mal viel Langeweile hab (und der Kunde n Wartungsvertrag abschließt) guck ich mir das an.

 

[Tumbleweed]

Mit FF 22 ging auch auf CB was an den ausklappenden Menüs oben kaputt, aber Steffen hat schnell reagiert. Man weiß immer nicht, ob das nun Regression ist oder ob das so muss.

 

[Daaron]

Wie gesagt: Opera, Chrome und IE machen, was ich erwarte. Da vermute ich doch eher einen FF-Bug als alles andere.

 

[Kausalat]

Am Rande angemerkt, spinnt die besagte Navigation zum Teil auch im aktuellen Chrome. Vergrößere ich das Browserfenster nach einer Verkleinerung wieder, verschwindet die Navigation komplett. Dies tritt jedoch nur auf, wenn zuvor der "Plus"-Button geklickt worden ist. Ohne eine Interaktion wird die horizontale Navigation fehlerfrei wiederhergestellt.

 

[Daaron]

Hm.... glaub das hab ich auch schon mal gesehen, aber... Scheiß drauf. Es erfüllt seinen Zweck auf Smartphones. Bei denen hab ich noch nicht erlebt, dass jemand mutwillig das Browserfenster vergrößert.

 

[Kausalat]

Es soll auch Leute geben, die hin und wieder ihr Supermega-Full-HD+-Smartphone oder -Tablet mit Desktop-Auflösung drehen und damit ihr Browserfenster mutwillig vergrößern.

Von einem Durchschnittsuser würde ich zumindest keinen Seitenrefresh erwarten, um wieder an die Navigation zu gelangen. Das heißt also: Navigation weg, Informationszugang versperrt, Nutzer weg. Na ja, ist ja nicht meine Website.

 

[Speedy.]

Der Bug ist mir auch aufgefallen, als ich mein Fenster vergrößert habe (Chrome). Nach einem Refresh ist es dann wieder ok gewesen. Ich werde mir auf jeden Fall auch Variante mit dem <select> anschauen. Danke!

 

[Daaron]

Es soll auch Leute geben, die hin und wieder ihr Supermega-Full-HD+-Smartphone oder -Tablet mit Desktop-Auflösung drehen und damit ihr Browserfenster mutwillig vergrößern.

Betrifft aber nur ziemlich große Tablets.
Wie oft hast du schon eine Navigation geöffnet, wieder geschlossen und DANN an deinem Tablet gedreht? Siehste...

Ja, das Problem existiert. Es liegt am Fx.Reveal() (hinterlässt n inline-style). Beheben kann ich es aber aktuell nicht, sowas hat schlichtweg grad keine Priorität. Das Klientel ist nicht so technikaffin, dass mit vielen iPads zu rechnen ist. Ich seh ja die Statistiken dazu...
Das wäre in etwa so wie ein IE7-Bugfix... Nett, aber heute nicht und morgen nicht gleich.

Edit: Doch ne zündende Idee gehabt... Endlich mal etwas, wo man "inherit" wirklich verwenden kann... Ein Bug weniger. Fehlt noch der Firefox-Mist. Glaub, da leg ich einfach n weißen Hintergrund hinter die Navi, überdeckt es halt...

 

[rephluX]

Mein Problem ist wohl, dass ich zum einen einmal das "Menu anzeigen" verstecken bzw. anzeigen muss und zum anderen die Navigation in der mobilen Version solange versteckt werden muss, bis der Anwender auf den Link klickt (jQuery .hide() und .fadeToggle()).

Das reine Umstylen geht sicher mit reinen Media Queries, aber beim Verhalten stoße ich dann an die Grenzen.

Mein Tipp: modernizr benutzen!

Dort hast Du zwei Möglichkeiten, das Verhalten der Navigation an das entsprechende Endgerät anzupassen:

Einmal über Javascript:

if ( Modernizr.touch ) {
   //  touch on mobile
} else {
   // click on desktop
}

Siehe hierzu auch die offizielle Dokumentation.

Ober über einen CSS-Selektor, der dem html-Tag automatisch hinzugefügt wird:

if (jQuery('html').hasClass('no-touch')) {
// click on desktop
} else {
// touch on mobile
}

Um zu Deiner Ausgangsfrage zu kommen: Nach Möglichkeit ist eine Navigation die wesentlich bessere Variante! Schlanker Code (für mobile nicht unwichtig), kein doppelter Content in der Seite und auch für die Pflege der Seite weniger Aufwand, da Du nur eine Navigation pflegen musst.

 

[Daaron]

Nun ja, zumindest den Aspekt der Pflege kann man meist vernachlässigen. Das CMS wirds schon richten. Und wegen so einer Kleinigkeit noch Modernizr zu laden macht den Wunsch nach schlankem Code wieder zunichte.