nicht angemeldet
Ganz einfaches Select-Menü für Mobile-Seite
oxo888oxo
Ganz einfaches Select-Menü für Mobile-Seite
oxo888oxo
AugeHallo
Ich bin dabei, meine Webseite in einem Responsive-Design zu erstellen.
Bisher komme ich, auch dank Eurer Ratschläge, ganz gut zurecht.
Meine Seite hat einen recht einfachen "klassischen" Aufbau.
Navigation links ... Inhelt rechts ... und ein Footer.
Das wars auch schon.
Ein Link zu der Seite ist oben neben meinem Nicknamen.
Bisher ist es ja noch so, dass bei schmalen Viewports (mit Media Queries realisiert), die Navigation oben steht. Quasi im gleichen Design, wie sie bei breiteren Viewports auf der Linken Seite zu sehen ist.
Für die Navigation beim meinem schmalsten Viewport möchte ich gerne eine andere Lösung haben, als diese lange Auflistung der Links.
Die Lösung soll möglichst einfach und ohne wahnsinnig viel komplizierten Code auskommen.
Da dachte ich, dass so ein Select-Menü eine feine Sache ist.
In meinem Code gäbe es dann quasi beide Navigationen.
Und über die Media Queries würde ich dann per display: none; und display: block; die entsprechende Navigation ein- bzw. ausblenden.
So, nun habe ich da mal was vorbereitet :-)
<form action="select.html">
<p>
<select name="navigation-mobile" size="1" onChange="location.href=this.options[this.selectedIndex].value;">
<option value="#1">Navigation Eintrag Nr. 01</option>
<option value="#2">Navigation Eintrag Nr. 02</option>
<option value="#3">Navigation Eintrag Nr. 03</option>
<option value="#4">Navigation Eintrag Nr. 04</option>
<option value="#5">Navigation Eintrag Nr. 05</option>
<option value="#6">Navigation Eintrag Nr. 06</option>
<option value="#7">Navigation Eintrag Nr. 07</option>
<option value="#8">Navigation Eintrag Nr. 08</option>
<option value="#9">Navigation Eintrag Nr. 09</option>
<option value="#10">Navigation Eintrag Nr. 10</option>
</select>
</p>
</form>
Das ist jetzt erstmal nur der Code für das eigentliche Select-Manü.
Die Ein- bzw. Ausblende-Geschichte mache ich später.
Meine Navigation hat übrigens keine weitere Verschachtelung oder so.
Es gibt also nur eine Ebene sozusagen.
Ist diese Lösung gut?
Also ich meine, habe ich da keinen dummen Denkfehler gemacht oder so?
Und ist das wie im obigen Code gescheit umgesetzt?
Über Euren Rat würde ich mich sehr freuen.
Gruß
Ingo
-
Hallo!
Die (Haupt)Navigation ist mit Sicherheit einer der "kniffeligsten" Punkte bei einem Responsive Design.
Es gibt ca. 3-5 verschiedene Ansätze dafür (per Google leicht zu finden), z.B. http://responsivenavigation.net/index.html
Für die Navigation beim meinem schmalsten Viewport möchte ich gerne eine andere Lösung haben, als diese lange Auflistung der Links.
Die Lösung soll möglichst einfach und ohne wahnsinnig viel komplizierten Code auskommen.
Da dachte ich, dass so ein Select-Menü eine feine Sache ist.Das ist eine der möglichen Varianten ...!
Der "Vorteil" besteht im Wesentlichen darin, dass viele (alle?) Mobile Browser Selects automatisch als Gesamtansicht anzeigen (was bei vielen Optionen allerdings auch wieder zum Problem werden kann).In meinem Code gäbe es dann quasi beide Navigationen.
Zwar nicht "schön", aber zu verschmerzen (s.u.) ...!
Und über die Media Queries würde ich dann per
display: none;unddisplay: block;die entsprechende Navigation ein- bzw. ausblenden.So, nun habe ich da mal was vorbereitet :-)
<form action="select.html">
<p>
<select name="navigation-mobile" size="1" onChange="location.href=this.options[this.selectedIndex].value;">
<option value="#1">Navigation Eintrag Nr. 01</option>
<option value="#2">Navigation Eintrag Nr. 02</option>
<option value="#3">Navigation Eintrag Nr. 03</option>
<option value="#4">Navigation Eintrag Nr. 04</option>
<option value="#5">Navigation Eintrag Nr. 05</option>
<option value="#6">Navigation Eintrag Nr. 06</option>
<option value="#7">Navigation Eintrag Nr. 07</option>
<option value="#8">Navigation Eintrag Nr. 08</option>
<option value="#9">Navigation Eintrag Nr. 09</option>
<option value="#10">Navigation Eintrag Nr. 10</option>
</select>
</p>
</form>> > Das ist jetzt erstmal nur der Code für das eigentliche Select-Manü. > Die Ein- bzw. Ausblende-Geschichte mache ich später. Damit machst du die Navigation deiner Website im Prinzip von Javascript abhängig. Und wenn, dann kannst du auch gleich dein "normales" Menü bei Bedarf per JS in ein Select umwandeln. Persönlich stehe ich aber nach wie vor auf dem Standpunkt, dass eine Website grundsätzlich auch ohne JS vollumfänglich benutzbar sein sollte. Von daher verwende ich eine Navigation, die per CSS Pseudo-Klasse :target ein- und ausgeblendet wird, sofern der User JS deaktiviert hat. Und wenn JS aktiviert ist, kannst du im Prinzip sowieso alles mögliche machen ...! > Über Euren Rat würde ich mich sehr freuen. Einen möchte ich dir dann auch noch dringend mit auf den Weg geben: Wenn deine Website bereits online ist, und zweifelsfrei eine gewerbliche Website darstellt, dann ist es in höchstem Maße "gefährlich", wenn der Link zum Impressum einen 404er anstatt der entsprechenden Informationen liefert! Gruß Gunther-
Die (Haupt)Navigation ist mit Sicherheit einer der "kniffeligsten" Punkte bei einem Responsive Design.
Ja, ich fürchte ;-)
Oh ja prima. Das ist ja eine tolle Seite, die das alles sehr schön auf den Punkt bringt.
Danke für den tollen Link!Der "Vorteil" besteht im Wesentlichen darin, dass viele (alle?) Mobile Browser Selects automatisch als Gesamtansicht anzeigen (was bei vielen Optionen allerdings auch wieder zum Problem werden kann).
Ja ich verstehe. Ich hatte mal testweise so ein Select Menü bei mir eingebaut und dann mal etwas im Bekanntenkreis herumgefragt. Da sind auch durchaus einige "Nur-Normal-User" dabei, die nicht so recht damit umzugehen wussten. Die hatten mir dann auch gesagt, dass sie auf ihren Handys sowas im Internet doch eher selten sehen.
Damit machst du die Navigation deiner Website im Prinzip von Javascript abhängig.
Ja, das hatte mich auch gestört.
Ich stehe ja auch immer drauf, ohne Javascript auskommen zu können :)Persönlich stehe ich aber nach wie vor auf dem Standpunkt, dass eine Website grundsätzlich auch ohne JS vollumfänglich benutzbar sein sollte.
Yep. Darum habe ich mich nu auch für eine andere Variante meiner mobilen Navigation entschieden.
Und zwar die Navi unten ans Ender der Seite legen.
Und dann oben per Button und Anker nach unten verwesien.
Zu begucken hier: http://spaceart.de/_xxxx_produkte/300001-b.php
Bitte nicht daran stören, dass noch einiger CSS-Code direkt in der Seite steht.
Das wird natürlich noch bereinigt.Lasst mich doch bitte mal wissen, was Ihr davon haltet?
-
Lasst mich doch bitte mal wissen, was Ihr davon haltet?
Finde ich auch nicht schlecht, wie du es jetzt umgesetzt hast. Allerdings finde ich diese Art von Navigation etwas verwirrend für den User, er bemerkt nicht, dass er ans Ende der Seite gelangt ist.
Wenn du darauf aufbauen willst, würde ich dir empfehlen einen Scroll Effekt z.B. mit jQuery einzubauen. So sieht dein User, dass die Navigation am Ende der Seite ist. Sollte er sich doch entscheiden auf der Seite zu bleiben, muss er einfach nach oben Scrollen.
-
Allerdings finde ich diese Art von Navigation etwas verwirrend für den User, er bemerkt nicht, dass er ans Ende der Seite gelangt ist.
OK ich verstehe und ich habe darüber auch schon gegrübelt.
Aber ist es denn wirklich wichtig, dass der User merkt, dass er ans Ende der Seite gelangt ist?
Wenn oben auf den Navi-"Button" klickt, will er doch zur Navigation.
Und genau dahin kommt er doch auch.
Ist es dem User nicht vielleicht egal, wo die Navi ist?
Also ob sie am Ende der Seite ist, ob sie von der Seite hereinrutscht oder ob ein extra Select-Fenster aufgeht.Das war so meine Überlegung.
Was meint Ihr dazu?
Mache ich da einen Denkfehler?Wenn du darauf aufbauen willst, würde ich dir empfehlen einen Scroll Effekt z.B. mit jQuery einzubauen. So sieht dein User, dass die Navigation am Ende der Seite ist. Sollte er sich doch entscheiden auf der Seite zu bleiben, muss er einfach nach oben Scrollen.
Ich selber habe z.B. ein recht schwachbrüstiges Smartphone (Ascend Y300 - Huawei).
Da laufen diese ganzen schicken Animationen bei den schicken Off-Canvas-Menüs usw. nicht so sehr performant. Das zuckt alles so ein bisschen und rustcht nicht so schön, wie auf leistungsstärkeren Telefonen.Darum würde ich da auf Javascript gerne verzichten.
Wenn sich meine obigen Überlegungen bezüglich "User - Ende Seite ... usw.) allerdings als Denkfehler bzw. blödsinnig erweisen, würde ich das mit der Scroll-Animation nochmal auf den Zettel schreiben.-
Mahlzeit,
Aber ist es denn wirklich wichtig, dass der User merkt, dass er ans Ende der Seite gelangt ist?
Bedingt. Wenn ein User nicht weiss, wo er ist, lädt er evtl die Seite unnötigerweise neu. Grad auf Mobilgeräten kann das lange dauern, wenn das Netz schlecht ist.
IMO sollte auf einer guten Seite immer erkennbar sein, wo der User sich befindet.
--
42-
Bedingt. Wenn ein User nicht weiss, wo er ist, lädt er evtl die Seite unnötigerweise neu. Grad auf Mobilgeräten kann das lange dauern, wenn das Netz schlecht ist.
IMO sollte auf einer guten Seite immer erkennbar sein, wo der User sich befindet.OK ich verstehe.
Gibt es eigentlich irgendwie eine gescheite Möglichkeit, so ein softes Scrollen zum Anker-Ziel ohne Javasript zu realisieren?
Und falls nein, ist sowas denn mit einem wirklich kleinen JS machbar, ohne dazu eine dieser "dicken" JQueries usw. zu verwenden?
-
Hi!
Gibt es eigentlich irgendwie eine gescheite Möglichkeit, so ein softes Scrollen zum Anker-Ziel ohne Javasript zu realisieren?
AFAIK Nein, da das quasi eine interne Sache des Browsers ist, auf die man per CSS keinen Einfluss nehmen kann.
Und falls nein, ist sowas denn mit einem wirklich kleinen JS machbar, ohne dazu eine dieser "dicken" JQueries usw. zu verwenden?
Ja, ist es!
Die Ausgangsbasis ist quasi event.preventDefault();Aber ...,
gerade bei Responsive Designs kommt man heutzutage kaum/ schwer ohne JS aus. Und glücklicherweise haben es auch die allermeisten User aktiviert.Und jQuery erleichtert imho viele Dinge, auch wenn sich diese genausogut direkt per Javascript umsetzen ließen.
Dein aktueller Fall ist doch ein klassisches Beispiel.
Ohne JS => Sprung zum Anker (ohne Animation)
Mit JS => Sprung zum Anker (mit Animation)Eben ein typischer Fall von "progressive enhancement"
Persönlich bevorzuge ich die Variante mit dem von links "einfahrenden" Menü (über die eigentliche Seite).
Das kann man rein per CSS sehr leicht mit der ':target' Pseudo-Klasse realisieren, und mit JS entsprechend "komfortabler aufmotzen". ;-)Noch ein Wort zur Javascript-Unterstützung:
Wer das ausschaltet,- hat entweder keine Ahnung => dagegen bist du eh machtlos
- weiß was er tut (und warum) => weiß dann auch, dass er mit gewissen "Einschränkungen" leben muss
Wichtig ist halt bloß immer, dass auch ohne JS alle Inhalte erreichbar/ zugänglich sind.
Man sollte aber deswegen auf keinen Fall auf den Einsatz von Javascript verzichten, um die Benutzerfreundlichkeit/ Bedienung für die breite Masse erheblich zu steigern/ verbessern/ erleichtern - meine Meinung! ;-)Gruß Gunther
-
Hmmmm, mir kommt da gerade noch eine andere Idee.
Könnte man es für mobile Geräte nicht einfach so machen:* Per Media Queries wird die normale Desktop-Navigation ausgeblendet (display: none;)
* Oben auf der Seite erscheint ein schön gestalteter Link "Navigation"
* Dieser Link ist einfach mit einer eigenen html-Seite verlinkt, auf dem sich die Navigation befindet.Also ich meine, die Navigation für mobile Geäte einfach in einer eigenen "Webseite" unterbringen.
Diese könnte man dann doch prima genau so gestalten, wie man sie haben möchte.Das ganze würde auch auf allen noch so alten Brwosern laufen, weil ja einfach nur die Navigation.html aufgerufen wird.
Ist das voll der blöde Quatsch?
Oder hat die Idee doch einen gewissen Charme/Sinn?
Lasst mal hören :-)-
Mahlzeit,
Also ich meine, die Navigation für mobile Geäte einfach in einer eigenen "Webseite" unterbringen.
Diese könnte man dann doch prima genau so gestalten, wie man sie haben möchte.Also willst du für mobile Geräte, die idR langsames Internet haben, extra eine Seite vom Server holen? Überleg dir nochmal ob das Sinn macht.
--
42
-
-
Mahlzeit,
Und falls nein, ist sowas denn mit einem wirklich kleinen JS machbar, ohne dazu eine dieser "dicken" JQueries usw. zu verwenden?
Wenn du für die dicken Dinger ein verbreitetes CDN nutzt, besteht die Chance, dass jQuery evtl. schon im Cache liegt. Drauf verlassen kannst du dich darauf aber nicht.
--
42-
Boah, ich brech mir hier echt einen ab.
Im Grunde habe ich heute fast den ganzen Tag damit verbracht, mir gefühle 1000 Menüs anzugucken.
Da sind ja tolle Sachen dabei.
Aber mein Problem ist, dass die Implementierung in meine Seite mich echt überfordert.Ich habe meine Seite ja auch mit Eurer Hilfe sehr gut hinbekommen.
Und die gefällt mir jetzt auch echt richtig richtig gut.
Endlich alles schön aufgeräumt und übersichtlich.Aber die Navigation der Handy-Ansicht bringt mich noch zum Verzweifeln.
Aufgrund meiner doch eher mangelnden Fähigkeiten bei CSS und HTML (von Javasript will ich garnicht erst reden), kommt für mich wohl nur eine der 3 folgenden Möglichkeiten in Frage:* Die Navi einfach so lassen, wie sie auch in den breiten Viewports ausschaut. Nur eben dann nach oben verlegt. Der Vorteil wäre, dass es super funktioniert und extrem einfach einzubauen ist. Wie groß der Nachteil nun ist, dass Handy User dann eben vor dem eigentlichen Inhalt erstmal eine "lange" Navi vor der Nase haben, frage ich mich.
* Navi als Select Menü. Das bekomme ich auch noch hin :-) Aber es soll ja doch bei vielen Usern eher unklar sein, wie man auf der Seite damit navigiert.
* Die Navi ganz nach unten und oben auf der Seite mit einem Anker-Link aufrufbar machen. Da finde ich die Gefahr der Verwirrung auch nicht gerade so sehr klein. Irgendwie ist man es ja doch gewohnt, dass eine Navi oben und/oder links ist.
Was mach ich denn nun?
Ich könnte heulen :-)-
Mahlzeit,
* Die Navi einfach so lassen, wie sie auch in den breiten Viewports ausschaut. Nur eben dann nach oben verlegt. Der Vorteil wäre, dass es super funktioniert und extrem einfach einzubauen ist. Wie groß der Nachteil nun ist, dass Handy User dann eben vor dem eigentlichen Inhalt erstmal eine "lange" Navi vor der Nase haben, frage ich mich.
Und die erst auf Klick auszuklappen ist nicht drin?
Ich hab jetzt den Rest des Threads nicht gelesen, aber üblich ist ein Button, der das Menü aufklappt. Und das geht auch als reine CSS-Lösung.Schau dir das mal an: http://css-tricks.com/responsive-menu-concepts/
--
42-
Hallo
Und die erst auf Klick auszuklappen ist nicht drin?
http://css-tricks.com/responsive-menu-concepts/Danke für den Link.
Aber das ist für mich leider zu kompliziert.Also ich meine, dass ich das nicht verstehe/hinbekomme.Darum habe ich mir mal eine einfache Lösung per Javascript gebaut.
Das habe ich dann im Javascript-Unterforum mal gepostet:
https://forum.selfhtml.org/?t=217681&m=1495867Gruß
Ingo
-
-
-
-
-
-
-
-
-
Hallo
Es gibt ca. 3-5 verschiedene Ansätze dafür (per Google leicht zu finden), z.B. http://responsivenavigation.net/index.html
Damit machst du die Navigation deiner Website im Prinzip von Javascript abhängig.
Das macht deine oben verlinkte Seite zumindest teilweise auch. Ohne JavaScript kann man die Links der Hauptnavigation auf der linken Seite zwar öffnen, vor dem Klick auf den Link erfahren, wohin es geht, funktioniert aber nur mit aktivem JavaScript. Schade.
Als Informationsquelle zu experimentieren ist die Seite nach erstem Augenschein aber zu gebrauchen.
Tschö, Auge
--
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
Terry Pratchett, "Wachen! Wachen!"
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
Veranstaltungsdatenbank Vdb 0.3
-