Tworzymy stylowe listy rozwijane. Wybieranie z listy rozwijanej na liście rozwijanej HTML po najechaniu kursorem css

CSS

.wrapper-dropdown-5 {
/* Rozmiar i położenie */
pozycja: względny;
szerokość: 200 pikseli;
margines: 0 automatyczny;
wyściółka: 12 pikseli 15 pikseli;

/* Style */
tło: #fff;
promień granicy : 5 pikseli;
pudełko-cień : 0 1 px 0 RGB (0 , 0 , 0 , 0.2 ) ;
kursor: wskaźnik;
zarys: nic;
przemiana : wszystkie 0,3 s odprężenia ;
}

.wrapper-dropdown-5:Po{ /* Mała strzałka */
treść: "" ;
szerokość: 0 ;
wysokość: 0 ;
pozycja: absolutny;
szczyt: 50% ;
Prawidłowy: 15 pikseli;
górny margines: -3 piks;
szerokość granicy: 6 pikseli 6 pikseli 0 6 pikseli;
styl graniczny: solidny;
kolor ramki: #4cbeff przezroczysty;
}

To są główne style. Przejdźmy teraz do listy rozwijanej, która nieco różni się od zwykłej.

.wrapper-dropdown-5 .upuścić {
/* Rozmiar i położenie */
pozycja: absolutny;
szczyt: 100% ;
lewy: 0 ;
Prawidłowy: 0 ;

/* Style */
tło: #fff;
promień granicy : 0 0 5 pikseli 5 pikseli;
granica: 1 px solidny RGB (0 , 0 , 0 , 0.2 ) ;
górna granica: nic;
granica-dół: nic;
w stylu listy: nic;
przemiana : wszystkie 0,3 s odprężenia ;

/* Ukrywanie */
maksymalna wysokość: 0 ;
przelewowy: ukryty;
}

Tym razem nie zmieniliśmy krycia na 0, aby ukryć menu. Ustawiamy maksymalną wysokość na 0 i przepełnienie: ukryte. Dlaczego ustawiłeś maksymalną wysokość, a nie wysokość? Ponieważ nie znamy dokładnej wysokości rozwiniętej listy.

Proste style elementów listy.

.wrapper-dropdown-5 .upuścić li {
wyściółka: 0 10 pikseli ;
}

.wrapper-dropdown-5 .upuścić Li a {
wyświetlacz: blok;
dekoracja tekstowa: nic;
kolor: #333 ;
wyściółka: 10 pikseli 0 ;
przemiana : wszystkie 0,3 s odprężenia ;
granica-dół: 1 px solidny #e6e8ea;
}

.wrapper-dropdown-5 .upuścić li :ostatni typ A {
granica: nic;
}

.wrapper-dropdown-5 .upuścić Li ja {
prawy margines: 5 pikseli;
kolor: dziedziczyć;
wyrównanie w pionie: środek;
}

/* Stan najechania */

.wrapper-dropdown-5 .upuścić li :unosić się A {
kolor: #57a9d9;
}

A teraz w stanie aktywnym:

/* Stan aktywny */

.wrapper-dropdown-5.aktywny {
promień granicy : 5 pikseli 5 pikseli 0 0 ;
tło: #4cbeff;
pudełko-cień : nic;
granica-dół: nic;
kolor: biały;
}

.wrapper-dropdown-5.aktywny:Po{
kolor ramki: #82d1ff przezroczysty;
}

.wrapper-dropdown-5.aktywny .upuścić {
granica-dół: 1 px solidny RGB (0 , 0 , 0 , 0.2 ) ;
maksymalna wysokość: 400 pikseli;
}

Gdy menu rozwijane jest otwarte, zmieniamy dolne rogi przycisku, jego kolor, kierunek strzałki i kolor strzałki oraz usuwamy jego cień i obramowania.
Aby wyświetlić menu, ustawiliśmy maksymalną wysokość menu rozwijanego na 400 pikseli. Moglibyśmy ustawić go na 500 pikseli lub 1000 pikseli, to nie ma znaczenia.

JavaScript

funkcjonować Upuścić ( el ) {
Ten.dd = el ;
Ten.initEvents() ;
}
Upuścić. prototyp = {
initEvents : funkcjonować() {
odm obj = Ten;

Obj. dd.NA("Kliknij", funkcjonować( wydarzenie ) {
$(Ten) .przełącz klasę("aktywny") ;
wydarzenie. zatrzymaj propagację() ;
} ) ;
}
}

Kompatybilność wsteczna

