Ako roztiahnuť menu na celú šírku css. Krásne horizontálne menu s plnou šírkou. Adaptívne menu s hrebenatkami

Ahoj. Už veľmi dlho som nepísal príspevky na tému práce s html/css. Nedávno som začal dávať dokopy nové rozloženie a pri tom som narazil na zaujímavý trik, ktorý vám umožní urobiť menu flexibilným (môžete doň pridať nové položky a veľkosť sa nezväčší, ale vždy bude 100% rodičovský blok). Dnes teda implementujeme gumené menu pomocou CSS.

Ak ste príliš leniví na čítanie článku, môžete si pozrieť toto video. Autor tiež všetko veľmi dobre vysvetľuje:

Gumené menu s CSS – krok 1

Prvým krokom je vždy html značkovanie, kde by sme bez neho boli? Ale v našom prípade bude všetko jednoduché:

blokový obal pre menu

samotná ponuka zobrazená prostredníctvom zoznamu s odrážkami (značka ul)

Položky ponuky sú vo vnútri, a preto už majú odkazy

Všetko je jasné, tu je môj značkovací kód:

Všetko vyzerá štandardne, takto:

Teraz dáme všetko do požadovanej podoby, CSS sa pustí do práce.

Krok 2 – Základné štýly

Ďalej pridám štýly do bloku obalu. Totiž, nastavím maximálnu šírku na 600 pixelov (len pre uľahčenie fotenia obrazovky, aby sa ponuka zmestila) a blok aj vycentrujem.

Obal(
pozadie: #fff;
max-width: 600px;
okraj: 0 auto;
}

Krok 3 - implementujte gumu

Teraz prejdime k samotnému menu. Odstránim z nej značky (značku ul), vytvorím na pozadí lineárny gradient a čo je najdôležitejšie, použijem vlastnosť display: table-row, aby sa kontajner pre menu choval ako riadok tabuľky. To je dôležité urobiť pre ďalšie manipulácie.

