Vytvárame štýlové rozbaľovacie zoznamy. Výber z rozbaľovacieho zoznamu v rozbaľovacom zozname HTML na css s kurzorom myši

CSS

.wrapper-dropdown-5 {
/* Veľkosť a poloha */
pozíciu: príbuzný;
šírka: 200 pixelov;
marža: 0 auto;
vypchávka: 12 pixelov 15 pixelov;

/* Štýly */
pozadie: #fff;
hraničný polomer : 5 pixelov;
box-shadow : 0 1px 0 rgba (0 , 0 , 0 , 0.2 ) ;
kurzor: ukazovateľ;
obrys: žiadny;
prechod : uvoľnenie všetkých 0,3 s ;
}

.wrapper-dropdown-5:po{ /* Malá šípka */
obsahu: "" ;
šírka: 0 ;
výška: 0 ;
pozíciu: absolútne;
top: 50% ;
správny: 15 pixelov;
margin-top: -3 pixely;
hraničná šírka: 6px 6px 0 6px;
border-style: pevný;
border-color: #4cbeff transparentný;
}

Toto sú hlavné štýly. Teraz prejdime k rozbaľovaciemu zoznamu, ktorý sa od bežného trochu líši.

.wrapper-dropdown-5 .rozbaľovacia ponuka {
/* Veľkosť a poloha */
pozíciu: absolútne;
top: 100% ;
vľavo: 0 ;
správny: 0 ;

/* Štýly */
pozadie: #fff;
hraničný polomer : 0 0 5 pixelov 5 pixelov;
hranica: 1px pevný rgba (0 , 0 , 0 , 0.2 ) ;
border-top: žiadny;
okraj-dole: žiadny;
v štýle zoznamu: žiadny;
prechod : uvoľnenie všetkých 0,3 s ;

/* Skrytie */
max-výška: 0 ;
pretečeniu: skryté;
}

Tentoraz sme nezmenili krytie na 0, aby sme skryli menu. Nastavíme max-height na 0 a overflow: hidden. Prečo ste nastavili maximálnu výšku a nie výšku? Pretože nepoznáme presnú výšku rozšíreného zoznamu.

Jednoduché štýly pre prvky zoznamu.

.wrapper-dropdown-5 .rozbaľovacia ponuka li {
vypchávka: 0 10 pixelov ;
}

.wrapper-dropdown-5 .rozbaľovacia ponuka li a {
displej: blokovať;
text-dekorácia: žiadny;
farba: #333 ;
vypchávka: 10 pixelov 0 ;
prechod : uvoľnenie všetkých 0,3 s ;
okraj-dole: 1px pevný #e6e8ea;
}

.wrapper-dropdown-5 .rozbaľovacia ponuka li :posledný typ a {
hranica: žiadny;
}

.wrapper-dropdown-5 .rozbaľovacia ponuka li i {
okraj-pravý: 5 pixelov;
farba: dediť;
vertikálne zarovnať: stred;
}

/* Stav kurzora */

.wrapper-dropdown-5 .rozbaľovacia ponuka li :vznášať sa a {
farba: #57a9d9;
}

A teraz v aktívnom stave:

/* Aktívny stav */

.wrapper-dropdown-5.aktívny {
hraničný polomer : 5 pixelov 5 pixelov 0 0 ;
pozadie: #4cbeff;
box-shadow : žiadny;
okraj-dole: žiadny;
farba: biely;
}

.wrapper-dropdown-5.aktívny:po{
border-color: #82d1ff transparentný;
}

.wrapper-dropdown-5.aktívny .rozbaľovacia ponuka {
okraj-dole: 1px pevný rgba (0 , 0 , 0 , 0.2 ) ;
max-výška: 400 pixelov;
}

Keď je rozbaľovacia ponuka otvorená, zmeníme spodné rohy tlačidla, jeho farbu, smer šípky a farbu šípky a odstránime jej tieň a okraje.
A aby sa zobrazila ponuka, nastavili sme maximálnu výšku rozbaľovacej ponuky na 400 pixelov. Mohli by sme to nastaviť na 500px alebo 1000px, na tom nezáleží.

JavaScript

funkciu Rozbaľovacia ponuka ( el ) {
toto.dd = el ;
toto.initEvents() ;
}
Rozbaľovacia ponuka. prototyp = {
initEvents : funkciu() {
var obj = toto;

Obj. dd.na("klik", funkciu( udalosť ) {
$(toto) .toggleClass("aktívny") ;
udalosť. stopPropagation() ;
} ) ;
}
}

spätná kompatibilita