Mamy więc 5 rozwijanych menu, które działają świetnie, ale co ze starszymi przeglądarkami?
Te przeglądarki nie rozumieją na przykład właściwości opacity.

Pomoże nam w tym biblioteka Modernizr. Mówiąc wprost, dla tych, którzy nie wiedzą, Modernizr to biblioteka JavaScript, która udostępnia przeglądarce użytkownika właściwości obsługiwane przez HTML5 i CSS3.

Dzięki temu możemy „powiedzieć” przeglądarce, że jeśli nie wspierasz *tej* właściwości, to wykonaj poniższe czynności. Poniżej znajduje się przykład tego, jak możemy zarządzać stylami w przeglądarkach, które nie obsługują niektórych właściwości CSS:

/* Brak obsługi CSS3 */

.brak krycia .wrapper-dropdown-1.upuścić ,
.no-pointerevents .wrapper-dropdown-1 .upuścić {
wyświetlacz: nic;
nieprzezroczystość : 1 ; /* Jeśli obsługuje przezroczystość, ale nie obsługuje zdarzeń wskaźników */
zdarzenia wskaźnikowe : automatyczny; /* Jeśli obsługuje zdarzenia wskaźników, ale nie obsługuje zdarzeń wskaźników */
}

.brak krycia .wrapper-dropdown-1.aktywny.upuścić ,
.no-pointerevents .wrapper-dropdown-1.aktywny .upuścić {
wyświetlacz: blok;
}

Jeśli przeglądarka nie obsługuje zdarzeń opacity lub pointer-event, wówczas używana jest właściwość display: block;. I tak dalej.

Wniosek.

Mam nadzieję, że ten artykuł pomógł Ci zrozumieć, jak tworzyć niestandardowe menu rozwijane. Jak widać, jest to całkiem proste.

Demonstracja

Jeśli masz jakieś pytania, zalecamy skorzystanie z naszego forum, aby otrzymać odpowiedź tak szybko, jak to możliwe

Prostą listę rozwijaną w formacie HTML można łatwo utworzyć za pomocą znacznika wyboru. Jest to znacznik kontenera, w którym zagnieżdżone są znaczniki opcji, które definiują elementy listy.

Istnieje kilka opcji tworzenia list za pomocą znacznika wyboru: lista rozwijana (opcje pojawiają się po kliknięciu na pole główne lub najechanie na nie kursorem) oraz lista wielokrotnego wyboru - w której użytkownik może wybrać kilka pozycji. Te pierwsze są bardziej powszechne i stanowią istotny element nawigacji współczesnych witryn. Listę rozwijaną wielokrotnego wyboru można zastosować np. w katalogach, w których trzeba wybrać kilka cech produktu.

Możesz zmienić wygląd i właściwości list za pomocą atrybutów uniwersalnych i specjalnych.

Wybierz atrybuty tagu

1. Wiele – ustawia wielokrotny wybór.

2. Rozmiar - ustawia ilość widocznych linii na liście, czyli wysokość. I tutaj wszystko zależy od tego, czy atrybut wielokrotny jest obecny, czy nie. Jeśli tak i nie określisz rozmiaru, to jeśli jest ich wiele, użytkownik zobaczy wszystkie możliwe opcje wyboru, ale jeśli nie ma wielu, wyświetli się tylko jedna linia, a odwiedzający będzie mógł przeczytać resztę, gdy klika ikonę windy po prawej stronie. Jeśli określono wysokość wysokości i jest ona mniejsza niż liczba opcji, po prawej stronie pojawi się pasek przewijania.

3. Imię - imię. Lista rozwijana może się bez tego obejść, ale może być konieczna interakcja z programem obsługi na serwerze. Z reguły nazwa jest nadal wskazana.

Znacznik wyboru nie ma wymaganych atrybutów, w przeciwieństwie do znacznika opcji.

Zagnieżdżone atrybuty znacznika opcji

1. Wybrane — przeznaczone do wyróżniania elementu listy. Użytkownik będzie mógł wybrać więcej niż jeden element, jeśli ustawiony jest atrybut wielokrotny (patrz wyżej).
2. Wartość - wartość. Ten atrybut jest wymagany. Serwer WWW musi zrozumieć, które elementy listy wybrał użytkownik.
3. Etykieta. Tego atrybutu można użyć do skrócenia zbyt długich elementów listy. Na przykład na ekranie zostanie wyświetlony komunikat „Mediolan” zamiast „Mediolan jest centrum administracyjnym Lombardii” określonym w znaczniku opcji. Północne Włochy". Ten atrybut służy również do grupowania elementów na liście.