R-menu(
pozadie: linear-gradient(doprava, #b0d4e3 0%,#88bacf 100%);
zobrazenie: riadok tabuľky;
štýl zoznamu: žiadny;
}

Ako vidíte, vyššie uvedený kód práve vyriešil všetko, o čom som písal. Mimochodom, je vhodné generovať prechody pomocou nástroja Ultimate CSS Gradient generator. Raz o ňom opäť napíšem.

R-menu(
vertikálne zarovnať: dole;
displej: tabuľka-bunka;
šírka: auto;
text-align: center;
výška: 50px;
border-right: 1px solid #222;
}

vertical-align: bottom - táto vlastnosť je potrebná, aby ak text v položke ponuky zabral 2 riadky, zobrazil sa rovnomerne. Keď vytvoríme menu, môžete túto vlastnosť odstrániť, priblížiť, aby sa položky skomprimovali a text sa presunul na dva riadky a uvidíte problém so zobrazením. Vráťte nehnuteľnosť a všetko bude v poriadku.
display: table-cell - keďže samotné menu zobrazenia nastavíme na riadok tabuľky, bolo by logické nastaviť jeho položky tak, aby sa zobrazovali ako bunky v tabuľke. Je to nevyhnutné.
šírka: auto — šírka sa vypočíta automaticky v závislosti od dĺžky textu v odseku
text-align: center - toto je len na vycentrovanie textu vo vnútri
výška: 50 pixelov — nastavte výšku na 50 pixelov
no, border-right je len hranica vpravo, oddeľovač položiek

Menu zatiaľ vyzerá nevzhľadne, ale to je v poriadku, je čas si to pripomenúť.

Posledná vec, ktorú musíte urobiť, je upraviť štýl odkazov vo vnútri položiek. Tu mám tento kód:

R-menu li a(
text-dekorácia: žiadna;
šírka: 1000px;
výška: 50px;
vertikálne zarovnať: stred;
displej: tabuľka-bunka;
farba: #fff;
font: normal 14px Verdana;
}

A takto vyzerá menu teraz:

Opäť mi dovoľte vysvetliť niektoré riadky:

vlastnosť text-decoration prepíše predvolené podčiarknutie pre odkazy
šírka: 1000px je možno najdôležitejší riadok. Odkazy musíte nastaviť približne na túto šírku, možno menšiu, ale rozhodne väčšiu ako najširšia možná položka menu. Odkazy nebudú mať šírku 1000 pixelov, pretože šírka bude obmedzená položkou ponuky li, ktorej šírka je nastavená na auto, ale to umožní zabezpečiť, že pre ľubovoľný počet položiek v ponuke bude vždy 100 percent šírky.
vertical-align: middle a display: table-cell - prvá zarovná text vertikálne na stred a druhá tiež zobrazí odkazy ako bunky. Potrebné sú obe vlastnosti.
font - no, toto je len súbor nastavení pre písmo. Prečítajte si o vlastnostiach css pre písma v tomto článku.

Krok 4 (voliteľné) Môžete pridať interaktivitu

Napríklad, aby sa farba položky ponuky zmenila, keď na ňu umiestnite kurzor myši. Dá sa to implementovať celkom jednoducho pomocou pseudotriedy hover:

R-menu li:hover(
farba pozadia: #6bba70;
}

Testovanie menu na gumovitosť

Skvelé, jedálne lístky sú hotové, ale neskontrolovali sme to najdôležitejšie – aké je to gumové, ako som vám sľúbil. No, pridám do menu ďalšie 2 položky:

Ponuka zostáva široká 600 pixelov. Zvyšné položky boli jednoducho trochu zmenšené, aby sa do nich zmestili 2 nové.

Pridám ešte jeden dlhý bod:

Ako vidíte, menu sa trochu viac scvrklo a dlhá položka sa zobrazuje úplne normálne. A keby nebolo vlastnosti vertical-align: bottom, o ktorej som vám hovoril, ponuka by vyzerala horšie.

Menu zredukujem na tri položky.

Položky sa stali oveľa voľnejšie, no samotné menu sa na šírku nezmenilo. Tak sme urobili 100% gumené menu!

Ako to prispôsobiť?

V zásade, ak nastavíte baliaci blok na maximálnu šírku a nie na pevnú, potom ho ani netreba prispôsobovať. V mojom prípade mám vlastnosť max-width: 600px a keď bude šírka menšia ako 600 pixelov, blok sa jednoducho zmenší spolu s obrazovkou bez vytvorenia vodorovného rolovania.

No, ak chcete nejako zmeniť alebo opraviť menu na mobilných zariadeniach alebo širokouhlých obrazovkách, potom vám pomôžu mediálne dotazy! Veľa šťastia pri tvorbe webových stránok!

Dobrý deň

Často je potrebné urobiť horizontálne menu, ktoré sa roztiahne po celej šírke nadradeného bloku bez ohľadu na to, koľko položiek obsahuje.

Dnes by som vám chcela ukázať, ako si vytvoriť práve takéto menu.

Takže naše menu bude nasledovné:

Je natiahnutý do celej šírky a vynikne pri prehodení. Menu je po stranách zaoblené.

ZNAČKY HTML

...

Domov

Zaujímavé novinky

Ďalšia položka menu!

Aby bolo menu na celú šírku, použil som tabuľky so 100% šírkou. Každá tabuľka má kontajner div položky ponuky. V závislosti od toho, či je prvá, posledná alebo prechodná položka ponuky div, sa priradí príslušná trieda.

Každý kontajner div má 2 bočné okraje s absolútnym umiestnením, ktoré sú potrebné pre správne zobrazenie. Ak použijete štandardné okraje, potom pri prepínaní položiek ponuky text poskočí o 1-2 pixely, čo je dobré.

Aktívna trieda je zodpovedná za vybratú položku ponuky a zvýrazní ju.

V každej položke máme obrázok a text. Aby sme zabezpečili, že toto všetko bude zarovnané striktne v strede vertikálne, používame tabuľku. Vďaka vlastnosti vertikálneho zarovnania budú naše položky ponuky vždy zobrazené hladko a nebudú sa vzďaľovať.

PRAVIDLÁ CSS

Najprv nastavíme štýly pre všeobecné zobrazenie ponuky:

Menu_container ( padding-top: 40px; width: 100%; height: 47px; border-spacing: 0px; ) .menu_container td ( vertical-align: middle; /* vertikálne zarovnanie */ ) .last_point_menu, .first_point_menu, .middle_point_menu šírka: 100 %; výška: 47px; okraj: 1px plný #dadbda; z-index: 1000; pozícia: relatívna; ľavý okraj: žiadny; ) .inner_table (šírka: 100 %; výška: 100 %; ) .inner_table td ( padding: 0px; vertical-align: middle; border: none; text-align: left; width: 150px; padding-left: 4px; ) .td.inner_table_title ( padding-top: 4px; font-weight: bold; ) .td.inner_table_img ( width: 40px!important; ) .inner_table_menu ( height: 100%; padding: 0px; vertical-align: middle; border: none; text-align: left; ) .inner_table_title ( padding-left: 10px; padding-right: 10px; text-transform: veľké písmená; line-height: 13px; ) .inner_table_menu td.inner_table_img (šírka: 30px!important; height: 30px!important; padding-left: 15px; )

Pre krásu zaokrúhlime rohy po stranách ponuky:

Menu_prvneho_bodu ( -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 1px solid #dadbda; ) .last_point_menu ( -webkit-border-top-right-radius: 5px; -webkit-border -polomer-pravý-dolný: 5px; -roz-polomer-okraja-nahore: 5px; -poloradok-okraja-moz-bottomright: 5px; polomer-okraj-vpravo-hore: 5px; polomer-okraj-vpravo-okraja: 5px ;)

Teraz má naše menu krajší vzhľad:

Prvý bod zatiaľ nemá ľavé ohraničenie. Opravíme to trochu neskôr.

Teraz do ponuky pridáme efekty vznášania.

Middle_point_menu:hover, .last_point_menu:hover, .first_point_menu:hover, .middle_point_menu.active, .last_point_menu.active, .first_point_menu.active, .middle_point_menu.active ( background-color: #CAE285; background-linearage: -moz gradient(top, #CAE285, #9FCB56); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#CAE285), to(#9FCB56)); background-image: -webkit-linear -gradient(top, #CAE285, #9FCB56); background-image: -o-linear-gradient(top, #CAE285, #9FCB56); background-image: linear-gradient(to bottom, #CAE285, #9FCB56); border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; border-left: none; z-index: 5000; ) /* vypočíta hranice pri umiestnení kurzora myši */ .first_point_menu ( border: 1px solid #dadbda ; ) .first_point_menu:hover, .first_point_menu.active ( border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( border: 1px solid #dadbda; border-left: none_point; ) . :hover ( border: 1px solid #9FCB56; border-left: none; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( border-left: none; )

Teraz naša ponuka vyzerá oveľa krajšie, ale zatiaľ nemáme okraje pre zvýraznené položky ponuky. Poďme to napraviť!

/* štýly pre bočné okraje */ .borderLeftSecond, .borderRightSecond ( zobrazenie: žiadne; pozícia: absolútna; šírka: 1px; výška: 47px; farba pozadia: #9fbb62; horná časť: 0px; z-index: 1000; ) /* absolútne posuny hraníc */ .borderLeftSecond (vľavo: 0px; ). , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond; handle na prípady: /* zobrazenie: prvá a posledná položka */ .first_point_menu.active .borderLeftSecond (zobrazenie: žiadne; ) .last_point_menu.active .borderRightSecond (zobrazenie: žiadne; ) .last_point_menu:hover .borderLeftSecond (zobrazenie: blok; )

To je všetko!

Dostali sme vynikajúce menu natiahnuté po celej šírke rodičovského bloku! Položky sa pri prejdení myšou navzájom neprekrývajú a rozloženie neskáče.

Pokračujeme v sérii lekciou o rozbaľovacích ponukách. Ďalej je horizontálna rozbaľovacia ponuka „urob si sám“ pomocou css.

Ak ste sa sem dostali náhodou alebo ste hľadali inú implementáciu rozbaľovacieho menu, odporúčam vám prejsť do nadradenej sekcie.

Táto časť popisuje horizontálnu rozbaľovaciu ponuku v CSS a HTML.

Navigácia na stránke:

takže, naša úloha:

vytvoriť vodorovnú ponuku s rozbaľovacím zoznamom css (na zoznamoch ul li) bez použitia jQuery a Javascriptu a tiež bez použitia tabuliek

v kóde.

Rozbaľovacia horizontálna ponuka html

V prvom rade, kým začneme písať kód, musíme si spraviť html šablónu pre menu.

Vzhľadom na to, že robíme univerzálne menu, chcem, aby sa čo najviac podobalo výstupu z WordPress menu. Podľa môjho názoru je to jeden z najjednoduchších a najuniverzálnejších kódov ponuky Html. Vyzerá to takto:

Domov
O nás
Naše služby
- Naša služba č.1
- Naša služba č.2
- Naša služba č.3
- Naša služba č.4
- Služba 5
Správy
Kontakty

Ako môžete vidieť z kódu, naša rozbaľovacia ponuka bude implementovaná do zoznamov ul a li. Takto vyzerá ponuka bez štýlu CSS:

Priznajme si to, vyzerá to škaredo, ako obyčajný zoznam. Ďalej musíme túto ponuku ozdobiť pomocou štýlov CSS.

Horizontálna rozbaľovacia ponuka v CSS

Štýly CSS pre rozbaľovacie ponuky a ďalšie sú potrebné ako vzduch. Koniec koncov, rozbaľovacia karta je vytvorená na základe pseudo-class:hover.

Pre vodorovnú rozbaľovaciu ponuku potrebujeme nasledujúce štýly:

#menu1( pozícia:relatívna; zobrazenie:blok; šírka:100%; výška:auto; z-index:10; ) #menu1 ul( pozícia:relatívna; zobrazenie:blok; okraj:0px; padding:0px; šírka:100 %; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul::after( display:block; width:100%; height:0px; clear:both; content:" "; ) # menu1 ul li( pozícia:relatívna; zobrazenie:blok; float:left; width:auto; height:auto; ) #menu1 ul li a( display:block; padding:9px 25px 0px 25px; font-size:14px; font- rodina:Arial, bezpätkové; farba:#ffffef; výška riadku:1,3em; dekorácia textu:žiadna; váha písma:tučné; transformácia textu:veľké;výška:36px;veľkosť poľa:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; )

Toto ešte nie je koniec, len časť CSS pre hlavné horizontálne menu. Ďalej napíšeme štýly pre rozbaľovací zoznam ponuky:

#menu1 ul li ul( pozícia:absolútne; hore:36px; vľavo:0px; zobrazenie:žiadne; šírka:200px; pozadie:#EBBD5B; ) #menu1 ul li:hover ul(zobrazenie:blok;)/*tento riadok implementuje mechanizmus vypadávania*/ #menu1 ul li ul li( float:none; width:100%; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 25px; width: 100%; box-sizing:border-box; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li ul li a: vznášaj sa (pozadie:#FDDC96; farba:#6572BC; )

To je teraz všetko. Samotný mechanizmus vypadávania je implementovaný v jednej línii.

Pozrite si vzhľad pomocou tohto menu:

Ryža. 2 (horizontálna rozbaľovacia ponuka)

Nižšie je ukážka toho, ako funguje rozbaľovacia ponuka, ako aj odkaz na stiahnutie zdrojov. (Ukážka sa otvorí pomocou rozbaľovacej ponuky v hornej časti tejto stránky, nie je potrebné klikať na otvorenie v novom okne 🙂 alebo kolieskom myši)

Horizontálna rozbaľovacia ponuka na celú šírku

Väčšina z vás mi môže vyčítať, že takéto menu, ako som ukázal vyššie, sú pozdravom z minulosti a čiastočne máte pravdu, hoci som videl nedávne rozloženia s takýmito ponukami.

Dúfam, že ste si stiahli vyššie uvedený príklad. Naše Html zostáva rovnaké, ale úplne zmeníme CSS. Môžete jednoducho vziať kód CSS odtiaľto a vložiť ho do stiahnutého príkladu alebo sledovať v demo režime, ako to funguje.

#container( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( zarovnanie textu: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( position :relative; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; ) #menu1 ul li a( display:block; padding:9px 35px 0px 35px; font-size :14px; font-family:Arial, sans-serif; color:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing :border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left :0px; displej:žiadny; šírka:auto; pozadie:#EBBD5B; white-space:nowrap; ) #menu1 ul li:last-child ul(/*posledná položka bude pripojená k pravému okraju*/ left:auto; right:0px; ) #menu1 ul li:hover ul(display:block;)/*this riadok implementuje mechanizmus výpadky*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 35px; width:100% ; box-sizing:border-box; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li ul li a: hover( pozadie: #FDDC96; farba:#6572BC; )

Tento príklad sa od prvého líši aj tým, že rozbaľovacia ponuka, samotná rozbaľovacia ponuka, sa rozťahuje v závislosti od šírky všetkých položiek ponuky.

Pri veľmi dlhých položkách ponuky nemusí byť táto možnosť veľmi vhodná, pretože presahujú limity. Ak chcete túto vlastnosť zakázať, nájdite vlastnosť „white-space:nowrap;“ na voliči #menu1 ul li ul a odstráňte ho.

Nižšie si môžete pozrieť ukážku alebo stiahnuť zdroje horizontálneho rozbaľovacieho menu:

Bez oddeľovačov toto menu vyzerá tak-tak. Oddeľovače je možné pridať do HTML manuálne, ale ak máte CMS, ako je WordPress, potom ich manuálne pridávanie nie je príliš pohodlné.

Horizontálne rozbaľovacie menu s oddeľovačmi

Existuje niekoľko desiatok možností na pridanie pruhu (oddeľovača) medzi položky ponuky pomocou čistého CSS. Nebudem duplikovať možnosti, ktoré používajú::before alebo::after , alebo oveľa jednoduchšie border-left, border-right.

Sú situácie, keď je rozloženie zostavené tak úžasne, že sa bez jquery nezaobídete.

Náš HTML kód zostáva rovnaký, akurát na začiatok zahrnieme knižnicu jQuery a súbor, ktorý ju používa:

Hneď po .

Ako viete, musíte vytvoriť súbor script-menu-3.js a pridajte tam tento malý kód:

$(document).ready(function())( $("#menu1 > ul > li:not(:last-child)").after(" "); ));

CSS štýly pre takéto menu by mali zostať tak, ako sú, + pridajte tento kúsok na koniec:

#menu1 ul li.razd( výška:28px; šírka:1px; pozadie:#ffffff; margin-top:4px; )

Horizontálna rozbaľovacia ponuka s oddeľovačmi v jQuery bude vyzerať takto:

Nižšie si môžete prezerať v demo režime alebo si stiahnuť šablónu horizontálnej ponuky:

Výhody tohto riešenia sú:

ponuka sa bude vykresľovať dynamicky;
zarážky od oddeľovača po odsek sú všade rovnaké;
krajší a flexibilnejší dizajn.

Horizontálna viacúrovňová rozbaľovacia ponuka CSS+HTML

Keďže hovoríme o viacúrovňových rozbaľovacích ponukách pri umiestnení kurzora myši, pravdepodobne sa oplatí rozdeliť ich do podskupín:

s vip podložkou pri ukazovaní na stranu

s vyskakovacím rozbaľovacím zoznamom tretej úrovne

V mojich príkladoch ukážem viacúrovňové CSS menu s 3 úrovňami, potom si myslím, že nebude ťažké uhádnuť, čo treba urobiť.

Viacúrovňová rozbaľovacia ponuka s bočným panelom umiestnením kurzora myši

Najprv musíme trochu upraviť náš HTML. Pre úroveň 3 sa tam pridá niekoľko riadkov:

Domov
O nás
Naše služby
- Naša služba č.1
  - Doplnok k službe 1
  - Doplnok k službe 2
- Naša služba č.2
  - Doplnok k službe 3
  - Doplnok k službe 4
- Naša služba č.3
- Naša služba č.4
- Služba 5
Správy
Kontakty
- Cestovná mapa
  - Mapový doplnok
  - Dodatok k mape 2
- Forma spätnej väzby

#container( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( zarovnanie textu: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( position :relative; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; ) #menu1 ul li.razd( height:28px; width:1px; background:#ffffff; margin-top:4px; ) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans-serif; color:#ffffef; line-height:1.3 em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a ( pozadie:#EBBD5B; farba:#2B45E0; ) #menu1 ul li ul( pozícia:absolútne; hore:36px; vľavo:0px; zobrazenie:žiadne; šírka:auto; pozadie:#EBBD5B; white-space:nowrap; ) #menu1 > ul > li:posledné dieťa > ul(/*posledná položka bude pripojená k pravému okraju*/ left:auto; right:0px; ) #menu1 ul li:hover > ul(display:block;)/*tento riadok implementuje mechanizmus vynechania* / #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box -sizing:border-box ; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( pozadie:#FDDC96; farba:#6572BC; ) #menu1 ul li ul li ul( hore:0px; vľavo:100%; display:none; background:#fddc96; ) #menu1 > ul > li:posledné dieťa > ul ul(vľavo:auto; vpravo:100%;) #menu1 ul li ul li ul a(farba:#F38A01;)

Skopírujeme súbory pre jQuery tak, ako boli z predchádzajúceho príkladu. Rozdeľovače som sa rozhodol ponechať, aby jedálniček vyzeral aspoň trochu lepšie. Samozrejme, že to zvládnete aj bez nich.

Stalo sa to takto:
Urobil som 2 skiny v jednom, aby som ukázal, ako kvapka vyzerá vpravo a v strede.

Nižšie si môžete pozrieť ukážku a stiahnuť príklad:

Viacúrovňová rozbaľovacia ponuka s vyskakovacím panelom pri umiestnení kurzora myši

V názve je trochu oleja, ale pôjde to, hlavná vec je kód.

Podstatou tohto príkladu je vytvorenie horizontálneho rozbaľovacieho menu na celú šírku s rozbaľovacím zoznamom na celú šírku + viacúrovňové.

HTML kód meniť nebudem, dá sa vziať z predchádzajúceho príkladu. V jQuery ponechávame aj oddeľovače.

Úplne sa zmení iba CSS:

#container( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( zarovnanie textu: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( position :relative; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; ) #menu1 > ul > li(position:static;) #menu1 ul li.razd( height :28px; width:1px; background:#ffffff; margin-top:4px; ) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans- serif; color:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; farba:#2B45E0; ) #menu1 ul li ul( pozícia:absolútne; hore:36px; vľavo:0px; zobrazenie:žiadne; šírka:100%; pozadie:#EBBD5B; ) #menu1 > ul > li > ul::after( clear:both; float:none; width:100%; height:0px; content:" "; ) #menu1 ul li:hover > ul(display:block;)/*tento riadok implementuje mechanizmus vynechania*/ #menu1 ul li ul li( display :block; width:30%; float:left; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box- sizing:border -box; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( background: #FDDC96; farba:#6572BC; ) #menu1 ul li ul li ul( hore:0px; vľavo:100%; displej:žiadne; pozadie:#fddc96; z-index:15; ) #menu1 ul li ul li ul li (display: block; float:none; width:100%;) #menu1 ul li ul li ul a( color:#F38A01; border-top:1px solid #ffffff; )

Menu bude vyzerať takto: Jediným bodom je, že stránka musí mať dostatok miesta, pretože posledná položka vpravo nemá miesto na rozbaľovaciu ponuku. Tento problém sa dá vyriešiť pomocou:nth-child, ale neobťažoval som sa.

Pozrite si ukážku horizontálnej viacúrovňovej rozbaľovacej ponuky:

Ako ste si mohli všimnúť: spodná matrica má tiež celú šírku. Takto sa vyrábajú kvapky vo viacerých blokoch.

To je z mojej strany všetko, dúfam, že vám bude vyhovovať aspoň jeden z mojich príkladov. Ďakujem za tvoju pozornosť.

prospeje to im aj mne :)

Ak ste si prečítali celý príspevok, ale nenašli ste, ako vytvoriť vlastnú horizontálnu rozbaľovaciu ponuku v css, položte otázku v komentároch alebo použite vyhľadávanie na stránke.

Tiež vám odporúčam navštíviť nadradenú stránku https://site/vypadayushhee-menu/, kde sú zhromaždené všetky príklady a typy rozbaľovacích ponúk.

Horizontálne menu je zoznam sekcií webových stránok, takže je logickejšie umiestniť ho do prvku

V predvolenom nastavení sú všetky prvky zoznamu usporiadané vertikálne, pričom zaberajú celú šírku prvku kontajnera, ktorý zase zaberá celú šírku jeho bloku kontajnera.

HTML značky pre horizontálnu navigáciu

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

Horizontálne menu umiestnené vo vnútri tagu môže byť navyše umiestnené vo vnútri ... a/alebo ... elementu. Vďaka tomu má označenie html sémantický význam a tiež poskytuje ďalšiu príležitosť na formátovanie bloku ponuky.

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

Ul ( štýl zoznamu: žiadny; /*odstrániť značky zoznamu*/ okraj: 0; /*odstrániť horný a spodný okraj rovný 1 em*/ padding-left: 0; /*odstrániť ľavý výplň rovný 40px*/ ) a ( text-decoration: none; /*odstrániť podčiarknutie textu odkazu*/)

Vytváranie prvkov zoznamu malými písmenami. V dôsledku toho sú umiestnené horizontálne, pričom na pravej strane medzi nimi je pridaná medzera 0,4 em (vypočítaná vzhľadom na veľkosť písma). Ak ho chcete odstrániť, pridajte záporný pravý okraj pre li li (margin-right: -4px;) . Ďalej naštylizujeme odkazy, ako chceme.

Vytváranie plávajúcich prvkov zoznamu. V dôsledku toho sú umiestnené horizontálne. Výška kontajnerového bloku ul sa rovná nule. Na vyriešenie tohto problému pridávame (pretečenie: skryté;) k ul, čím ho predĺžime a umožníme mu tak obsahovať plávajúce prvky. V prípade odkazov pridajte (zobraziť: blok;) a upravte ich podľa potreby.

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

Vytvorenie zoznamu ul ako flexibilného kontajnera pomocou súboru . V dôsledku toho sú prvky zoznamu usporiadané horizontálne. Pre odkazy pridáme (zobrazenie: blok;) a upravíme ich podľa želania.

Pomerne bežné rozloženie ponuky lokality, keď kontajner s ňou zaberá celú šírku dostupnú na stránke. V tomto prípade je prvá položka priľahlá k ľavému okraju a posledná k pravej a vzdialenosť medzi všetkými prvkami je rovnaká. Dnes vám povieme, ako sa to robí.

Ponúkame vám príklad implementácie gumeného menu pomocou CSS pre váš zdroj. V tomto menu budú položky umiestnené na jednom riadku. Javascript sa nepoužije. Obsah menu bude uzavretý v bežnom zozname. Hlavnou črtou takéhoto menu je jeho všestrannosť, ktorá je vyjadrená tým, že počet aj dĺžka položiek môže byť ľubovoľná.

Každý programátor môže ponúknuť svoj vlastný spôsob riešenia daného problému. Všetko závisí od jeho fantázie, úrovne profesionality a schopností. Najbežnejším riešením tohto problému je použitie tabuľky. Mnohí by tiež navrhli použiť javascript. Ponáhľam sa sklamať tých, ktorí by navrhli použiť vlastnosť display s tabuľkou hodnôt alebo tabuľkovou bunkou. Táto metóda nie je dostatočne kompatibilná s rôznymi prehliadačmi.

Naša ponuka bude postavená na pevných základoch znalostí HTML5 a CSS3.

Podstata procesu je založená na vlastnosti text-align s hodnotou justify. Pre tých, ktorí zabudli, pripomínam: táto vlastnosť orientuje zarovnanie textu po celej šírke kontajnera.

Pri používaní nášho riešenia je potrebné dodržiavať dve povinné pravidlá. Prvým je, že šírka kontajnera položiek ponuky by mala byť menšia ako text. Teda nie v jednom riadku. Druhým dôležitým pravidlom je, že slová sa naťahujú rovnako, bez ohľadu na to, či patria do rovnakého bodu alebo nie.

Nižšie je uvedený kód, ktorý slúži ako príklad vytvorenia gumeného menu:

HTML

< ul> < li>< a href= "#" >Domov< li>< a href= "#" >Blog< li>< a href= "#" >Správy< li>< a href= "#" >Populárne< li>< a href= "#" >Nové položky

ul ( text-align: justify; overflow: hidden; /* eliminuje vedľajšie účinky metódy */ výška: 20px; /* eliminuje aj zbytočné */ kurzor: predvolený ; /* nastavuje počiatočný tvar kurzora */ margin : 50px 100px 0 100px; pozadie: #eee; padding: 5px; ) li ( display: inline; /* robí z položiek ponuky text */ ) li a ( display: inline- block; /* eliminuje lomy slov v ponuke */ farba: #444; ) a : hover ( color: #ff0000; ) ul: after ( /* tvoriaci druhý riadok na vypracovanie metódy */ obsah: "1" ; okraj- vľavo: 100 %; výška: 1px; pretečenie: skryté; zobrazenie: vložený blok; )

Ak chcete pracovať v starom dobrom Internet Exploreri, musíte do CSS dodatočne pridať nasledujúci kód

ul ( z- index: expression(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" >")); ) ul .last ( ľavý okraj: 100 %; ) * html ul ( /* stačí iba ie6 */ výška: 30px; )

Po zadaní potrebných hodnôt vlastností a kódu dostaneme toto gumené menu:

Kód objemu
Neschopnosť určiť aktívny stav prvku prostredníctvom selektora triedy. K tomu dochádza v dôsledku prerušenia slov v odsekoch (ak existuje). Riešením tohto problému je pridať ďalší kontajner do prvkov zoznamu.
Pre rozbaľovaciu ponuku je potrebné prispôsobiť kód kvôli negatívnemu vplyvu pretečenia .


6.0+	6.0+	10.5+	5.0+	3.6+	-	-

Tuleň

Tiež zaujímavé:

Národná univerzita Ivana Franka Ľvov (LNU): prijatie, fakulty a recenzie

Výberový predmet „Olympijská informatika

Stiahnite si Battleship pre Android v

Odporúčame prečítať:

2023-11-29 00:09:13

C získa hlavné argumenty z funkcie

2023-11-29 00:09:13

Odvodenie výrazu pre obežnú dobu planetárneho satelitu

2023-11-29 00:09:13

Informačná bezpečnosť automatizovaných systémov Kto je špecialista na informačnú bezpečnosť

Pokračovanie v téme:

internet

Prezentácia geoinformačnej metódy

Konovalová N.V., Kapralov E.G. Úvod do GIS. –M.: LLC „Biblia“, s. De Mers M., Geografické informačné systémy. M.: „Údaje+“, Korolev Yu.K. Všeobecná geoinformatika. -M.:...