Takže teraz máme 5 rozbaľovacích zoznamov, ktoré fungujú skvele, ale čo staršie prehliadače?
Tieto prehliadače nerozumejú napríklad vlastnosti opacity.

Pomôže nám v tom knižnica Modernizr. Aby sme to povedali na rovinu, pre tých, ktorí nevedia, Modernizr je knižnica JavaScript, ktorá prehliadaču používateľa sprístupňuje vlastnosti podporované HTML5 a CSS3.

Vďaka tomu môžeme prehliadaču „povedať“, že *túto* vlastnosť nepodporujete, potom urobte nasledovné. Nižšie je uvedený príklad, ako môžeme spravovať štýl pre prehliadače, ktoré nepodporujú určité vlastnosti CSS:

/* Žiadna podpora CSS3 */

.bez priehľadnosti .wrapper-dropdown-1.rozbaľovacia ponuka ,
.bezvýznamné udalosti .wrapper-dropdown-1 .rozbaľovacia ponuka {
displej: žiadny;
nepriehľadnosť : 1 ; /* Ak podporuje nepriehľadnosť, ale nepodporuje udalosti ukazovateľa */
ukazovateľ-udalosti : auto; /* Ak udalosti ukazovateľa podporujú, ale nepodporujú udalosti ukazovateľa */
}

.bez priehľadnosti .wrapper-dropdown-1.aktívny.rozbaľovacia ponuka ,
.bezvýznamné udalosti .wrapper-dropdown-1.aktívny .rozbaľovacia ponuka {
displej: blokovať;
}

Ak prehliadač nepodporuje nepriehľadnosť alebo udalosti ukazovateľa, použije sa vlastnosť display: block;. A tak ďalej.

Záver.

Dúfam, že vám tento článok pomohol pochopiť, ako vytvoriť vlastné rozbaľovacie ponuky. Ako vidíte, je to celkom jednoduché.

Demonštrácia

Ak máte nejaké otázky, odporúčame vám použiť naše fórum, aby ste dostali odpoveď čo najrýchlejšie

Jednoduchý rozbaľovací zoznam v HTML sa dá ľahko vytvoriť pomocou značky select. Toto je kontajnerová značka, v ktorej sú vnorené značky možností – sú to tie, ktoré definujú prvky zoznamu.

Existuje niekoľko možností pre zoznamy, ktoré je možné vytvoriť pomocou značky select: rozbaľovací zoznam (možnosti sa zobrazia po kliknutí na hlavné pole alebo umiestnením kurzora myši naň) a zoznam s viacerými možnosťami – v ktorom môže používateľ vybrať niekoľko položiek. Prvé sú bežnejšie, sú významným prvkom navigácie na moderných stránkach. Rozbaľovací zoznam s viacerými možnosťami je možné použiť napríklad v katalógoch, kde je potrebné vybrať viacero charakteristík produktu.

Vzhľad a vlastnosti zoznamov môžete zmeniť pomocou univerzálnych a špeciálnych atribútov.

Vyberte atribúty značky

1. Viacnásobné - nastaví viacnásobný výber.

2. Veľkosť - nastavuje počet viditeľných riadkov v zozname, teda výšku. A tu všetko závisí od toho, či je viacnásobný atribút prítomný alebo nie. Ak áno a nezadáte veľkosť, potom ak je prítomných viacero, používateľ uvidí všetky možné možnosti výberu, ale ak viacero chýba, zobrazí sa iba jeden riadok a návštevník si bude môcť prečítať zvyšok, keď klikne na ikonu výťahu na pravej strane. Ak je zadaná veľkosť výšky a je menšia ako počet možností, napravo sa zobrazí posúvač.

3. Meno – meno. Rozbaľovací zoznam sa zaobíde aj bez neho, ale môže byť potrebná interakcia s obslužným programom na serveri. Meno je spravidla stále uvedené.

Značka select nemá povinné atribúty, na rozdiel od značky voľby.

Vnorené atribúty značiek možností

1. Vybraté – určené na zvýraznenie položky zoznamu. Používateľ bude môcť vybrať viac ako jednu položku, ak je nastavený atribút multiple (pozri vyššie).
2. Hodnota – hodnota. Tento atribút je povinný. Webový server musí pochopiť, ktoré položky zoznamu používateľ vybral.
3. Označenie. Tento atribút možno použiť na skrátenie položiek zoznamu, ktoré sú príliš dlhé. Napríklad „Milán“ sa zobrazí na obrazovke namiesto „Miláno je administratívne centrum Lombardie“ špecifikovaného v tagu voľby. Severné Taliansko“. Tento atribút sa používa aj na zoskupenie položiek v zozname.

