Užitočné tipy

Horizontálna rozbaľovacia ponuka v jazyku CSS HTML

Pin
Send
Share
Send
Send


Horizontálna rozbaľovacia ponuka slúži na zefektívnenie štruktúry navigácie na webe. Optimálny počet úrovní investícií je jedna alebo dve. Čím nižšia je úroveň investícií, tým ľahšie je pre návštevníka stránok nájsť informácie, ktoré potrebujú. Ako vytvoriť pravidelné horizontálne menu je podrobne uvedené v tejto lekcii.

1. Značenie HTML a základné štýly rozbaľovacej ponuky s jednou úrovňou prílohy

Rozloženie HTML horizontálnej rozbaľovacej ponuky sa líši od obvyklej ponuky v tom, že do požadovanej položky zoznamu sa pridá vnorený zoznam

    alebo.

Nasledujúce štýly sa označujú ako umiestnenie podponuky vzhľadom na hlavné menu:
- pre položku zoznamu, v ktorej je vnorený rozbaľovací zoznam: li ,
- pre rozbaľovaciu ponuku ul , ako aj ľavú a najvyššiu hodnotu.

Pre lepšiu prehľadnosť a lepšie formátovanie pridajte triedu topmenu do hlavnej ponuky a rozbaľovaciu triedu podponuky.

Existuje niekoľko spôsobov, ako skryť rozbaľovaciu ponuku:
1) displej: žiadny,
2) viditeľnosť: skrytá,
3) opacita: 0,
4) transformácia: mierkaY (0),
5) pomocou knižnice jQuery.

Navštívte Pen MaObbz od Eleny Nazarovej (@nazarelen) na stránke CodePen.

Rozbaľovacia ponuka je skrytá pomocou .submenu , keď sa vznášanie zobrazuje s .topmenu li: hover .submenu .

Menu je skryté pomocou .submenu zobrazuje sa .topmenu li: hover .submenu .

Menu je skryté pomocou .submenu zobrazuje sa .topmenu li: hover .submenu , Ak chcete zabrániť tomu, aby sa ponuka zobrazovala pri umiestnení kurzorom myši na oblasť, v ktorej sa nachádza, pridajte viditeľnosť: skrytá a pri umiestnení kurzora ju zmeníte na viditeľnosť: viditeľná,

Menu je skryté pomocou .submenu zobrazuje sa .topmenu li: hover .submenu , Pretože transformácia predvoleného prvku pochádza zo stredu, musíte pridať .submenu , t.j. z ľavého horného rohu.

4. Zvyšujúca sa rozbaľovacia ponuka

Ďalší príklad rozbaľovacej ponuky. Efekt zvýšenia pri zobrazení ponuky sa dosiahne znížením pôvodnej veľkosti .submenu , pri vznášaní sa veľkosť zväčší na .topmenu> li: hover .submenu .

Pozrite si pero aNbGKv od Eleny Nazarovej (@nazarelen) na stránke CodePen.

2. Jednoduchá rozbaľovacia ponuka CSS3

Variant Josh Riser je vizuálne podobný predchádzajúcemu rozbaľovaciemu menu v HTML a CSS. Kód nemá podradený selektor ">" (užitočné vo viacúrovňových konštruktoch), ale autor úspešne používa efekty CSS3 (prechod, tieň v poli a textový tieň) na dosiahnutie krajšieho výsledku. Odkaz v zdroji neobsahuje popis postupu vytvorenia horizontálnej rozbaľovacej ponuky, takže okamžite uvediem konečný kód:

3. Rozbaľovacia ponuka s vyhľadávacím poľom

V tomto príklade sa pozrieme na to, ako vytvoriť rozbaľovaciu ponuku v CSS, v ktorej bude okrem položiek aj vyhľadávací blok. Takáto implementácia sa často nachádza v moderných šablónach webových stránok. Z hľadiska času implementácie a zložitosti je riešenie trochu komplikovanejšie ako tie predchádzajúce. Bola uverejnená v máji 2013, takže možno budete musieť niektoré veci vyladiť, hoci pri našom testovaní bolo všetko v poriadku.

HTML kód

Na navigáciu sa ako vždy používa neusporiadaný zoznam (s triedou nav). Bežné položky ponuky sú položky zoznamu (li) a obsahujú odkazy (a href) bez akýchkoľvek tried a identifikátorov. Výnimkou sú 3 špecializované prvky tejto horizontálnej rozbaľovacej ponuky s týmito identifikátormi:

  • nastavenia - obrázok odkazu,
  • vyhľadávanie - blok s vyhľadávaním a zodpovedajúce tlačidlo,
  • options - obsahuje podponuku (implementovanú prostredníctvom zoznamu s triedou subnav).

