Alle Beiträge zur IFA 2014

Responsive Dropdown Menü mit CSS und Jquery erstellen, in Verbindung mit dem Superfish Menü

responsive dropdown menu mit css und jquery erstellen Responsive Dropdown Menü mit CSS und Jquery erstellen, in Verbindung mit dem Superfish Menü

Durch die rasante Verbreitung von Smartphones wird es immer wichtiger für Webseiten, auch ein mobiles Design in Petto zu haben. Doch das bedeutet nicht mehr wie früher, dass man einfach nur eine kleine Liste hat und alles irgendwie nicht mehr so schön aussieht und irgendwie auch nicht mehr zum normalen Design der Seite passt. Doch danke CSS, den Cascading Style Sheets, ist das Anpassen der Seite an alle möglichen Größen, sie also responsive zu gestalten, nicht mehr so schwer.

Dafür gibt es in der CSS Datei, im Folgenden rede ich immer von meiner style.css Datei, sogenannte Mediaqueries. Diese dienen dazu, bei einer bestimmten Auflösung des Gerätes, verschiedene Eigenschaften zu ändern oder zu aktivieren. Darauf möchte ich jetzt aber nicht besonders eingehen, da es dafür sehr viel bessere Erklärungen gibt.

Ich selber nutze in diesem Blog das Superfish Menü, welches sich relativ einfach auch in WordPress integrieren ließe. Und wenn man die Seite  dann in klein betrachtet oder kleiner gemacht hat, ist auch das Menü mitgerutscht. Allerdings gab das aber einer gewissen Größe dennoch Probleme. Deshalb suchte ich nach einer Möglichkeit, das Superfish Menü auszublenden und kleineres Menü für Smartphones und Tablets einzublenden. Zu finden ist da eine ganze Menge im Internet, aber durch den Einsatz von Superfish, war es nicht immer so einfach, diese alle zu kombinieren und die Stylesheets ordentlich anzupassen. Doch letztendlich bin ich fündig geworden und wollte euch das nicht vorenthalten, da ich doch eine Weile damit rumprobiert habe.

Als erstes schauen wir uns die neuen Eintragungen in der style.css Datei an.

Die

Klasse ist der Menubutton, der bei mir ab einer Größe von 710 Pixeln angezeigt wird. Dafür wird dann durch

mein Superfish Menü ausgeblendet. Das

am Ende der

klasse ist übrigens nur eine Abfrage, ob Javascript aktiviert ist. Wenn nicht, wird das normale Menü auch nicht ausgeblendet, nicht dass die Leute dann ohne Menü dastehen.

Als erstes wollen wir also, dass ab einer bestimmten Größe das alte Menü verschwindet. Das machen wir über eine einfache JQuery Funktion die ihr im Footer unterbringen könnt. Damit das alte Menü verschwindet, fügen wir meiner

Klasse erstmal das

hinzu, damit das Menü über die CSS angesprochen werden kann. Das erreichen wir mit dem Code:

Da wir aber vor unserer Navigation gleich noch das Menü Symbol einblenden wollen, machen wir aus der Zeile jetzt folgenden Code:

Da wir in der CSS Datei schon festgelegt haben, wann

gezeigt wird, müssen wir hier nix weiter beachten. Als nächstes wollen wir natürlich, dass bei einem Klick auf das Menü Symbol das Menü aufklappt. Das erreichen wir durch folgenden Code:

Im übrigen bedeutet

und

spezifische Eintragungen für das

Element. Diese beschreiben logischerweise das Tempo und die Art der Animation.  Die verschiedenen Animationen lassen sich durch Plugins auch noch ordentlich erweitern. Aber dazu findet ihr auf anderen Seiten eindeutig mehr Infomartionen.

Als letztes wollen wir noch eine Sicherheitsmaßnahme einbauen. Wenn man jetzt das Menü durch einen Klick verschwinden lässt und dann das Fenster groß macht, ist das alte Menü immer noch ausgeblendet. Deswegen fügen wir noch folgenden Code hinzu:

Und das war schon alles an Code was man benötigt. Allerdings müsst ihr euer Menü in der kleinen Ansicht noch stylen, damit es euren Vorstellungen entspricht. Zum Abschluss jetzt nochmal die JQuery Funktion als kompletter Code, welche bei mir im Footer eingebunden ist:

Ich hoffe die Anleitung konnte euch ein wenig helfen, da ich gerade in Verbindung mit Superfish wirklich lange gesucht habe. Wenn es Fragen geben sollte, hinterlasst mir einfach einen Kommentar.

via speckyboy.com

The following two tabs change content below.
 Responsive Dropdown Menü mit CSS und Jquery erstellen, in Verbindung mit dem Superfish Menü

Philipp

Ich hab den Laden hier ins Leben gerufen, das Design gebastelt und die Autoren bezirzt. Dafür gibt es bei uns keine beschönigten News, sondern nur ehrliche Meinungen. Wer das verträgt, ist herzlich Willkommen!
← iOS 7 kommt pünktlich Petition gegen geplante Drosselung der Surfgeschwindigkeit
  • Pingback: Responsive Design: Muss das sein? » TechNews

  • http://www.ws-theme.com/ Oli

    Gibt es evtl. ein Demo irgendwo? Wie verhält sich das Menü denn auf Touch Devices, gibt es hierzu Erfahrungswerte?

    • http://www.tchnws.de/ Philipp Noack

      Die Demo dazu war eigentlich mein Blog. Mittlerweile habe ich aber das Theme komplett umgestaltet und setze daher auf eine andere Lösung. Aber im Prinzip kannst du dir das so vorstellen: Wenn du den Browser kleiner machst, steht dann alles nur noch unter dem Punkt Menü, und wenn du darauf klickst, kommst du zu den einzelnen Unterpunkten.

  • alex

    wenn klickt man daneben(auf irgendwelchen frein feld), wie mache ich damit menü sich schliesste?

    • Philipp

      Eigentlich wieder auf das Symbol klicken, mit welchem man es öffnet.

    • http://www.tchnws.de/ Philipp Noack

      Indem du wieder auf die drei Striche klickst. Dann sollte sich das Menü eigentlich wieder schließen.

  • Pingback: Responsive Dropdown Menü mit CSS und Jquery erstellen, in Verbindung mit dem Superfish Menü - #tuts

  • Pingback: Der Wochenrückblick in KW 27 › TechNews

3 Pingbacks/Trackbacks