Rozbaľovacia ponuka html. Vertikálna rozbaľovacia ponuka CSS v ponukách po umiestnení kurzora myši a vrstvených ponukách. Ako vytvoriť horizontálne rozbaľovacie menu

27.10.2019 internet

Dobrý deň, milí čitatelia. Dnes budeme diskutovať o téme ako vytvoriť horizontálne menu pomocou html a css". Menu sa spravidla nachádza v hlavičke stránky a je zoznamom odkazov na najdôležitejšie stránky, nazýva sa tiež hlavné menu. Používatelia budú neustále klikať na tieto odkazy. To, ako ich usporiadate a aký dizajn menu dáte, ovplyvní správanie používateľov, konverziu, ich celkový zážitok z vašej stránky a samozrejme .

HTML kód pre horizontálne menu

Kedysi bolo hlavné menu pre stránku robené na obrázkoch, tabuľkách, flashi a možno aj niečom inom, no v súčasnosti je najobľúbenejší a najsprávnejší spôsob vytvárania menu pomocou značiek „zoznam“.

Tagy sa používajú na vytváranie menu.
,
a .

Príklad použitia značiek html na vytvorenie ponuky v nižšie uvedenom kóde:

Domov
Služby
Ceny
Kontakty

Štandardné štýly CSS pre horizontálne menu

ul ( štýl zoznamu: žiadny; /*odstrániť značky zoznamu*/ okraj: 0; /*odstrániť výplň*/ výplň-vľavo: 0; /*odstrániť výplň*/ ) a (ozdobenie textu: žiadne; /*odstrániť podčiarknutie text odkazu*/ ) li ( float:left; /*Umiestnite zoznam vodorovne, aby ste implementovali ponuku*/ margin-right:5px; /*Odsadenie položiek ponuky*/ )

Dostaneme hotové top menu v hlavičke, bez akýchkoľvek špeciálnych štýlov a zvončekov a píšťaliek, to sa dá nazvať rámcom vášho budúceho krásneho menu. Ak skopírujete a prilepíte tento html a css, bude to vyzerať takto.

Príklad rámčeka (šablóny) pre vaše budúce menu

Všetko sa ukázalo celkom jednoducho, samozrejme chcete hneď krásne hlavné menu, ale bez pochopenia základov jednoducho nebudete môcť vytvoriť dobré menu bez chýb v html a css.

Okrem float:left; existuje aj niekoľko ďalších metód CSS používaných na vytvorenie horizontálnych ponúk; , napríklad display:inline-block; alebo display:flex; , ale odporúča sa použiť metódu opísanú vyššie.

Naplňte našu šablónu menu rôznymi štýlmi a urobme to krásne.

Príklady krásneho horizontálneho menu pre webovú stránku

Teraz uvediem niekoľko hotových príkladov s hotovým dizajnom horizontálneho menu.

Všetky „pekné veci“ pre svoju stránku si môžete vytvoriť sami a nemusíte ich hľadať na internete. Najjednoduchší spôsob, ako to urobiť, je založený na jednom z nižšie uvedených príkladov.

Jednoduché modré menu so samostatnými položkami

CSS štýly pre „horné“ menu

Nižšie sú uvedené štýly pre túto ponuku. HTML zostáva rovnaké ako v menu "kostra".