V kóde sa tiež zobrazí skript s predponou bez použitia predpony CSS. Konečná verzia HTML pre rozbaľovaciu ponuku je:

CSS pre ponuku

1. Základné štýly a položky ponuky

Najprv určte písmo Montserrat, tmavošedé pozadie a pevnú výšku pre položky ponuky. Všetky prvky majú plavák: zarovnanie doľava a relatívne umiestnenie, takže potom môžete pridať podponuku s pozíciou: absolútna,

2. Návrh prepojenia

Pre položky ponuky sa použije základný dizajn + efekt css hover na hover. Výška je rovnaká ako v triede nav. Pri #settings obrázkových prepojeniach je zarovnanie nastavené na začiatku ponuky.

Tento prvok má pevnú šírku a skladá sa z niekoľkých častí - vstupného poľa (#search_text) so zeleným pozadím a tlačidla vyhľadávania (#search_button). V niektorých prehliadačoch môže byť farba pozadia šedá.

4. Rozbaľovacia ponuka

Posledný dotyk nám umožňuje vytvoriť rozbaľovaciu ponuku CSS, ktorá sa spustí pre poslednú #options položku.

V štýloch nájdete vloženie obrázku na pozadí trojuholníka (triangle.png) na označenie podponuky - nezabudnite uviesť správnu cestu pre tento a ďalšie obrázky v príklade. Keď sa objaví podponuka, implementuje sa pomocou vlastnosti opacity. Konečné riešenie na treske:

4. Rozbaľovacia ponuka Vrstvené CSS

V tejto možnosti sa používajú najmä techniky CSS2.1, plus alebo mínusové riešenie je nové - v marci 2015. Ak vám v horizontálnej rozbaľovacej ponuke pre lokalitu chýba jedna podúrovňa, tento príklad obsahuje tri naraz. Použitím: pseudotriedy iba pre deti sa pre položky pridá znak „+“, ktorý označuje prítomnosť podponuky.

Všeobecne platí, že dobrý a nekomplikovaný príklad. Nebudeme podrobne opisovať proces implementácie, ako je to podobné tým predchádzajúcim - najprv vytvorte drôtový model HTML a potom postupne pridajte štýly. Stiahnite si konečný kód z odkazu na zdroj, čiastočne sa môžete pozrieť na Codepen:

úhrnom

Hore sme sa zaoberali štyrmi možnosťami, ako vytvoriť rozbaľovaciu ponuku CSS + HTML pre hlavičku stránky (hlavičku), aj keď v sieti existuje oveľa viac takýchto príkladov. Existujú riešenia s jQuery, ale je to pravdepodobne užitočné iba pri implementácii niektorých špeciálnych efektov a neštandardných úloh. Vo väčšine prípadov stačí veľa súborov CSS + HTML, najmä odteraz sú hlavnými požiadavkami na ponuku pohodlie a vysoká rýchlosť sťahovania.

Nakoniec dve poznámky k vyššie uvedeným kódom. Niektoré príklady používajú obrázky pre rozbaľovaciu ponuku CSS, takže sa budete musieť dôkladne pozrieť na cesty k obrázkom a zadať správne hodnoty pre svoj web. Po druhé, časť riešení pred 2–3 rokmi, takže by ste mali znova skontrolovať ich výkon v rôznych prehľadávačoch.

Ak poznáte ďalšie zaujímavé moderné implementácie horizontálnych rozbaľovacích ponúk pre web, odošlite odkazy v komentároch.

Pridajte rozbaľovací ukazovateľ

Predtým, ako urobíme rozbaľovaciu ponuku v HTML až do konca, budeme sa zaoberať ukazovateľom, ktorý naznačuje prítomnosť rozbaľovacieho zoznamu pripojeného ku konkrétnej položke ponuky (znamienko „+“):

Na tento účel používame pseudoprvok CSS3 (: only-child). V tomto prípade skontroluje, či v značkách rodičovského prvku nie sú iné prvky. Ak nie, znamienko plus sa jednoducho odstráni, pretože v predvolenom nastavení sa nachádza vedľa všetkých položiek. Zobraziť + v blízkosti WordPress a kurzov?

Na záver

Mnoho ľudí používa jQuery alebo iné knižnice na dosiahnutie tohto cieľa. Som presvedčený, že tento článok poskytuje najjednoduchšiu a najjednoduchšiu možnosť. Ale voľba je na vás.

A ako ste vytvorili menu v HTML? Prosím, podeľte sa o to v komentároch.

Táto publikácia je prekladom článku „Ako vytvoriť rozbaľovaciu ponuku Pure CSS“, ktorú pripravil priateľský tím projektu internetovej technológie.

Krok 2) Pridajte CSS:

