Dobrý deň všetkým, ktorí práve čítajú túto publikáciu. Dnes vám chcem povedať o jednom z nástrojov na vytváranie stránok, bez ktorého sa nezaobíde žiadny webový zdroj. Toto je ponuka lokality, alebo ako sa hovorí, mapa lokality. K dnešnému dňu existuje nekonečné množstvo druhov a poddruhov jedálneho lístka.
Vývojári internetových obchodov, blogov, vzdelávacích služieb a iných zdrojov experimentujú a vytvárajú stále viac nových a nezvyčajných kariet. Po prečítaní článku zistíte, do akých hlavných skupín sú rozdelené všetky typy navigačných panelov, budete si môcť každý z nich vyskúšať a tiež sa naučíte, ako napísať kód menu pre html stránku. A teraz poďme rovno k veci!
Nástroje na vytváranie navigačnej lišty
V značkovacom jazyku existuje niekoľko spôsobov, ako vytvoriť menu. Ich hlavnou koncepciou je použitie neusporiadaného zoznamu. V pre nás obvyklom html 4 vývojári teda píšu značky na stránku
- A
- .
Ako bolo uvedené v predchádzajúcich publikáciách, párový prvok
- vytvorí zoznam s odrážkami a
- je jedným prvkom zoznamu. Pre prehľadnosť si napíšme kód pre jednoduché menu:
Navigácia Navigácia na stránke
- Domov
- Novinky týždňa
- Technologický pokrok
- Chat
S príchodom platformy však bol značkovací jazyk doplnený o ďalšie značky. Preto je ponuka moderných webových stránok vytvorená pomocou špeciálneho tag< menu>. Pri používaní sa tento prvok nelíši od zoznamov s odrážkami.
Namiesto jednotky < ul> predpísané < menu>. Pri posudzovaní zo strany práce sa však objavia značné rozdiely. Takže druhý príklad urýchľuje prácu vyhľadávacích programov a robotov v . Pri analýze štruktúry stránky okamžite pochopia, že tento kúsok kódu je zodpovedný za mapu stránky.
K dispozícii sú horizontálne, vertikálne a rozbaľovacie ponuky. Niekedy je navigačný panel navrhnutý ako obrázok. Odkedy sa technologický segment rozšíril, webové služby sa prispôsobujú, t. štruktúra stránky sa automaticky prispôsobuje veľkosti obrazovky zariadení. Zvážte uvedené skupiny menu.
Vytvorme model horizontálnej navigácie
Tento typ navigácie je najobľúbenejší. Pri horizontálnom dizajne panela sú všetky položky ponuky umiestnené v hlavičke stránky alebo v „päte“ (niekedy sú navigačné prvky duplikované a zobrazujú sa nad aj pod).
Ako príklad si vytvoríme horizontálny panel, ktorého položky menu budú štylizované pomocou css (kaskádových štýlov), alebo skôr transformované. Takže každý jednotlivý prvok bude v skosom obdĺžniku. Zaujatý?
Na transformáciu používame vlastnosť css tzv transformovať. Ak chcete zadať transformáciu, použite vstavanú funkciu skewX, v ktorom je uhol sklonu uvedený v stupňoch.
Bohužiaľ, každý prehliadač pracuje s touto vlastnosťou po svojom, napriek predpísaným štandardom. Preto boli vytvorené špeciálne predpony, ktoré označujú, že alebo:
- -ms- (Internet Explorer)
- -o- (Opera)
- -webkit- (Chrome, Safari)
- -moz- (Firefox)
A teraz sa získané vedomosti aplikujú na písanie príkladu.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 Horizontálny panel
Horizontálny panel
A teraz vertikálne. Povedal som vertikálne!
Pre druhý program používame ako základ predchádzajúci kód. Chcel som, aby moje vertikálne položky ponuky neboli šikmé, ale so zaoblenými rohmi.
Na tento účel som použil inú vlastnosť css hraničný polomer.
V predchádzajúcich článkoch som už s týmto parametrom pracoval, takže si myslím, že s pochopením jeho fungovania nebudú žiadne ťažkosti.
Vertikálny panel
Ako vidíte, hlavnou zmenou v tomto kóde je absencia vyhlásenia displej: inline-block, ktorý bol v skutočnosti zodpovedný za horizontálne usporiadanie navigačných prvkov.
Podpoložky v ponuke: rozbaľovací zoznam
Preskúmali sme hlavné skupiny navigačných panelov, ale existuje niekoľko ďalších druhov alebo lepšie povedané doplnkov.
Niekedy nastanú situácie, keď niektoré body dopĺňajú tie hlavné. V tomto prípade sa nezaobídete bez rozbaľovacích zoznamov. Vytvárajú sa transformáciami pomocou css nástrojov.
Nižšie pripájam kód malého programu, ktorý implementuje tento prístup.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 Rozbaľovací zoznam
Rozbaľovací zoznam
1. Vertikálne živé menu jQuery
2. Cool efekt. Tanečné menu.
4. Rozbaľovací zoznam pomocou jQuery
Vynikajúci štýl prvku rozhrania vo forme rozbaľovacieho zoznamu.
Keď umiestnite kurzor myši na tlačidlo, zhora sa objaví panel.
6. jQuery plugin „MobilyBlocks“ pre zobrazenie kruhového menu
7. Menu pomocou škriatkov
Animované javascriptové menu s efektom žiary.
Čerstvé pekné menu jQuery.
9. Ponuka jQuery GarageDoor
10. Vertikálne rolovacie menu jQuery
Implementácia jedálneho lístka s veľkým počtom položiek. Roluje pri pohybe kurzora myši nahor alebo nadol.
11. Štýl rozbaľovacej ponuky jQuery
12. Doplnok navigácie na stránke
Plynulé posúvanie do požadovanej sekcie na stránke. jQuery One Page Navigation Plugin.
13. Doplnok Animated Content Menu
Nový doplnok jQuery. Vynikajúca implementácia animovanej navigácie na stránke. Pri prechádzaní položkami menu vyskakuje blok s popisom a prípadnými odkazmi, pričom v závislosti od vybranej položky sa mení pozadie stránky, ktoré sa roztiahne na celú obrazovku bez ohľadu na veľkosť okna prehliadača. Nezabudnite si pozrieť demo stránku.
14. Plugin jQuery Sweet Menu
Animované menu s pohyblivými položkami.
15. Opravená ponuka jQuery
Pri posúvaní stránky nadol zostáva ponuka pevne umiestnená v hornej časti obrazovky.
16. Posúvacie ponuky súpravy posuvníkov
Na implementáciu vertikálneho menu s veľkým počtom položiek. Položky je možné posúvať pomocou kolieska myši alebo pomocou odkazov „Predchádzajúci“ a „Ďalej“.
17. Štýlové CSS3 Menu
18. Nová ponuka CSS3 v štýle Apple
Nové menu v štýle Apple. Vyzerá tmavšie ako predtým, ale nie menej pekné.
19. Pôvodná ponuka jQuery
Rozbaľovacia ponuka s efektom na pozadí. Podpoložky ponuky sa rozbalia nahor. Keď umiestnite kurzor myši na položku ponuky, obrázok na pozadí sa zmení.
20. Animované menu jQuery
Animované menu. Položky ponuky sú zobrazené ako ikony a popisy. niekoľko skvelých efektov pri prejdení myšou nad položku ponuky. K dispozícii je 8 efektov, ak si ich chcete pozrieť všetky, kliknite na odkazy Exemple1-Exemple8 na stránke s ukážkou.
21. "Ponuka rolovania" rolovacia ponuka XML
Vertikálne a horizontálne rolovacie menu. Dobré riešenie pre veľké množstvo položiek v ponuke.
22. Kontextové menu na stránke jQuery
Ponuka sa zobrazí po kliknutí pravým tlačidlom myši na konkrétnu oblasť.
23. Kruhové dvojúrovňové menu pre stránku
Keď je vybratá položka ponuky, položky podponuky sa zobrazia vpravo.
24. Ponuka jQuery CSS3 s efektom rozmazania „Ponuka rozmazania“ CSS3
Pôvodná ponuka jQuery CSS3 sa dodáva v 7 rôznych štýloch. Keď prejdete kurzorom myši na jednu z položiek ponuky, ostatné sa zdajú byť rozmazané.
25. Niektoré veľkolepé animované ponuky jQuery CSS3
10 kreatívnych animovaných menu. Horizontálne a vertikálne CSS3 menu s rôznymi efektmi a prechodmi.
Archív obsahuje aj pôvodný súbor menu PSD.
27. Menu Magic Line
Pozadie alebo podčiarknutie položky ponuky sleduje myš s miernym oneskorením, zatiaľ čo pozadie plynule mení farbu pri prechode z položky na položku. Veľmi pekný efekt, vyzerá nezvyčajne. Pozor: efekt nefunguje v opere
28 obrázkových bublín
Skvelý efekt pri prejdení myšou na jeden z obrázkov. Efekt trochu pripomína jQDock, opísaný vyššie.
31. Zaujímavé menu jQuery s rôznymi efektmi
Horizontálne, vertikálne menu. Zaujímavé efekty.
32. Skvelé menu jQuery v štýle Apple
34. Menu jQuery so zaujímavým efektom
36. Čerstvé menu so zaujímavým efektom jQuery
Veľmi zaujímavý efekt. Ideálne pre portfóliové webové stránky.
Zaujímavý efekt vyskakovacích miniatúr pri umiestnení kurzora myši.
40. Rozbaľovací zoznam s automatickým rolovaním
Pekný prechodový efekt medzi položkami.
42. Skvelé menu jQuery
43. Pekné veľké menu jQuery
44. Rolovateľné ponuky jQuery
Položky ponuky sa zobrazujú ako miniatúry.
46. Radiálna navigačná ponuka jQuery
47. Ponuky CSS a jQuery
Navigačný panel s vyhľadávacím poľom, ktoré sa pri posúvaní stránky nadol stane priehľadným.
48. Horizontálne menu jQuery
49. Vertikálna ponuka jQuery
Vynikajúce vertikálne menu. Pri umiestnení kurzora myši sa zobrazí položka ponuky.
50. Horizontálne menu jQuery
Zaujímavý efekt pri umiestnení kurzora myši nad položku ponuky.
52. Rozbaľovacia ponuka jQuery
Keď prejdete kurzorom myši na ponuku, zobrazia sa jej položky. Zobrazené položky sú zobrazené ako oblúk, ktorého polomer môžete nastaviť pri nastavovaní pluginu. V niektorých prehliadačoch neuvidíte oblúkové zobrazenie, ponuka sa zobrazí rovno, ale to stále nezničí celkový zážitok z tejto implementácie ponuky jQuery.
53. Navigačná lišta CSS a jQuery
Zaujímavý efekt pri prejdení myšou nad položku ponuky.
54. vyskakovací panel jQuery
Svieže animované menu v šedých tónoch.
58. Stĺpcová navigácia na stránkach s jQuery
Zaujímavé riešenie pre navigáciu, ktoré je prezentované vo forme vertikálnych pruhov. Keď umiestnite kurzor myši na tieto pruhy, zobrazí sa obrázok položky a zoznam podponuiek. Po kliknutí na položku podponuky sa zobrazí stránka s popisom. Táto implementácia je ideálna pre propagačné stránky alebo prezentácie. Nezabudnite si pozrieť ukážku pluginu.
59. Navigácia na stránke jQuery
Navigácia na stránke je prezentovaná vo forme 4 obrázkov, nad ktorými si všimnete zaujímavý animovaný efekt.
60. Navigačná lišta roluje s obsahom
Navigačná lišta. Kliknutím na šípku sa stránka posúva. Navigácia sa posúva spolu s obsahom stránky.
61. panel jQuery s rôznymi sociálnymi službami
62. Elegantná animovaná ponuka jQuery
63. Ponuka akvarelových štetcov jQuery
Úloha centrovania horizontálnej ponuky môže byť zložitá, najmä pre tých, ktorí začínajú používať CSS. Hľadanie riešení vedie k veľmi obmedzenému zoznamu metód, z ktorých väčšina sa spolieha na CSS triky, JavaScript alebo použitie neštandardných pravidiel, ktoré nie sú podporované všetkými prehliadačmi. V tomto návode sa pozrieme na metódu horizontálneho centrovania ponuky, ktorá používa iba štandardné pravidlá CSS a funguje vo všetkých prehliadačoch.
Príklad vycentrovaného menu
Nižšie je horizontálne menu v strede tohto stĺpca, v ktorom je aktivovaná druhá karta. Môžete skúsiť zmeniť veľkosť okna prehliadača alebo stránky, aby ste sa uistili, že ponuka zostane vždy vycentrovaná a funkčná.
Na stránke ukážky môžete vidieť niekoľko možností dizajnu pre horizontálne centrovanú ponuku. Ktorýkoľvek z nich môže byť použitý vo vašich projektoch.
HTML značky
Všetky ponuky, ktorých príklady sú uvedené v tejto lekcii, majú jednoduchú štruktúru. Je to len neusporiadaný zoznam odkazov zabalených do prvku. div.
Kód CSS ponuky v strede
Nižšie je uvedený úplný kód CSS, ktorý vycentruje ponuku. A vysvetlenia princípu práce sú uvedené neskôr v lekcii.
#centeredmenu ( float:left; width:100%; background:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; ) #centeredmenu ul ( clear:left; float:left; list-style :none; margin:0; padding:0; position:relative; left:50%; text-align:center; ) #centeredmenu ul li ( display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; ) #centeredmenu ul li a ( display:block; margin:0 0 0 1px; padding:3px 10px; background:#ddd; color:#000; text-decoration: none; line-height:1.3em; ) #centeredmenu ul li a:hover ( background:#369; color:#fff; ) #centeredmenu ul li a.active, #centeredmenu ul li a.active:hover ( color:# fff; background:#000; font-weight:bold; )
Ako funguje metóda centrovania
Pôsobenie metódy je založené na relatívnom umiestnení prvkov plávajúcich blokov jeden do druhého. Najprv sa pozrime, ako sa mení veľkosť prvkov pri odsadení.
Prvok div(blok) bez odsadenia sa roztiahne na celú šírku, ktorú má k dispozícii.
Ak ale presunieme prvok div doľava, automaticky sa zmenší na veľkosť svojho obsahu. Kompresia je kľúčom k implementácii tejto metódy centrovania ponuky. Pomôže to presunúť menu na správnu pozíciu.
Štandardná ponuka zarovnaná doľava
Zoberme si štandardné menu zarovnané doľava a prerobme ho krok za krokom. Pre prehľadnosť sú predmety zafarbené rôznymi farbami, takže je hneď jasné, čo sa kam investuje.
Venujte pozornosť nasledujúcim bodom:
- Prvok centrované menu div(modrý obdĺžnik) je odsadený doľava, ale má šírku 100 %, takže zostane roztiahnutý, aby sa zmestil na celú stranu.
- Prvok ul(ružový obdĺžnik) je vo vnútri prvku v strede menu div a posúva sa doľava. To znamená, že sa zmenší na šírku svojho obsahu, teda na celkovú šírku všetkých záložiek.
- Všetky prvky li (zelené obdĺžniky) sú vo vnútri prvku ul a posuňte sa doľava. Takto sa scvrknú na veľkosť článkov v nich a zoradia sa do jednej horizontálnej línie.
- Vo vnútri každého odkazu (oranžové obdĺžniky) je zobrazený text záložky: Záložka 1, Záložka 2 atď.
Posun pozície neusporiadaného zoznamu
Potom prvok presunieme ul doprava o 50 % s pozíciou:relatívna vlastnosť; . Keď je prvok za týchto podmienok odsadený o percento, je dôležité si uvedomiť, že celková šírka prvkov, ktoré obsahuje, nie je jeho šírkou. V našom prípade je posun v polovici okna prehliadača (alebo priestoru, ktorý je k dispozícii na zobrazenie), takže naša ponuka začína v strede okna a čiastočne ho presahuje. A prejdeme k ďalšiemu kroku.
Presuňte polohu všetkých položiek ponuky
Zostáva len presunúť všetky prvky li vľavo o 50 %. Toto je 50 % šírky nášho prvku ul (kontajner, ktorý obsahuje ponuku). Záložky sú teda posunuté presne do stredu okna.
Niekoľko dôležitých poznámok
Pri používaní tejto metódy centrovania je potrebné mať na pamäti niekoľko dôležitých vecí:
- Vzhľadom k tomu, prvok ulčiastočne prechádza mimo okna, čo vedie k zobrazeniu posuvníkov. Preto musíte použiť pravidlo overflow:hidden; pre prvok centrované menu div. Teda vyčnievajúca časť prvku div bude odrezaný.
- Vzhľadom k tomu, prvok ul nie je zarovnané podľa tabulátorov, nemôžete preň použiť žiadne vizuálne štýly. Ponechajte prvok ul bez farby pozadia a bez okraja, aby bol úplne neviditeľný. A štýly pre záložky by sa mali používať iba pre prvky li.
- Ak potrebujete nastaviť špeciálne štýly pre prvú a poslednú kartu, musíte pridať triedu pre prvý a posledný prvok li aby ste si ich mohli individuálne upravovať.
Záver
Navrhované riešenie je kompatibilné so všetkými prehliadačmi, nepoužíva JavaScript a podporuje text s meniteľnou veľkosťou.
Od autora: Vítam všetkých. Z nejakého dôvodu správcovia webu spájajú rozbaľovaciu ponuku so skriptami, ale už dlho sa takáto navigácia dá robiť úplne pokojne pomocou čistého css. A takéto menu nebude o nič horšie. Dnes vám ukážem, ako vytvoriť rozbaľovaciu ponuku v css. Dovoľte mi podeliť sa o recept.
Plán lekcie a rozvrhnutie nášho jedálneho lístka
Vo všeobecnosti sa najprv rozhodneme, ako vytvoríme samotné menu. V html5 je štandardným spôsobom vytvorenie v kontajneri navigácie pomocou zoznamu s odrážkami. Urobme len to. Značky neskôr odstránime pomocou css, v menu ich vôbec nepotrebujeme.
V skutočnosti budem okamžite písať v html značke s vnorenými zoznamami. To znamená, že náš zoznam bude dvojúrovňový – bude obsahovať ďalšie zoznamy. Totiž pre každú položku 1 zoznam, ktorý bude tvoriť rozbaľovaciu ponuku.
Je tu dôležitý bod, ktorým je, že možno nebudete musieť urobiť rozbaľovaciu ponuku všetkých položiek, ale iba niektorých. Žiadny problém, potom jednoducho nevytvoríme vnorené zoznamy v odsekoch bez výpadku.
Vlastne tu je celé označenie:
< nav id = "nav" >
< ul >
< li > < a href = "#" >odsek 1< / a >
< ul class = "second" >
< li > < a href = "#" >Pododsek< / a > < / li >
< li > < a href = "#" >Pododsek< / a > < / li >
< li > < a href = "#" >Pododsek< / a > < / li >
< / ul >
< / li >
< li > < a href = "#" >bod 2< / a >
< ul class = "second" >
< li > < a href = "#" >Pododsek< / a > < / li >
< li > < a href = "#" >Pododsek< / a > < / li >
< li > < a href = "#" >Pododsek< / a > < / li >
< / ul >
< / li >
< li > < a href = "#" >bod 3< / a >
< ul class = "second" >
< li > < a href = "#" >Pododsek< / a > < / li >
< li > < a href = "#" >Pododsek< / a > < / li >
< li > < a href = "#" >Pododsek< / a > < / li >
< / ul >
< / li >
< li > < a href = "#" >Bod 4< / a >
< ul class = "second" >
< li > < a href = "#" >Pododsek< / a > < / li >
< li > < a href = "#" >Pododsek< / a > < / li >
< li > < a href = "#" >Pododsek< / a > < / li >
< / ul >
< / li >
< / ul >
< / nav >
Chápem, že je obrovský. To je problém vnorených zoznamov, že musíte napísať veľa kódu. Ale zvážte skutočnosť, že robíme 4 hlavné položky a pre každú bude rozbaľovacia ponuka.
Vlastne som dal celej navigácii id nav a všetky vnorené zoznamy majú druhú triedu štýlu, aby som pochopil, že sú vnorené.
Skvelé, označenie je pripravené, môžete vidieť výsledok:
Áno, vyzerá to hrozne. Teraz ale do práce zapojíme css a o pár minút sa nám zmení navigácia. Poďme pracovať.
Písanie css štýlov
Prvá vec, ktorú urobím, je obnoviť všetky výplne na predvolené hodnoty pre všetky prvky. Budú nám len prekážať, v prípade potreby je lepšie nastaviť zarážky sami neskôr.
*( okraj: 0; výplň: 0; )
okraj: 0
výplň: 0
#nav( výška: 70px; ) #nav ul( štýl zoznamu: žiadny; )
#nav(
výška: 70px
#navul(
štýl zoznamu: žiadny;
Teraz sa musíme rozhodnúť, aké bude naše menu. Horizontálne alebo vertikálne? Navrhujem, aby ste najskôr urobili horizontálny a videli všetko na jeho príklade. Ak to chcete urobiť, musíte napísať nasledujúce štýly:
#nav > ul > li( float: left; width: 180px; position: relatívna; )
#nav > ul > li(
plavák : vľavo ;
šírka: 180px
poloha : relatívna ;
Všimnite si, že znakom > odkazujeme na položky zoznamu, ktoré sú priamo vnorené do ul, ktorá je priamo vnorená do nav. Je to veľmi dôležité, pretože vám to umožňuje nepoužívať štýl na vnorené položky zoznamu. Faktom je, že podľa mojej predstavy budú položky v hlavnom zozname usporiadané horizontálne a vo vnorených - vertikálne.
Ale samozrejme, môžete to urobiť inak, v súlade s vašou predstavou. Môžete sa uistiť, že všetky položky sú na jednom riadku.
Každopádne, vyššie uvedený kód, dúfam, že rozumiete. Vynúti to, aby sa položky hlavného zoznamu usadili doľava, takže sa všetky zmestia na rovnaký riadok, aj keď ide o prvky na úrovni bloku. Tiež som im dal explicitnú šírku a relatívne umiestnenie.
Na čo slúži polohovanie? Je to nevyhnutné, aby sa vnorené zoznamy neskôr úplne umiestnili. Ak ste študovali polohovanie v css, pravdepodobne viete, že ak nastavíte relatívne umiestnenie na blok, potom všetky prvky v ňom môžu byť umiestnené absolútne v tomto konkrétnom bloku a nie v celom okne prehliadača.
Zatiaľ máme toto:
Z tejto snímky obrazovky si už viete predstaviť približný výsledok. Samozrejme, body musíme ešte krásne nastylovať, aby oči pri prezeraní navigácie neprosili o milosť.
#nav li a( display: block; background: #90DA93; border: 1px solid #060A13; color: #060A13; padding: 8px; text-align: center; text-decoration: none; ) #nav li a:hover( pozadie: #2F718E; )
#nav li a(
displej : blok ;
pozadie : #90DA93;
okraj : 1px plný #060A13;
farba : #060A13;
výplň: 8px
text - align : center ;
text - dekorácia : žiadna ;
#nav li a:hover(
pozadie : #2F718E;
Po prvé, samotné odkazy musia byť blokované. Je to potrebné na to, aby výplň fungovala a všetky vlastnosti boli správne aplikované. Ďalej určím farby pozadia, text, možnosti rámčeka, zarážky a zarovnanie textu na stred. Nakoniec odstraňujem podčiarknutie odkazov.
Všetky tieto parametre nemusia byť napísané tak, ako som to napísal ja. Farby si môžete vybrať ľubovoľne, vyrobiť iný rám alebo ho nepoužívať vôbec, odsadenie je možné zmenšiť alebo zväčšiť.
Všimnite si, že v tomto prípade sme nepoužili znak >, takže tieto pravidlá sa budú vzťahovať na všetky odkazy, vrátane odkazov vo vnorených odsekoch. Takže teraz máme nasledovné:
Skvelé, ale chápete, že podpoložky by nemali byť viditeľné, mali by sa odkryť pri umiestnení kurzora myši na požadovanú položku. Bez toho vyzerá naše menu ako stôl. No, je čas skryť vnorené položky.
#nav li .second( zobrazenie: žiadne; pozícia: absolútna; hore: 100 %; )
#nav li .second(
displej: žiadny;
poloha: absolútna;
hore : 100 % ;
Najprv skryjeme úplne vnorené zoznamy. Po druhé, dávame im absolútnu polohu a súradnicu hore: 100 %. To znamená, že rozbaľovacia ponuka sa zobrazí jasne pod hlavnou položkou, ku ktorej patrí, jasne pod 100 % výšky danej položky.
Teraz na webovej stránke vidíme iba hlavné menu, ktoré potrebujeme.
Implementácia výpadku
Zostáva nám urobiť to najdôležitejšie – implementovať samotný spád. Nie je na tom nič zložité, pozrite sa na tento kód:
#nav li:hover .second( display: block; )
#nav li:hover .second(
displej : blok ;
Tento kód bude fungovať bezchybne. Pri umiestnení kurzora myši nad položku hlavnej ponuky sa zobrazí vnorený zoznam. A iba zoznam, ktorý je vnorený do položky, na ktorej sa pohybuje kurzor.
Je tu len jeden menší problém – šírka vnorených položiek sa nezhoduje so šírkou tých hlavných. Ale to sa dá veľmi ľahko vyriešiť pridaním vhodných štýlov:
#nav li li( šírka: 180px; )
#nav li li(
šírka: 180px
To je všetko, problém vyriešený:
Všetko funguje perfektne. Keď umiestnite kurzor myši na hlavnú položku, zobrazí sa príslušná rozbaľovacia ponuka. Ak posuniete kurzor na stranu, zmizne. Ak presuniete kurzor na samotné vnorené položky, môžete na ne kliknúť a prejsť na požadovanú časť lokality. Preto sme vytvorili veľmi jednoduché a ľahké rozbaľovacie menu bez absolútne žiadnych skriptov.
Zmena menu na vertikálne
No, úplne sme prišli na horizontálnu navigáciu, ale okrem nej je na stránkach veľmi bežná aj vertikálna navigácia a môže byť aj rozbaľovacia. V skutočnosti je zmena ponuky z horizontálnej na vertikálnu veľmi jednoduchá, budeme musieť zmeniť len pár riadkov kódu.
Najprv budete musieť odstrániť float:left z položiek hlavného zoznamu. Práve táto vlastnosť prispieva k tomu, že sa nám položky zobrazujú v jednom riadku, ale prečo to potrebujeme, ak má byť navigácia vertikálna?
Teraz zostáva zmeniť pravidlá pre selektor #nav li .second, teda pre vnorené zoznamy, konkrétne ich treba umiestniť trochu inak. Páči sa ti to:
#nav li .second( zobrazenie: žiadne; pozícia: absolútna; zľava: 100 %; hore: 0; )
#nav li .second(
displej: žiadny;
poloha: absolútna;
vľavo: 100 %
hore: 0;
To znamená, že je potrebné zaregistrovať dve súradnice namiesto jednej. Po prvé, v prípade horizontálnej navigácie som povedal, že podľa plánu by sa položky podmenu mali zobrazovať pod hlavnými položkami. V prípade vertikálneho menu to nie je vhodné – položky by sa mali zobrazovať na boku.
Takže zmeníme hornú časť: 100 % na ľavú: 100 %. Okrem toho potrebujeme aj hornú súradnicu. Nastavte ju na 0, aby bola podponuka na rovnakej úrovni ako položka, ktorej sa zhoduje.
Všetko, teraz všetko funguje ako má. Môžete testovať. Ako vidíte, neklamal som, keď som povedal, že budem musieť prepísať len pár riadkov kódu.
Horizontálne menu s viacerými úrovňami
Použitím takmer rovnakého prístupu môžete v prípade potreby vytvoriť viac úrovní ponuky. Vytvorme si napríklad zoznam pre štvrtú položku hlavného menu, ktorá bude vnorená do jednej z podpoložiek.
Dobrý deň, milí návštevníci môjho blogu! Dnes si povieme niečo o hlavnom horizontálnom menu stránky, a to ako zarovnať horizontálne menu na stred. Áno, na prvý pohľad, čo je tu také ťažké - nastavil som potrebné odrážky, upravil a hotovo. Ale sú tu nejaké nuansy. Stránka je v prvom rade dynamika, t.j. na stránke sa neustále objavuje nový obsah, objavujú sa nejaké nové bloky s informáciami atď. Takže niektoré položky v hlavnom menu sa môžu objaviť/zmiznúť. S ohľadom na to všetko, čo musíte urobiť, je zabezpečiť, aby po pridaní alebo odstránení položky ponuky zostala ponuka aj v strede. Samozrejme, nie vždy je potrebné ho centrovať, všetko závisí od prevedenia. Ale ak stále máte v úmysle umiestniť horizontálne menu do stredu, potom použitím niekoľkých jednoduchých trikov v css môžeme dosiahnuť požadovaný výsledok.
Štruktúra článku
Horizontálne menu v strede bez rozbaľovacích položiek
Najprv sa pozrime na príklad vodorovného menu, ktoré nemá rozbaľovacie položky.
Html kód
css kód
*, *::after, *::before ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box- sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; ) #mainmenu ( background: #444; position: relatívne; overflow: hidden; height: 40px; margin: 30px 0 ) #mainmenu ul ( štýl zoznamu: žiadny; okraj: 0; odsadenie: 0; pozícia: relatívna; vľavo: 50 %; plávajúca: vľavo; písmo: 14px Arial, Helvetica, bezpätkové; výška: 40px ) #hlavné menu ul li ( pozícia : relatívna; vľavo: -50%; plávajúca: vľavo; okraj: 0 10px; výška: 40px výška: 40px; ) #mainmenu ul li a:hover (farba pozadia: #666; )Zoberme si všetko v poriadku, tu je všetko jednoduché. Vytvoríme kontajner "hlavného menu", kde vložíme naše menu ako neusporiadaný zoznam.
Teraz je to na štýloch css. Najprv resetujeme všetky okraje a výplň na nulu pre všetky prehliadače. Ďalej pomocou vlastnosti „float:left“ posunieme náš neusporiadaný zoznam doľava a potom ho relatívne umiestnenie posunie o 50 % doprava. Šírka zoznamu "ul" sa bude rovnať súčtu dĺžok všetkých položiek "li", ktoré sú v ňom. Ak teda mentálne rozdelíme okno prehliadača na polovicu, naša ponuka pôjde napravo od deliacej čiary. Na zarovnanie použijeme aj relatívne umiestnenie na položky „li“ a posunieme ich doľava o 50 %, pričom určíme vlastnosť „left: -50 %“. A napriek tomu som takmer zabudol, že náš kontajner „hlavného menu“ musí špecifikovať vlastnosť "overflow:hidden", inak dostaneme vodorovný posuvník.
To je všetko, naša ponuka je teraz zarovnaná na stred. Teraz môžete pridávať alebo uberať body, to neovplyvní umiestnenie. Túto ponuku môžete použiť aj na svojich webových stránkach jednoduchou zmenou štýlov tak, aby vyhovovali vášmu dizajnu.
Horizontálne menu v strede s rozbaľovacími položkami
Teraz sa pozrime na rozbaľovacie podpoložky. Tu je situácia trochu iná a trochu komplikovanejšia, pretože v prvom prípade nám nebudú vypadávať podpoložky, pretože sme do bloku „hlavné menu“ špecifikovali vlastnosť „overflow: hidden“. To znamená, že prvky mimo tohto bloku sa nezobrazia. Ale existuje cesta von.
Zmenil som teda predchádzajúci kód a odstránil z neho vlastnosť „overflow:hidden“.
Html kód
CSS kód
*, *::after, *::before ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box- sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; ) #mainmenu ( position: relativní; background: #444444; height: 40px; margin: 30px 0; padding: 0; float: vľavo; šírka: 100 %; z-index: 10 ) #mainmenu ul ( jasné: vľavo; pozícia: relatívna; vpravo: 50 %; výška: 40px; plávajúca: vpravo; zarovnanie textu: stred; písmo: 15px Arial, Helvetica , bezpätkové; štýl zoznamu: žiadny; výplň: 0; okraj: 0 ) /** Hlavné body **/ #mainmenu > ul > li ( pozícia: relatívna; vľavo: 50 %; plávajúca plocha: vľavo; výška: 40px ; padding: 0; margin: 0 ) #mainmenu > ul > li > a ( border-left: 1px solid #666; display: block; color: #fff; text-decoration: none; padding: 0 20px; line-height : 40px; ) #mainmenu > ul > li:first-child > a ( border: none ) #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li. active > a ( color: #fff ) #mainmenu > ul > li:hover, #mainmenu > ul > li.ho ver, #mainmenu > ul > li.active ( background: #666 ) /* Rozbaľovacie podpoložky */ #mainmenu ul li ul ( poloha: absolútna; vľavo: 0; hore: 40px; displej: žiadny; štýl zoznamu: žiadny; viditeľnosť: skryté; výplň: 0; okraj: 0; width: 200px ) #mainmenu > ul > li ul li ( farba pozadia: #666; pozícia: relatívna; vľavo: 0; zobrazenie: položka zoznamu; plávajúca: žiadna; výška: auto; okraj: 0; zarovnanie textu: left; ) #mainmenu ul li ul li a ( border-bottom: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; ) #mainmenu ul li ul li.parent a ( pozícia: relatívna; ) #mainmenu ul li ul > li.parent > a::pred ( border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolútna; vpravo: 15px; hore: 50 %; transformovať: preložiťY(-50%) otočiť (45°); výška: 6px; šírka: 6px; ) #mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover ( background-color: #444 ) #mainmenu ul li:hover ul, #mainmenu ul li.hover ul ( display: block ) /* Rozbaľovacie položky druhej úrovne */ #mainmenu ul li:hover > ul ( nepriehľadnosť: 1; viditeľnosť : viditeľné; okraj: 0; ) #mainmenu ul li ul li ul ( hore: 0; vľavo: 200 pixelov; okraj: 0 0 0 20 pixelov; šírka: 180 pixelov )Teraz máme ponuku nastavenú na stred a podpoložky vypadnú pri umiestnení kurzora myši.
Ponuka zarovnania na stred s flexboxom
Ponuka zarovnania na stred môžete tiež použiť nové pravidlo v css - flexbox. Vo všeobecnosti chcem trikom s flexboxom venovať samostatný príspevok, stojí to za to, výrazne to zjednodušuje život kódera. Vo všeobecnosti tu nebudeme zachádzať hlboko ... Tu uvediem iba css kód pre menu s rozbaľovacími položkami. HTML kód je rovnaký ako vyššie.
CSS kód
*, *::after, *::before ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box- sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; ) #mainmenu ( position: relativní; background: #444444; height: 40px; margin: 30px 0; padding: 0; width: 100 %; z-index: 10 ) #mainmenu ul ( display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit- box-direction: normálny; -webkit-flex-direction: riadok; -ms-flex-direction: riadok; flex-direction: riadok; výška: 40px; zarovnanie textu: stred; font: 15px Arial, Helvetica, bezpätkové ; štýl zoznamu: žiadny; výplň: 0; okraj: 0; -balenie-balenia-webovej sady: stred; -obsah-webovej sady: stred; -ms-flex-pack: stred; zarovnanie obsahu: stred; ) / ** Hlavné body **/ #hlavné menu > ul > li ( pozícia: relatívna; výška: 40px; výplň: 0; okraj: 0 ) #hlavné menu > ul > li > a (ľavý okraj: 1px plné #666; displej: block;color: #fff; text-dekorácia: žiadna; výplň: 020px; výška riadku: 40px ) #mainmenu > ul > li:first-child > a ( border: none ) #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a ( farba: #fff ) #mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active ( background: #666 ) /* Rozbaľovacie podpoložky */ #mainmenu ul li ul ( pozícia: absolútna; vľavo: 0; hore: 40px; zobrazenie: žiadne; štýl zoznamu: žiadny; viditeľnosť: skryté; výplň: 0; okraj: 0; šírka: 200px ) #hlavné menu > ul > li ul li ( pozadie- farba : #666; pozícia: relatívna; vľavo: 0; zobrazenie: položka zoznamu; plávajúca: žiadna; výška: auto; okraj: 0; zarovnanie textu: doľava; ) #hlavná ponuka ul li ul li a ( okraj-dole: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; ) #mainmenu ul li ul li.parent a ( pozícia: relatívna; ) #mainmenu ul li ul > li.parent > a::before ( border-top: 1px full #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolute; right: 15px; top: 50%; t ransform: preložiťY(-50%) rotovať (45°); výška: 6px; šírka: 6px ) #mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover ( farba pozadia: #444 ) #mainmenu ul li:hover ul, #mainmenu ul li.hover ul ( display: block ) /* Rozbaľovacia ponuka položky druhá úroveň */ #mainmenu ul li:hover > ul ( nepriehľadnosť: 1; viditeľnosť: viditeľné; okraj: 0; ) #mainmenu ul li ul li ul ( hore: 0; vľavo: 200px; okraj: 0 0 0 20px; šírka: 180px)Ako vidíte, pravidlá sa zmenili len pre rodičovský zoznam - #mainmenu ul. Jedinou vecou bolo pridať predpony pre predchádzajúce verzie prehliadačov. Podotýkam, že iba moderné prehliadače správne chápu pravidlo flexboxu. Ak sa zameriavate na staršie prehliadače, možnosť flex bude musieť byť odložená. Môžete vidieť, ktoré prehliadače dobre rozumejú flexboxu
- je jedným prvkom zoznamu. Pre prehľadnosť si napíšme kód pre jednoduché menu:
Tlačiareň netlačí a nie je k dispozícii - čo robiť
Najlepšie emulátory Androidu pre PC Najlepšie emulátory herných konzol pre Windows
Aká je prípona súboru .odt?
Operácie schránky v putTTY Putty paste zo schránky
Ako vytvoriť ikonu priečinka (ikonu) z fotografie Ako môžem zmeniť ikonu odkazu