Ul ( list-style: none; /*odstrániť značky zoznamu*/ okraj: 0; /*odstrániť výplň*/ padding-left: 0; /*odstrániť výplň*/ margin-top:25px; /*indent top*/ ) a ( dekorácia textu: žiadna; /*odstrániť podčiarknutie textu odkazu*/ pozadie:#30A8E6; /*pridať pozadie k položke ponuky*/ farba:#fff; /*zmeniť farbu odkazu*/ výplň:10px; /*pridať výplň */ rodina fontov: arial; /*zmena fontu*/ border-radius:4px; /*pridať zaokrúhľovanie*/ -moz-transition: všetko 0,3 s 0,01 s ľahkosť; /*urobiť hladký prechod*/ -o-prechod: všetko 0,3s 0,01s uvoľnenie; -webkit-transition: všetko 0,3 s 0,01 s ľahkosť; ) a:hover ( background:#1C85BB;/*Pridať efekt vznášania*/ ) li ( float:left; /*Umiestnite zoznam vodorovne, aby ste implementovali ponuku*/ margin-right:5px; /*Pridajte výplň do položiek ponuky* / )

Hlavné menu umiestnené na farebnom riadku s červeným pozadím

Ponuka štýlu css na farebnom riadku

ul ( štýl zoznamu: žiadny; /*odstrániť značky zoznamu*/ okraj: 0; /*odstrániť výplň*/ výplň-vľavo: 0; /*odstrániť výplň*/ okraj-vrchu:25px; /*odsadiť hornú časť*/ pozadie :#FF4444; /*pridať pozadie do celej ponuky (výmena tohto parametra zmení farbu celej ponuky)*/ height: 50px; /*nastaviť výšku*/ ) a ( text-decoration: none; /* odstrániť podčiarknutie textu odkazu* / pozadie:#FF4444; /*pridať pozadie k položke ponuky (výmena tohto nastavenia zmení farbu všetkých položiek ponuky)*/ color:#fff; /*zmena farbu odkazu* / padding:0px 15px; /*pridať odsadenie*/ font-family: arial; /*zmena písma*/ line-height:50px; /*zarovnanie ponuky vertikálne*/ display: block; border-right: 1px solid # F36262; /*pridať orámovanie doprava*/ -moz-transition : všetkých 0,3 s 0,01 s ľahkosť; /*urobiť plynulý prechod*/ -o-prechod: všetkých 0,3 s 0,01 s ľahkosť; -webkit-transition: všetko 0,3 s 0,01 s ľahkosť; ) a:hover ( pozadie:#D43737;/ *pridať efekt vznášania*/ ) li ( float:left; /*uložiť zoznam vodorovne Ponuka*/ )

Rozbaľovacia ponuka v HTML+CSS

Na realizáciu ďalšie rozbaľovacie (rozbaľovacie) menu na stránke pre akúkoľvek položku ponuky musíme do kódu HTML pridať ďalší zoznam položiek pre akýkoľvek odkaz z horizontálnej ponuky a zmeniť štýly CSS. V štýloch uplatníme jednoduchý trik – zmenu zobrazenia roletového menu pri prejdení myšou na položku, ktorú potrebujeme v hornom menu. Zoberme si napríklad položku „služby“.

Príklad vytvorenia jednoduchého rozbaľovacieho menu

HTML kód rozbaľovacej ponuky

Domov
Služby
- Služba 1
- Dlhá služba 2
- Služba 3
Ceny
Kontakty

Rozbaľovacia ponuka Štýly CSS

ul ( štýl zoznamu: žiadny; /*odstrániť značky zoznamu*/ okraj: 0; /*odstrániť výplň*/ výplň-vľavo: 0; /*odstrániť výplň*/ okraj-vrchu:25px; /*odsadiť hornú časť*/ pozadie :#819A32; /*pridať pozadie do celej ponuky*/ výška: 50px; /*nastaviť výšku*/ ) a ( text-decoration: none; /*odstrániť podčiarknutie textu odkazu*/ pozadie:#819A32 ; /*pridať pozadie k položke ponuky*/ color:#fff; /*zmena farby odkazov*/ padding:0px 15px; /*pridať odsadenie*/ font-family: arial; /*zmena fontu*/ line-height :50px; /*zarovnať ponuku na vertikály*/ display: block; border-right: 1px solid #677B27; /*pridať orámovanie doprava*/ -moz-transition: all 0,3s 0,01s easy; /*urobiť hladký prechod*/ -o-prechod: všetko 0,3 s 0,01 s ľahkosť; -webkit-prechod: všetko 0,3 s 0,01 s ľahkosť; ) a:hover ( background:#D43737;/*Pridať efekt vznášania*/ ) li ( float :left; /*Umiestnite zoznam vodorovne na implementáciu ponuky* / position:relative; /*nastavte polohu pre umiestnenie*/ ) /*Štýly pre skrytú rozbaľovaciu ponuku* / li > ul ( poloha:absolútna; top:25px; displej:žiadny; ) /*Zviditeľniť skrytú časť*/ li:hover > ul ( display:block; width:250px; /*Nastavte šírku rozbaľovacej ponuky*/ ) li:hover > ul > li ( float:none; /* Odstráňte horizontálne umiestnenie* / )

A aby ste presne pochopili, aké služby a kategórie by ste mali mať, odporúčam vám, aby ste sa oboznámili s materiálom:.

Snažil som sa vám čo najstručnejšie povedať, ako vytvoriť hlavné horizontálne menu, urobiť niekoľko šablón, ako doň pridať jednoduché štýly a urobiť ho krajším, ako urobiť rozbaľovacie menu pre vašu stránku. Pre pohodlie som zhromaždil všetky vyššie uvedené ponuky do jedného html súboru, ktorý si môžete stiahnuť nižšie. Vyzerá to ako na snímke obrazovky:

Ďakujem za pozornosť.

Horizontálne menu je zoznam sekcií stránky, takže je logickejšie označovať vnútri prvku

Ako vytvoriť horizontálne menu: príklady značiek a dizajnu

HTML značenie a základné štýly pre horizontálne menu

Štandardne sú umiestnené všetky položky zoznamu vertikálne po celej šírke kontajnerového prvku, ktorý sa zase rozprestiera po celej šírke jeho kontajnerového bloku.

HTML značky pre horizontálnu navigáciu

Položka menu
Položka menu
Položka menu

Do prvku možno dodatočne umiestniť horizontálne menu umiestnené vo vnútri značky

...

dodatočná príležitosť

Existuje niekoľko spôsobov, ako ich umiestniť horizontálne. Najprv musíte obnoviť predvolené štýly prehliadača pre navigačné prvky:

Ul ( list-style: none; /*odstráni značky zoznamu*/ okraj: 0; /*odstráni horný a dolný okraj 1em*/ padding-left: 0; /*odstráni ľavý výplň 40px*/ ) a (text-decoration: none; /*odstrániť podčiarknutie textu odkazu*/)

Metóda 1. li (zobrazenie: inline;)

Urobte položky zoznamu vložené. V dôsledku toho sú usporiadané vodorovne, na pravej strane sa medzi ne pridá medzera rovnajúca sa 0,4 em (vypočítaná vzhľadom na veľkosť písma). Ak ho chcete odstrániť, pridajte záporný pravý okraj k li li (margin-right: -4px;) . Ďalej upravte štýl odkazov, ako chcete.

Metóda 2. li (plávajúca: vľavo;)

Prvky zoznamu robíme plávajúcimi. V dôsledku toho sú usporiadané horizontálne. Výška ul kontajnerového bloku bude nulová. Na vyriešenie tohto problému pridáme (pretečenie: skryté;) do ul , čím ho rozšírime a umožníme mu tak obsahovať plávajúce prvky. Pre odkazy pridajte (zobraziť: blok;) a upravte ich podľa potreby.

Metóda 3. li (zobrazenie: inline-block;)

Vytváranie položiek zoznamu inline-block. Sú usporiadané horizontálne, na pravej strane je vytvorená medzera, ako v prvom prípade. Pre odkazy pridajte (zobraziť: blok;) a upravte ich podľa potreby.

Metóda 4. ul (zobrazenie: flex;)

Vytvorenie zoznamu ul ako flexibilného kontajnera pomocou súboru . V dôsledku toho sú prvky zoznamu usporiadané horizontálne. Pridajte (zobrazenie: blok;) pre odkazy a upravte ich podľa potreby.

1. Responzívne menu s efektom podčiarknutia pri umiestnení kurzora myši nad odkaz

2. Responzívne menu pre svadobný web

3. Citlivé menu s hrebenatkami

4. Responzívna ponuka s nástrojmi

5. Responzívne menu s logom v strede

6. Responzívne menu s logom na ľavej strane

Dlho som chcel napísať článok o tom, ako to urobiť podmenu v css. Veľa ľudí to robí jQuery a celkom dobre však vychádza celý základný princíp tvorby podmenu v css Predstavím to tu. A už ďalej, od tohto základu, môžete podmenu ďalej vylepšovať.

Hneď prinášam CSS kód:

* html ul li (
plavák: vľavo;
}
* html ul li a (
výška: 1 %;
}
ul(
border-bottom: 1px solid #000;
štýl zoznamu: žiadny;
okraj: 0;
výplň: 0;
šírka: 100px
}
ul li (
poloha: relatívna;
}
ul li a (
displej:blok;
orámovanie: 1px plné #000;
border-bottom: 1px;
výplň: 5px
text-dekorácia: žiadna;
}
li ul (
displej: žiadny;
vľavo: 99px;
pozícia: absolútna;
hore: 0;
}
li:hover ul (
displej:blok;
}

Najdôležitejšia vec je tu selektor" li: vznášať sa ul". V skutočnosti zobrazuje obsah ponuky. V predvolenom nastavení je " displej: žiadny", a keď umiestnite kurzor myši na položku ponuky, podponuka sa zmení na: " displej: blok", teda viditeľné. To je najdôležitejšie. Aj v prvých dvoch voličoch (ktoré * ) ide CSS hack pre IE, inak bez neho nebude v tomto prehliadači nič fungovať. Všetko ostatné je vzhľadčo sa samozrejme dá zmeniť.

Prinášam a HTML kód:

Domov

Menu 1
- Podponuka 1
- Podmenu 2
- Podponuka 3

Menu 2
- Podmenu4
- Podmenu 5
- Podmenu 6
- Podmenu7
- Podmenu 8

Ak sa nad touto štruktúrou dôkladne zamyslíte, všetko bude veľmi jasné. Tag ul- vytvára jedálny lístok. Ak ul je vnútri iného ul, potom je to už podmenu. Značka li zodpovedný za konkrétnu položku menu.

Samozrejme, menu je najjednoduchšie, ako z hľadiska logiky a štruktúry, tak aj z hľadiska dizajnu. Samozrejme, môžete použiť jQuery urobte hladký otvor. Môžete zmeniť aj dizajn, no celý princíp zostane rovnaký ako v tomto podmenu napísané v CSS a HTML.

Pozdravujem! Ak ste začiatočník layout designer, tak skôr či neskôr narazíte na to, že chcete svoje stránky nejako oživiť, urobiť ich aspoň trochu interaktívnymi. Ako je to možné, tu vám môžu pomôcť animácie CSS. Musíte však vedieť, kde a ako ich aplikovať.

Dnes poviem ako vytvoriť rozbaľovaciu ponuku na cleancss a ako tomu dodať hladkosť pomocou CSS animácií. Ak neviete, potom je čas zoznámiť sa so základmi.

Sadzba ponuky HTML + CSS

Na začiatok, aby sme mali s čím pracovať, si vyskladáme jednoduché jednoúrovňové menu. S dizajnom sa veľmi trápiť nebudeme, pre prehľadnosť stačí toto:

čo máme? Najbežnejší neusporiadaný zoznam s identifikátorom "top_menu" a s odkazmi zabalenými do prvkov tohto zoznamu. Všetko je banálne a jednoduché. Pri vznášaní sa položky menu menia farbu... to je všetko, čo už viete a chápete, ako to (dúfam) robiť.

Pridanie ponuky druhej úrovne

Aby sme vytvorili vrstvené menu, musíme do prvého pridať druhý neusporiadaný zoznam. Myslím, že si to niekam zobral na úvodných lekciách. A tiež skutočnosť, že ho musíte vložiť nielen do nášho zoznamu, ale aj do prvku zoznamu, teda značky " li“, hneď za koncovou značkou „a“.

Umiestnite vnorené zoznamy absolútne vzhľadom na „ li“, v ktorom sú vnorené. A všetko " li» najvyššej úrovne je umiestnený vzhľadom na ( príbuzný). Aby bola rozbaľovacia ponuka IHNEĎ po našej ponuke najvyššej úrovne, (rozbaľovacia ponuka - “ vnútorné_menu“) musí byť nastavené

pozícia: absolútna; horná časť: 100 %;

To znamená, že odsadenie od horného okraja rodiča sa bude rovnať výške rodiča. Veľmi logické, podľa mňa.

Okrem umiestňovania musíte dať rozbaľovacej ponuke rovnaký štýl ako ponuke najvyššej úrovne. Jablko z jablone, ako sa hovorí...

Ako môžete vidieť, naša rozbaľovacia ponuka ešte nevyzerá ako rozbaľovacia, ale spadnutá a visiaca. Ale to je v poriadku, čoskoro to napravíme.

Ako urobiť rozbaľovaciu ponuku skutočne rozbaľovaciu

Nie je nič jednoduchšie! Ak chcete, aby sa náš vnorený zoznam stal rozbaľovacím menu, stačí ho skryť! A potom otvorte iba vtedy, keď kurzor myši prejde cez položku ponuky najvyššej úrovne, ktorá obsahuje rozbaľovaciu ponuku. Môže to znieť trochu komplikovane, ale v skutočnosti sa to dá vyriešiť iba niekoľkými riadkami kódu.

Pridať do rozbaľovacej ponuky:

displej: žiadny;

A aby ste ho mohli zobraziť, musíte sa zaregistrovať:

#top_menu > li:hover > ul ( display: block; )

Čo nám hovorí celá táto skupina selektorov? Čítame od konca. Nastavili sme štýly (viditeľnosť) pre zoznam druhej úrovne, ktorý sa nachádza vo vnútri prvku zoznamu prvej úrovne, ale tieto štýly budú fungovať iba vtedy, ak podržíme kurzor myši (ukážeme myšou) na prvok "li", ktorý vnoril náš zoznam druhej úrovne.

Dúfam, že som sa vyjadril jasne. Ak nie, skúste si to prečítať niekoľkokrát. Ešte lepšie je to pochopiť tak, že sa pozriete na kód. Pozrime sa, čo máme:

Áno, zdá sa, že sme dosiahli to, čo sme chceli – urobili sme rozbaľovacie menu, skutočné rozbaľovacie menu, do čerta! Niečo mu však chýba. Vieš čo? Hladkosť! Všetko totiž vyzerá tak, že menu nevypadne, ale jednoducho sa objaví. A to veľmi prudko, dokonca okamžite, povedal by som.

No pohráme sa s tým trochu viac.

Hladké rozbaľovacie menu je jednoduché

Takže urobme plynulé rozbaľovacie menu čistý CSS. prečo to robiť? Pretože ľudia milujú, keď je všetko hladké a mäkké ... a vyzerá to nádherne. Bude to plus pre použiteľnosť vašej stránky. Poďme!

Pamätajte, že môžete animovať iba presné matematické hodnoty, ako napríklad 50 pixelov a 300 pixelov, 0 a 100 %, 0,5 a 1,0 atď. V našom prípade nebudeme môcť animovať dva stavy našej rozbaľovacej ponuky ( displej:žiadny; a displej:blok;).

Môžeme ich však nahradiť transparentnosťou – nepriehľadnosť:0 a nepriehľadnosť:1. A nastavte čas, počas ktorého sa naše menu objaví z priehľadného stavu. Áno, funguje to, ale nie je to taký efekt, aký by ste mohli očakávať. Poďme si to teda trochu sťažiť. Ale stojí to za to, ver mi.

Aby bola animácia plynulejšia a predvídateľnejšia, museli sme nastaviť pevnú výšku položiek rozbaľovacej ponuky, aj keď sme sa zaobišli aj bez nej. Metód je veľa, stačí vymýšľať kombinácie a riešiť problémy.

Ako môžete vidieť z kódu, animovali sme výšku rozbaľovacích položiek a ich priehľadnosť. Ukázalo sa, že to stačí na vytvorenie krásneho plynulá animácia rozbaľovacia ponuka.

Čo potrebujeme na animáciu? Dva stavy našich položiek ponuky, ako aj vlastnosť prechodu, ktorá interpolovala tieto stavy, to znamená, že vyplnila všetky medzihodnoty za pridelené časové obdobie. To je všetko!

Ešte jednoduchšie by sa to dalo urobiť pomocou jQuery, ale najprv sme sa dohodli, že dnes budeme pracovať s čistým CSS. A ešte krajšie by sa dalo urobiť pridaním Bézierových kriviek do animácií, no táto téma je už trochu nad rámec dnešnej doby. Ale určite sa k nej vrátime neskôr.

Záver:

Teraz sa môžete pochváliť svojim priateľom a rodine, že viete, ako vytvoriť rozbaľovaciu ponuku s čistým CSS. Toto je skutočne užitočná zručnosť, ktorú budete potrebovať viackrát. Veď posúďte sami, koľko stránok so statickým menu ste už videli? Nie, väčšina stránok má rozbaľovaciu ponuku.

Mimochodom, toto bol môj prvý CSS tutoriál. Popíšte, ako sa vám páči? Vysvetlili ste všetko jasne alebo potrebujete ísť do detailov? A oplatí sa vôbec pokračovať v písaní článkov na tému life hackov v CSS?

Ďakujem za pozornosť a do skorého videnia!

Čítali ste až do konca?

Bol tento článok nápomocný?

Nie naozaj

Čo konkrétne sa ti nepáčilo? Bol článok neúplný alebo nepravdivý?
Napíšte do komentárov a sľubujeme zlepšenie!

V tomto návode si spravíme klasické horizontálne menu v čistom CSS. V zoznamoch má ikony. Pri umiestnení kurzora myši nad položku plynule zmení farbu tlačidla a textu a pridá tieň. Rozbaľovacie zoznamy môžu byť vytvorené na viacerých úrovniach, a čo je najdôležitejšie, všetko je celkom jednoducho implementované v čistom CSS3.

V lekcii budeme používať:

displej:flex;
použiť prechod;
prvky umiestnime pomocou position .

HTML štruktúra horizontálneho menu

Najprv si napíšme označenie pre horizontálne menu. Otvoríme naše vývojové prostredie v mojom prípade je to PhpStorm , vytvoríme súbor index.html, napíšeme framework html:5, nahradíme lang ru.

Vymažem všetky meta okrem kódovania, napíšem svoj názov " tom menu».

Medzi telo napíšeme tag header a v ňom je blok s triedou .dws-menu, v ktorom sa bude nachádzať naše menu. Ďalej bude štruktúra nasledovná, vytvoríme zoznamy v počte piatich kusov. Každý zoznam bude mať prepojenie s atribútom href="#". Potom tam bude ikona I s triedou .fa .fa-

Kliknite na použiť.

Napíšme názov položiek ponuky ( Domov, Produkty, Služby, Novinky, Kontakty).

Ďalej vyberte a pripojte ikony. Prejdeme na webovú stránku Font Awesome, vyberieme ikony pre tieto položky ponuky:

Archív stiahneme zo stránky s ikonami, rozbalíme jeho obsah do nášho počítača, skopírujeme priečinok fonts a priečinok css do nášho vývojového prostredia.

Priečinok fonts obsahuje fonty ikon a priečinok css obsahuje ich štýly. Komprimované štýly je možné odstrániť pomocou font-awesome.min , vrátane nekomprimovaného font-awesome.css .

V index.html spájame ikony a každej položke predpisujeme vlastný štýl ikony ( Domov, nákupný vozík, ozubené kolesá, th-zoznam, obálka-otvorená).

Urobili sme hlavný rám, po opísaní hlavného štýlu vytvoríme podmenu a teraz vytvoríme súbor, kde popíšeme hlavné štýly horizontálneho menu style.css a pripojíme ho k index.html . Aby som skontroloval, či sú štýly prepojené, vytvorím si priečinok img , do ktorého umiestnim ľubovoľný obrázok pozadie. Spojenie obrázku napíšeme pomocou pozadia .

Body( background-image: url(../img/ep_naturalwhite.png"); )

Popis štýlov CSS pre horizontálnu ponuku

Najprv obnovme všetky zarážky, ktoré môžu rôzne prehliadače predvolene nastaviť:

Dws-menu *( okraj: 0; výplň: 0; )

Nastavíme hlavičku na 200 pikov. a priraďte font Cuprum, ktorý si môžete stiahnuť a samostatne pripojiť k vašej stránke, pre každý prípad napíšeme ďalšie fonty.

Hlavička (okraj: 200px; rodina písiem: Cuprum, Arial, Helvetica, bezpätkové; )

Skryjeme značky zo zoznamov:

dws-menu ul, .dws-menu ol( štýl zoznamu: žiadny; )

Ukážme zoznamy vodorovne s displejom: ľan a urobme ho na stred:

Dws-menu > ul( display: flex; justify-content: center; )

V hlavičke odsadzujme iba zhora, napíšme margin-top .

Hlavička( margin-top: 200px; rodina písiem: Cuprum, Arial, Helvetica, bezpätkové; )

Poďme si navrhnúť naše menu, nastaviť farbu tlačidiel, písmo atď.

Dws-menu > ul li a( display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; )

Potom umiestnime ikony, priradíme zoznamom pozíciu: relatívna; na ďalšie vycentrovanie ikon:

dws-menu > ul li( pozícia: relatívna; )

dws-menu > ul li > a i.fa( pozícia: absolútna; hore: 15px; vľavo: 12px; font-size: 18px; )

Priraďme zoznamom oddeľovač hraníc, vyberieme prvý prvok LI a nastavíme hranicu. Vyberieme posledný prvok LI a priradíme mu podobnú hranicu.

Dws-menu > ul li:first-child( border-left: 1px solid #b2b3b5; ) .dws-menu > ul li:last-child( border-right: 1px solid #babbbd; )

Vytváranie oddeľovačov pre zoznamy LI:

.dws-menu > ul li( poloha: relatívna;

border-right: 1px solid #c7c8ca;

Menu nadobudlo vzhľad, potom môžete začať popisovať štýly pri prechode myšou.

Animujte vodorovnú ponuku umiestnením kurzora myši

Dws-menu li a:hover( background: #454547; color: #ffffff; box-shadow: 1px 5px 10px -5px black; transition: all 0,3s easy; )

A aby tento efekt hladko zmizol, pridajte tento štýl do odkazu v pokoji:

.dws-menu > ul li a( display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase;

Hlavné menu je hotové a môžete začať popisovať podmenu a ich podmenu.

Popis rozbaľovacej ponuky CSS/HTML

Otvoríme index.html a k produktom pridáme napríklad doplnkové menu. Medzi zoznamy LI vložíme UL , umiestnime doň päť zoznamov, v ktorých budú odkazy s atribútom herf=”#” .

ul>li*5>a

Kliknite na použiť, napíšte názvy položiek ( Oblečenie, elektronika, jedlo, náradie, život. chémia).

oblečenie
Elektronika
Jedlo
Nástroje
Gen. chémia

Potom otvoríme style.css a popíšeme štýly podmenu.

Vyberte druhý zoznam a dajte mu pozíciu: absolútna; , nastavte minimálnu šírku na 150 pixelov.

/*podponuka*/ .dws-menu li ul( pozícia: absolútna; minimálna šírka: 150px; )

Do zoznamov zapíšeme hranicu 1 vrcholu.

Dws-menu li > ul li( orámovanie: 1px plné #c7c8ca; )

Pre odkazy v podponuke nastavte výplň na 10 pixelov, odstráňte transformáciu textu a stmavte pozadie o niekoľko tónov: #e4e4e5; .

Dws-menu li > ul li a( padding: 10px; text-transform: none; background: #e4e4e5; )

Potom vytvoríme ďalšie vnorené menu. Poďme do súboru značiek a napríklad v "Elektronika" vytvoríme menu analogicky, ako sme to urobili predtým. Opíšte nadpisy odsekov ( Fotoaparáty, počítače, telefóny) a uložte.

Elektronika
- kamery
- Počítače
- Telefóny

Sú zobrazené, ale skryté pod hlavným menu, teraz pozícia: absolútna; vnorené UL a posunúť ho o 150 vrcholov. na stranu:

Dws-menu li > ul li ul( pozícia: absolútna; vpravo: -150 pixelov; hore: 0; )

/*podmenu*/ .dws-menu li ul( pozícia: absolútna; minimálna šírka: 150px;

A pre ich vzhľad vyberieme zoznamy pri umiestnení kurzora myši a zobrazíme ich pomocou display: block; .

dws-menu li:hover > ul( display: block; )

Teraz môžete pridať viacúrovňové ponuky jednoduchým skopírovaním bloku UL a zmenou jeho položiek.

Domov
Produkty
- oblečenie
  - Topánky
  - Bundy
  - Nohavice
- Elektronika
  - kamery
  - Počítače
  - Telefóny
    - Samsung
    - Flf
    - Apple
- Jedlo
- Nástroje
- Gen. chémia
Služby
- Služba 1
- Služba 2
- Služba 3
Správy
Kontakty

Potom ozdobíme gombíky ingredienciou na posledné kroky. Používam CSS generátor, mám vytvorených niekoľko Presetov, môžete si vytvoriť vlastný, v mojom prípade len kopírujem daný kód a umiestnite pozadie, ktoré som napísal predtým.

.dws-menu > ul li a( display: block;

/* Trvalý odkaz – použite na úpravu a zdieľanie tohto prechodu: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Vlastné+3 */ pozadie: #c9c9c9 ; /* Staré prehliadače */ pozadie: -moz-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */ pozadie: -webkit-linear-gradient(top, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25,Safari5.1-6 */ pozadie: linear-gradient(to bottom, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9c9c9", endColorstr="#757577",GradientType=0); /* IE6-9 */

padding: 15px 30px 15px 40px; veľkosť písma: 14px; farba: #454547; text-dekorácia: žiadna; text-transform:veľké písmená; prechod: všetkých 0,3 s ľahkosť; )

/* Trvalý odkaz - použite na úpravu a zdieľanie tohto prechodu: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 */ pozadie: #e0e1e5; /* Staré prehliadače */ pozadie: -moz-linear-gradient(top, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%); /* FF3.6-15 */ pozadie: -webkit-linear-gradient(top, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* Chrome10-25,Safari5.1-6 */ pozadie: linear-gradient(to bottom, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e0e1e5", endColorstr="#e0e1e5",GradientType=0); /* IE6-9 */

farba: #ffffff; box-shadow: 1px 5px 10px -5px čierny; prechod: všetkých 0,3 s ľahkosť; )

Ak je to žiaduce toto menu na stránke si môžete zariadiť štýl, ktorý vám vyhovuje, je celkom jednoduché vygenerovať farbu a nahradiť ju v kóde. Výsledkom je jednoduché a zároveň pekné horizontálne menu vytvorené čistým CSS.

sushiandbox.ru Mastering PC - Internet. Skype. Sociálne siete. Lekcie o Windowse.

Rozbaľovacia ponuka html. Vertikálna rozbaľovacia ponuka CSS v ponukách po umiestnení kurzora myši a vrstvených ponukách. Ako vytvoriť horizontálne rozbaľovacie menu

HTML kód pre horizontálne menu

Štandardné štýly CSS pre horizontálne menu

Príklad rámčeka (šablóny) pre vaše budúce menu

Príklady krásneho horizontálneho menu pre webovú stránku