/ * Rozbaľovacie tlačidlo * /
.dropbtn <
farba pozadia: # 4CAF50,
farba: biela,
výplň: 16px,
veľkosť písma: 16px,
hranica: žiadna,
>

- potrebné na umiestnenie rozbaľovacieho obsahu * /
.dropdown <
poloha: relatívna,
displej: vložený blok,
>

/ * Rozbaľovací obsah (predvolene skrytý) * /
.dropdown-content <
displej: žiadny,
pozícia: absolútna,
farba pozadia: # f1f1f1,
minimálna šírka: 160 px,
tieň v tvare: 0px 8px 16px 0px rgba (0,0,0,0,2),
z-index: 1,
>

/ * Odkazy v rozbaľovacej ponuke * /
.dropdown-content a <
farba: čierna,
výplň: 12px 16px,
textová dekorácia: žiadna,
displej: blok,
>

/ * Zmena farby rozbaľovacích odkazov pri umiestnení kurzora myši * /
.dropdown-content a: hover

/ * Zobraziť rozbaľovaciu ponuku pri umiestnení kurzora myši * /
.dropdown: vznášať sa .dropdown-content

/ * Zmena farby pozadia rozbaľovacieho tlačidla, keď je zobrazený rozbaľovací obsah * /
.dropdown: hover .dropbtn

Príklad toho, ako to funguje

Pomocou ktorejkoľvek položky môžete otvoriť rozbaľovaciu ponuku, napríklad alebo

Použite prvok kontajnera (napr.

Krok 2) Pridajte CSS:

/ * Rozbaľovacie tlačidlo * /
.dropbtn <
farba pozadia: # 4CAF50,
farba: biela,
výplň: 16px,
veľkosť písma: 16px,
hranica: žiadna,
>

- potrebné na umiestnenie rozbaľovacieho obsahu * /
.dropdown <
poloha: relatívna,
displej: vložený blok,
>

/ * Rozbaľovací obsah (predvolene skrytý) * /
.dropdown-content <
displej: žiadny,
pozícia: absolútna,
farba pozadia: # f1f1f1,
minimálna šírka: 160 px,
tieň v tvare: 0px 8px 16px 0px rgba (0,0,0,0,2),
z-index: 1,
>

/ * Odkazy v rozbaľovacej ponuke * /
.dropdown-content a <
farba: čierna,
výplň: 12px 16px,
textová dekorácia: žiadna,
displej: blok,
>

/ * Zmena farby rozbaľovacích odkazov pri umiestnení kurzora myši * /
.dropdown-content a: hover

/ * Zobraziť rozbaľovaciu ponuku pri umiestnení kurzora myši * /
.dropdown: vznášať sa .dropdown-content

/ * Zmena farby pozadia rozbaľovacieho tlačidla, keď je zobrazený rozbaľovací obsah * /
.dropdown: hover .dropbtn

Príklad toho, ako to funguje

Vytvorili sme štýl rozbaľovacieho tlačidla s farbou pozadia, čalúnením atď.

Trieda .dropdown používa pozíciu: relatívna, čo je nevyhnutné, keď chceme, aby bol rozbaľovací obsah umiestnený priamo pod rozbaľovacím tlačidlom (pomocou polohy: absolútne).

Trieda .dropdown-content obsahuje skutočnú rozbaľovaciu ponuku. V predvolenom nastavení je skrytý a bude sa zobrazovať pri umiestnení kurzora myši (pozri nižšie). Všimnite si šírku min. má hodnotu 160ks. Môžete to zmeniť. Rada: Ak chcete, aby šírka rozbaľovacieho zoznamu bola rovnaká ako tlačidlo rozbaľovacieho zoznamu, nastavte šírku na 100% (a prepad: automatické zapnutie posúvania na malých obrazovkách).

Namiesto použitia okraja sme použili vlastnosť box-shadow, aby rozbaľovacia ponuka vyzerala ako „karta“. Z-index tiež používame na umiestnenie rozbaľovacieho zoznamu pred ostatné prvky.

: selektor kurzora sa používa na zobrazenie rozbaľovacej ponuky, keď používateľ pohne myšou nad rozbaľovacím tlačidlom.

Pin
Send
Share
Send
Send