Listy rozwijane / Dropdowns

autor: Robert

20 sierpnia 2013

Przy tworzeniu menu strony pokazałem już jak zrobić rozwijane listy. Oczywiście można je stosować także do buttonów oraz pól formularzy. W tym wpisie pokażę podstawowy kod który można później implementować w dowolnych elementach.

Lista rozwijana

Lista musi być zamknięta w jakimś divie który określa czy ma być dołączona do buttonów, menu czy pól formularzy <div class="dropdown">. Następnie tworzymy normalną HTMLową listę za pomocą znacznika ul z klasą. Całość wygląda tak: <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">.
Wewnątrz znacznika <ul> każda pozycja menu wygląda następująco:
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Pierwsza pozycja menu</a></li>.
Całość wygląda następująco:

Nagłówki w liście

Nie każda pozycja na liście musi być linkiem do jakiejś opcji. Możemy podzielić ją na kilka segmentów i każdy z nich nazwać by użytkownik wiedział co wybierać. Nagłówki tworzymy za pomocą klasy .dropdown-header w kolejnej opcji menu.
Wygląda to następująco:

Wyłączenie opcji

Poprzez dodanie klasy .disabled do znacznika <li> możemy wyłączać poszczególne opcje menu.
Kod takiego rozwiązania:

No i jak zwykle przykłady:
Przykład jest dostępny tu:
Strona z przykładami

---

Post się przydał? Oceń go proszę.

(4 głosów, średnia: 5,00 na 5)

Loading...

---

← Starszy post
Karuzela / Slider
Nowszy post →
Bootstrap 3 wydany

Mister Klikacz 5 grudnia 2014 o 16:17

Ewentualnie parę wpisów dalej – do strony pod adresem http://kursbootstrap.pl/rozwijane-przyciski-dropdown/ :)

Odpowiedz

Robert 5 grudnia 2014 o 16:41

Mój błąd, ten wpis pokazuje jak wygląda rozwijana lista sama w sobie a ich wykorzystanie opisałem w innych postach nie linkując tego tutaj:)

Odpowiedz