Jeśli chodzi o szerokość listy, jest ona domyślnie ustawiona na długość najszerszego tekstu na liście. Oczywiście szerokość można zmienić za pomocą stylów HTML.

Lista rozwijana w inny sposób

Można to zrobić za pomocą CSS, np. lista wyświetli się po najechaniu myszką na element strony. Doskonałe możliwości tworzenia list zapewnia JavaScript, który upraszcza biblioteka Jquery. Lista rozwijana połączona za pomocą tej biblioteki może być bardzo złożona, na przykład kaskadowa. Oznacza to, że po wybraniu elementu na jednej liście pojawia się następująca lista, na przykład znajduje się pozycja menu „Odzież damska” (po najechaniu na nią kursorem, a następnie wybraniu jednego z typów, na przykład „Odzież wierzchnia ”, wyskakuje lista z elementami: kurtki, parki, płaszcze, krótkie płaszcze, futra itp.

Pobieżnie wymieniliśmy główne sposoby tworzenia listy rozwijanej. Oczywiście w JavaScript istnieje mnóstwo niuansów, które pozwalają na zmianę funkcjonalności i wyglądu list.

Często początkujący stają przed problemem zaprojektowania listy rozwijanej. Podobnie jak w przypadku oryginału wybierać nie możesz zrobić nic specjalnego. Wtedy przychodzi na ratunek jQuery, a wtedy możesz zrobić prawie wszystko.

A co jeśli powiem Ci, że standardowy też jest możliwy? HTML Nie jest źle zaprojektować listę rozwijaną w przejrzysty sposób CSS?

Lista rozwijana w formacie HTML

Kolor tła i tekstu można zmienić, a odbywa się to w bardzo prosty sposób.

Sherlocka Holmesa Wielki Gatsby V jak Vendetta Wilk z Wall Street Odrobina pocieszenia

W Zakres dodaliśmy 2 klasy, jedną główną, która będzie zawierać wszystkie główne style „ menu rozwijane niestandardowe„, a drugi jest duży, co określi rozmiar Lista rozwijana. Możemy przygotować z wyprzedzeniem powiedzmy 3 rozmiary, duży, średni, mały, ustawione w stylach rozmiar czcionki. I nie zawracaj sobie tym głowy w przyszłości. Możesz to pominąć, wszystko zależy od projektu na stronie.

Treść (tło: #2a2a2b; kolor: #fff; wyrównanie tekstu: do środka; rodzina czcionek: Arial, Helvetica; ) .big (rozmiar czcionki: 1,2em; ) /* Niestandardowe menu rozwijane */ .custom-dropdown ( pozycja : względny; wyświetlacz: blok inline; wyrównanie do pionu: środek; margines: 10 pikseli; /* tylko wersja demonstracyjna */ ) .custom-dropdown wybierz (kursor:wskaźnik; kolor tła: #2980b9; kolor: #fff; czcionka- rozmiar: dziedziczenie; dopełnienie: .5em; dopełnienie po prawej stronie: 2,5em; obramowanie: 0; margines: 0; promień obramowania: 3px; wcięcie tekstu: 0,01px; przepełnienie tekstu: „”; -wygląd-webkit: przycisk ; /* ukryj domyślną strzałkę w Chrome OSX */ ) .custom-dropdown::before, .custom-dropdown::after ( treść: ""; pozycja: bezwzględna; wskaźnik-zdarzenia: brak; ) .custom-dropdown:: after ( /* Niestandardowa strzałka rozwijana */ treść: "\25BC"; wysokość: 1em; rozmiar czcionki: .625em; wysokość linii: 1; prawa: 1.2em; góra: 50%; górny margines: -.5em ; ) .custom-dropdown::before ( /* Niestandardowa osłona strzałki rozwijanej */ szerokość: 2em; prawa: 0; góra: 0; dół: 0; promień obramowania: 0 3px 3px 0; ) .custom-dropdown wybierz ( kolor: rgba(0,0,0,.3); ) .custom-dropdown wybierz::after ( color: rgba(0,0,0,.1); ) .custom-dropdown::before ( kolor tła: rgba(0,0,0,.15); ) .custom-dropdown::after ( kolor: rgba(0,0,0,.4); )

Jeśli nie chcesz zawracać sobie głowy studiowaniem stylów, po prostu dodaj go do swojej witryny i zmień kolor, aby pasował do projektu Twojej witryny. W takim razie jesteś po prostu w dobrym stylu” .custom-dropdown wybierz” musisz zmienić wartości kolor tła I kolor