Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Bootstrap 3 Grundkurs

Navigation mit Dropdown-Element

Testen Sie unsere 2013 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dropdown-Effekte sind in Bootstrap auf viele Elemente anwendbar. Bei einer Navigation gehören sie zu den meistverwendeten Effekten.
05:24

Transkript

Eine weitere Speizalität von Bootstrap ist das sehr simple Erstellen von Dropdown Menüs. Das kann man immer wieder brauchen und so wie diese Form des Dropdowns angelegt ist, ist es für unterschiedlichste Elemente einsetzbar. Ich werde es jetzt aber in meiner Navigation verwenden, weil es dort wahrscheinlich am häufigsten zum Einsatz kommen wird. Zu aller erst mache ich mir hier einen neuen Navigationspunkt, ein neues Listenelement mit einem neuen Link-Verweis, nur das ich da jetzt mal nichts hinein tue und heißen wird dieses test. So. So, hier haben wir meinen Test. Er ist jetzt ein aktiver Teil und jetzt werden wir schauen, dass wir an diesen Test-Bereich noch ein ganzes Dropdown dranbekommen. D. h. als erstes werde ich diesem Listenelement eine neue Klasse mitgeben, damit geht nämlich alles los und diese Klasse heißt, wie soll's anders sein, dropdown. Und dann mache ich mir hier ein kleinen bisschen Abstand, damit's besser weitergeht. Hier werde ich auch noch ein paar Dinge hinzufgen müssen, denn anhand dieses Ankerpunkts hier wird dann so zu sagen die ganze Musik zu spielen beginnen. Ich werde jetzt aber nicht extra mir hier die ganze Schreibarbeit machen, sondern ich werde zurück zu meiner Seite gehen und werde hier einfach neue Listenelemente, bzw. diese ganze unsortierte Liste, übernehmen. Mit Steuerung C kopier' ich's mir und füge es hier nach diesen ersten Listenelement ein. Steuerung V und da sind sie schon. Und schauen wir uns mal an, was wir hier jetzt alles mitbekommen haben. Wir haben jetzt eine unsortierte Liste, die eben angehängt wird an diesen bestehnden Teil hier und die hat eine eigene Klasse, nämlich dropdown Menü mitbekommen. Und eine Rollenbeschreibung. Ich sag's gleich dazu, dass Aptana Studio sich hier ein bisschen drüber aufregt, dass das eine propretäre Anweisung ist. Das ist eine unterstützende Maßnahme, vor allem auch für neue Entgeräte und deswegen ist es bei Bootstrap selbst eben bei den Beispielen mit angegeben. Und ich werde da also diese Rufzeichen ignorieren und einfach weitermachen. Ich habe dann hier für jedes Menü Item einen tabindex. Auch der verbessert die Performance. Nur hier in den Bezeichnungen werde ich mir erlauben noch eigene Bezeichnungen dazuzutun, also noch eine action. Ist egal, lassen wir's mal so. Denn divider tue ich raus, den mag ich jetzt so mal nicht haben. Brauche ich so auch nicht. Und speicher das ganze mal ab. Wenn Sie sich an die Dokumentation halten, werden Sie feststellen, dass es hier jetzt so einen kleinen Knackpunkt gibt, den man wissen muss. Nämlich so wie das hier aufgezeigt ist, wird es noch nicht so perfekt funktionieren. Denn alles steht und fällt mit diesen anfänglichen Listen tag. Hier müssen einfach zusätzliche Klassen dazugetan werden, damit dieses dropdown Ereignis überhaupt ausgelöst werden kann. Und das findet sich in der Dokumentation leider nicht hier an dieser Stelle wie man's vermuten sollte, sondern gefunden habe ich's dann bei den Button dropdowns. Ich habe schon erwähnt, dass es eben nicht nur an Menü Punkten liegt, wenn man ein dropdown erzeugt, sondern, dass es so ziemlich jedes Element mitbekommen kann und hier an diesem Beispiel sehen Sie dann eben, dass es eine eigene Klasse gibt und das diese Klasse eben dropdown-toggle heißt und das es dann noch einen data-toggle dazu braucht. Und das werden wir uns jetzt genau so übernehmen. Beschreibe also bei meinem a noch dazu die Klasse. Die Klasse haben wir gesagt heißt dropdown-toggle und dahinter gehört noch der Anstoß data-toggle=dropdown. So, schauen wir mal wie sich unsere Liste jetzt verhält. Hier ist die Liste und wenn ich drauf klicke, erscheint das dropdown Menü. Jetzt vielleicht nocht mit etwas befremdlichen hover Effekten, aber das kann man ja dann in der CSS Datei wieder reparieren. Ja, zweimal schauen und man bekommt trotzdem mit relativ einfachen Mitteln ein dropdown Menü und wie gesagt, dieses dropdown Ereignis ist mit fast jedem anderen beliebigen Element durchführbar.

Bootstrap 3 Grundkurs

Lernen Sie, wie Sie über Bootstrap 3 mit dem Gridsystem - einem ausgeklügelten Spaltensystem – beliebige Gestaltungsmöglichkeiten schnell und flexibel umsetzen können.

2 Std. 14 min (25 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!