Čo sa týka šírky zoznamu, štandardne je nastavená na dĺžku najširšieho textu v zozname. Šírku je samozrejme možné meniť pomocou HTML štýlov.

Rozbaľovací zoznam inými spôsobmi

Dá sa to urobiť pomocou CSS, napríklad po prejdení kurzorom na prvok stránky sa zobrazí zoznam. Výborné možnosti vytvárania zoznamov poskytuje JavaScript, ktorý zjednodušuje knižnica Jquery. Rozbaľovací zoznam pripojený pomocou tejto knižnice môže byť veľmi zložitý, napríklad kaskádový. To znamená, že keď vyberiete prvok v jednom zozname, zobrazí sa nasledujúci zoznam, napríklad v ponuke je položka „Dámske oblečenie“ (keď naň umiestnite kurzor myši, potom keď vyberiete jeden z typov, napr. „Vrchné oblečenie“ “, vypadne zoznam s prvkami: bundy, parky, kabáty, krátke kabáty, kožuchy atď.

Povrchne sme vymenovali hlavné spôsoby, ktorými môžete vytvoriť rozbaľovací zoznam. V JavaScripte je samozrejme veľa nuancií, ktoré vám umožňujú zmeniť funkčnosť a vzhľad zoznamov.

Začiatočníci sa často stretávajú s problémom navrhovania rozbaľovacieho zoznamu. Rovnako ako s originálom vyberte nemôžete robiť nič špeciálne. Potom príde na rad záchrana jQuery a potom môžete robiť takmer čokoľvek.

Čo keby som vám povedal, že je možný aj štandardný? HTML Nie je zlé navrhnúť rozbaľovací zoznam čistým spôsobom CSS?

Rozbaľovací zoznam v HTML

Farbu pozadia a textu je možné zmeniť, a to veľmi jednoducho.

Sherlock Holmes Veľký Gatsby V ako Vendetta Vlk z Wall Street Množstvo útechy

IN rozpätie pridali sme 2 triedy, jednu hlavnú, ktorá bude obsahovať všetky hlavné štýly “ vlastný rozbaľovací zoznam“, a druhý je veľký, ktorý určí veľkosť rozbaľovací zoznam. Vieme pripraviť povedzme 3 veľkosti vopred, veľký, stredný, malý, nastavené v štýloch veľkosť písma. A netrápte sa v budúcnosti. Môžete to preskočiť, všetko závisí od vášho dizajnu na stránke.

Text ( pozadie: #2a2a2b; farba: #fff; zarovnanie textu: stred; rodina písma: Arial, Helvetica; ) .big (veľkosť písma: 1,2em; ) /* Vlastná rozbaľovacia ponuka */ .vlastná rozbaľovacia ponuka ( pozícia : relatívny; zobrazenie: inline-block; vertical-align: middle; margin: 10px; /* iba ukážka */ ) .custom-dropdown select (kurzor:ukazovateľ; farba pozadia: #2980b9; farba: #fff; font- veľkosť: inherit; padding: 0,5 em; padding-right: 2,5 em; border: 0; margin: 0; border-radius: 3px; text-indent: 0,01px; text-overflow: ""; -webkit-vzhľad: tlačidlo ; /* skryť predvolenú šípku v chrome OSX */ ) .custom-dropdown::before, .custom-dropdown::after ( content: ""; position: absolute; pointer-events: none; ) .custom-dropdown:: after ( /* Vlastná šípka rozbaľovacej ponuky */ obsah: "\25BC"; výška: 1 em; veľkosť písma: 0,625 em; výška riadku: 1; vpravo: 1,2 em; hore: 50 %; okraj hore: -,5 em ; ) .custom-dropdown::before ( /* Vlastná rozbaľovacia šípka kryt */ šírka: 2em; vpravo: 0; hore: 0; dole: 0; border-radius: 0 3px 3px 0; ) .custom-dropdown select ( farba: rgba(0,0,0,.3); ) .custom-dropdown select::after ( color: rgba(0,0,0,.1); ) .custom-dropdown::before ( background-color: rgba(0,0,0,.15); ) .custom-dropdown::after ( farba: rgba(0,0,0,.4); )

Ak sa nechcete obťažovať a študovať štýly, jednoducho ho pridajte na svoju stránku a zmeňte farbu tak, aby zodpovedala dizajnu vašej stránky. Potom ste vo veľkom štýle“ .vlastný rozbaľovací výber“musíte zmeniť hodnoty farba pozadia A farba