Ahoj. Dlho som nepísal príspevky na tému ako funguje html / css. Nedávno som začal vymýšľať nové rozloženie a pri tom som narazil na zaujímavý trik, ktorý umožňuje urobiť menu gumené (môžete doň pridávať nové položky a veľkosť sa nezväčší, ale vždy bude 100 % z rodičovského bloku). Takže dnes implementujeme gumené menu na css.

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

Menu CSS Fluid 1. krok

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

  1. blok obalu ponuky
  2. samotné menu, zobrazené cez odrážkový zoznam(značka ul)
  3. položky ponuky vnútri a v nich už existujú odkazy

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



Všetko vyzerá štandardne, takto:

Teraz všetko uvedieme 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 aby bolo pohodlné urobiť screenshot tak, aby menu sedelo) a blok aj vycentrujem.

zabaliť(
pozadie: #fff;
maximálna šírka: 600 pixelov
okraj: 0 auto;
}

Krok 3 - implementujte gumovosť

Teraz preberieme samotné menu. Odstránim z neho značky (z tagu ul), urobím pozadie lineárnym gradientom a hlavne s vlastnosťou display: table-row spôsobím, že sa kontajner pre menu bude správať ako riadok tabuľky. To je dôležité pre ďalšie manipulácie.

R-menu(
pozadie: linear-gradient(doprava, #b0d4e3 0%,#88bacf 100%);
display:table-row;
š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. Niekedy o tom napíšem.

R-menu li(
vertikálne zarovnať: dole;
display:table-cell;
ší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 menu zabral 2 riadky, zobrazil sa presne. Keď vytvoríme menu, môžete túto vlastnosť odstrániť, priblížiť, aby sa položky zmenšili a text sa zalomil cez 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 slúži len na zarovnanie textu vo vnútri na stred
  • výška: 50 pixelov - nastavte výšku na 50 pixelov
  • no, border-right je len hranica vpravo, taký oddeľovač položiek

Menu síce vyzerá nevkusne, ale to je v poriadku, je čas si to pripomenúť.

Posledná vec, ktorú musíte urobiť, je upraviť odkazy vo vnútri odsekov. Tu mám tento kód:

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

A takto vyzerá menu teraz:

Ešte raz vysvetlím pár riadkov:

  • vlastnosť text-decoration odstraňuje predvolené podčiarknutie z odkazov
  • šírka: 1000px je možno najdôležitejší riadok. Odkazy musíte nastaviť na približne rovnakú šírku, možno menej, ale vždy viac ako najširšia položka ponuky. Odkazy nebudú široké 1000 pixelov, pretože šírka bude obmedzená položkou ponuky li, ktorá má šírku nastavenú na auto, ale urobí to tak, že pre ľubovoľný počet položiek v ponuke bude vždy 100 percent široké.
  • vertical-align: middle a display: table-cell - prvá zarovná text vertikálne na stred a druhá tiež zobrazí odkazy ako bunky. Obe vlastnosti sú povinné.
  • font - no, je to len sada nastavení pre font. Čítať o vlastnosti css pre písma v tomto článku.

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

Ak chcete napríklad zmeniť farbu položky ponuky pri umiestnení kurzora myši. Toto sa implementuje celkom jednoducho pomocou pseudotriedy hover:

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

Testovanie menu na gumovitosť

Super, jedálničky sú hotové, ale to najdôležitejšie - aké je to gumové, ako som vám sľúbil, sme si neskontrolovali. No, pridám do menu ďalšie 2 položky:

Ponuka zostáva široká 600 pixelov. Ostatné položky sa len trochu zmenšia, aby sa zmestili 2 nové.

Pridám ešte jeden dlhý odsek:

Ako vidíte, menu sa ešte trochu scvrklo a dlhá položka sa zobrazovala ú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 platí, že ak ovinovací blok nenastavíte na pevnú, ale na maximálnu šírku, tak ho ani netreba prispôsobovať. V mojom prípade mám vlastnosť max-width: 600px a keď bude šírka menšia ako 600px, blok sa jednoducho zmenší po obrazovke bez vytvorenia vodorovného rolovania.

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

Pokračujeme v sérii lekciou o rozbaľovacích ponukách. Ďalším v poradí je horizontálne rozbaľovacie menu „urob si sám“ v 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:

robiť horizontálne menu s rozbaľovacím zoznamom css (na zoznamoch ul li) bez pomocou jQuery a Javascript, ako aj bez použitia tabuliek

v kóde.

html horizontálne rozbaľovacie menu

Po prvé, skôr ako začneme písať kód, musíme to urobiť html šablóna 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:

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

Povedzme, že to vyzerá škaredo, ako obyčajný zoznam. Ďalej musíme túto ponuku ozdobiť štýlmi CSS.

Horizontálna rozbaľovacia ponuka CSS

CSS štýly pre rozbaľovacie ponuky a ďalšie sú nevyhnutnosťou. Koniec koncov, rozbaľovacia karta je vytvorená na základe pseudotriedy:hover.

Pre horizontálnu 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ľovaciu ponuku:

#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 %; veľkosť boxu: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; )

Teraz je to všetko. Samotný rozbaľovací mechanizmus je implementovaný v jednom riadku.

Pozrite si vzhľad pomocou tohto menu:

Ryža. 2 (horizontálne rozbaľovacie menu)

Nižšie je ukážka fungovania roletového menu, ako aj odkaz na stiahnutie zdrojového kódu. (Ukážka sa otvorí v rozbaľovacej ponuke na tejto stránke, netreba klikať na Otvoriť v novom okne 🙂 alebo použiť koliesko 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ú pozdravy z minulosti a čiastočne máte pravdu, aj keď som sa stretol s čerstvými rozloženiami s takýmito menu.

Dúfam, že ste si stiahli vyššie uvedený príklad. Html u nás 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 vidieť, ako to funguje v demo režime.

#conteiner( 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 ukotvená vpravo*/ left:auto; right:0px; ) #menu1 ul li:hover ul(display:block;)/*tento riadok implementuje výpadky mechanizmu*/ #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 % ; veľkosť poľa: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 tiež líši od prvého v tom, ž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 výhodná, pretože vyliezajú za hranice. Ak chcete túto vlastnosť zakázať, vyhľadajte vlastnosť „white-space: nowrap;“ selektor #menu1 ul li ul a odstráňte ho.

Nižšie si môžete pozrieť ukážku alebo stiahnuť zdroj horizontálnej rozbaľovacej ponuky:

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 manuálne pridávanie nie je príliš pohodlné.

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

Možností sú desiatky čistý CSS pridajte pásik (oddeľovač) medzi položky ponuky. Možnosti, ktoré používajú::before alebo::after , alebo oveľa jednoduchšie border-left, border-right, nebudem duplikovať.

Sú situácie, keď je layout zostavený tak úžasne, že jquery je nepostrádateľný.

Náš Html kód zostáva rovnaký, na úplnom začiatku obsahuje iba knižnicu jQuery a súbor, ktorý ju používa:

Hneď po.

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

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

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

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

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

Nižšie si môžete pozrieť ukážku alebo stiahnuť šablónu horizontálnej ponuky:

Výhody takéhoto riešenia sú:

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

CSS+HTML Horizontálna vrstvená rozbaľovacia ponuka

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:

  1. s vipadashkou pri ukazovaní na stranu
  2. s vyskakovacím výpadom tretej úrovne

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

Viacúrovňová rozbaľovacia ponuka s vipadom na stranu pri umiestnení kurzora myši

Na začiatok musíme trochu poopraviť naše html. Pridá sa tam pár riadkov pre úroveň 3:

#conteiner( 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 ukotvená vpravo*/ left:auto; right:0px; ) #menu1 ul li:hover > ul(display:block;)/*tento riadok implementuje mechanizmus vypadávania*/ #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: podržte kurzor > a( pozadie:#FDDC96; farba:#6572BC; ) #menu1 ul li ul li ul( hore:0px; vľavo:100%; displej:žiadne; pozadie:#fddc96; ) #menu1 > ul > li:posledný -dieťa > ul ul(vľavo:auto; vpravo:100%;) #menu1 ul li ul li ul a(farba:#F38A01;)

Súbory pre jQuery sa skopírujú tak, ako boli z predchádzajúceho príkladu. Rozhodla som sa, že oddeľovače nechám, aby jedálny lístok vyzeral aspoň trochu lepšie. Dá sa to samozrejme aj bez nich.

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

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

Vrstvená rozbaľovacia ponuka s rozbaľovacou ponukou pri umiestnení kurzora myši

V názve sa objavilo trochu oleja, ale bude to fungovať, hlavná vec je kód.

Podstatou tohto príkladu je vytvoriť horizontálne rozbaľovacie menu na celú šírku s rozbaľovacím zoznamom na celú šírku + viacúrovňové.

HTML kód meniť nebudem, dá sa prebrať z predchádzajúceho príkladu. Oddeľovače na jQuery sú tiež ponechané.

Úplne sa zmení iba CSS:

#conteiner( 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: vznášať sa, #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 vypadávania*/ #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 ul ul li:hover > a( background:#FDDC96 ; farba:#6572BC; ) #menu1 ul li ul li ul( hore:0px; vľavo:100%; zobrazenie:žiadne; pozadie:#fddc96; z-index:15; ) #menu1 ul li ul li ul li(zobrazenie : 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 by mala mať dostatok miesta, pretože posledná položka vpravo nemá priestor na vypadnutie. Tento problém sa dá vyriešiť cez: n-té dieťa, ale neoplotila som záhradu.

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

Ako ste si mohli všimnúť: spodná doska má tiež celú šírku. Takto sa robia výpady 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ť rodičovskú stránku https://website/vypadayushhee-menu/, sú zhromaždené všetky príklady a odrody rozbaľovacích ponúk.

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 ukážeme, ako sa to robí.

Ponúkame vám príklad realizácie gumového menu kedy Pomocník CSS pre váš zdroj. V tomto menu budú položky umiestnené v jednom riadku. Javascript sa nepoužije. Obsah menu bude zabalený do bežného zoznamu. 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á.

Ako to zrealizovať?

Každý programátor môže ponúknuť svoj vlastný spôsob riešenia 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ž navrhovali použiť javascript. Tí, ktorí by navrhli použiť vlastnosť display s hodnotou tabuľky alebo bunka tabuľky- Ponáhľam sa rozčúliť. Táto metóda nemá dostatočnú kompatibilitu medzi prehliadačmi.

Naše riešenie

Náš návrh bude postavený na pevných základoch znalostí HTML5 a CSS3.

Podstata procesu je založená na vlastnosť zarovnania textu s hodnotou zdôvodniť. Pre tých, ktorí zabudli - pripomínam: táto vlastnosť orientuje zarovnanie textu na celú šírku kontajnera.

Pri používaní nášho riešenia je potrebné dodržiavať dve povinné pravidlá. Prvým je, že šírka kontajnera položky ponuky musí 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 odseku alebo nie.

Nižšie je uvedený kód, ktorý slúži ako príklad vytvorenia „gumové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ý

ul (zarovnanie textu: zarovnanie; pretečenie: skryté; /* odstrániť vedľajší efekt metódy */ výška: 20px; /* tiež odstraňuje zbytočné */ kurzor: predvolene ; /* nastaví počiatočný tvar kurzora */ okraj: 50px 100px 0 100px; pozadie: #eee; výplň: 5px ) li ( zobrazenie: inline; /* urobiť z položiek menu text */) li a ( zobrazenie: inline-block; /* odstráni zlomy slov v ponuke */ farba: #444; ) a: hover ( farba: #ff0000; ) ul: po ( /* tvorí druhý riadok na vypracovanie metódy */ obsah: "1" ; ľavý okraj: 100 %; výška: 1px; prepad: skrytý; displej: inline-block; )

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

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 zaregistrovaní potrebných hodnôt vlastností a kódu dostaneme nasledujúce gumené menu:

Nevýhody metódy

  1. Kód objemu
  2. Nemožnosť určiť aktívny stav prvku prostredníctvom selektora triedy. Dôvodom sú zlomy slov v odsekoch (ak nejaké sú). Riešením tohto problému je pridať ďalší kontajner do položiek zoznamu.
  3. Pre rozbaľovaciu ponuku je potrebné prispôsobiť kód kvôli negatívnemu vplyvu pretečenia .

Na akých prehliadačoch to funguje?

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

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

    a potom aplikujte štýly CSS na jeho prvky. Toto usporiadanie menu je najbežnejšie kvôli zjavným výhodám v jeho umiestnení na webovej stránke.

    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

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

    a/alebo
    ...
    . Vďaka tomuto html značeniu je daný sémantický význam a tiež sa objavuje dodatočná 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 ( 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

    @import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main ( list-style: none; margin: 40px 0 5px; padding: 25px 0 5px; text-align: center; background: white; ) .menu-main li (display: inline-block;) .menu- main li:after ( content: "|"; color: #606060; display: inline-block; vertical-align:top; ) .menu-main li:last-child:after (content: none;) .menu-main a ( text-decoration: none; font-family: "Ubuntu Condensed", bezpätkové; medzery medzi písmenami: 2px; pozícia: relatívna; padding-bottom: 20px; margin: 0 34px 0 30px; veľkosť písma: 17px; text-transform: veľké písmená; displej: inline-block; prechod: farba .2s; ) .menu-main a, .menu-main a:visited (color: #9d999d;) .menu-main a.current, .menu- main a:hover(color: #feb386;) .menu-main a:before, .menu-main a:after ( content: ""; position: absolute; height: 4px; top: auto; right: 50%; bottom : -5px; vľavo: 50 %; pozadie: #feb386; prechod: .8s; ) .menu-main a:hover:before, .menu-main .current:before (vľavo: 0;) .menu-main a: hover:after, .menu-main .current:after (vpravo: 0; ) @media (max-width: 550px) ( .menu-main (padding-top: 0;) .menu-main li (display: block;) .menu-main li:after (content: none;) .menu- hlavné a ( odsadenie: 25px 0 20px; okraj: 030px; ))

    2. Responzívne menu pre svadobný web

    @import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu ( pozícia: relatívna; pozadie: #fff; box-shadow: inset 0 0 10px #ccc; ) .top-menu:before, .top-menu:after ( content: ""; display: block; height : 1px; border-top: 3px solid #575350; border-bottom: 1px solid #575350; margin-bottom: 2px; ).top-menu:after ( border-bottom: 3px solid #575350; border-top: 1px solid #575350; box-shadow: 0 2px 7px #ccc; margin-top: 2px; ) .menu-main ( list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: stred; pozícia: relatívna; ) .hlavná ponuka:pred, .hlavná ponuka:po ( obsah: "\25C8"; výška riadku: 1; pozícia: absolútna; hore: 50 %; transformácia: preložiťY(-50 % ); ) .menu-main:before (vľavo: 15px;) .menu-main:after (vpravo: 15px;) .menu-main li ( display: inline-block; padding: 5px 0; ) .menu-main a ( text-decoration: none; display: inline-block; margin: 2px 5px; padding: 6px 15px; font-family: "PT Sans", sans-serif; font-size: 16px; color: #777777; border-bottom : 1px pevná priehľadnosť n: 0,3 s lineárny; ) .menu-main .current, .menu-main a:hover ( border-radius: 3px; background: #f3ece1; color: #313131; text-shadow: 0 1px 0 #fff; border-color: #c6c6c6; ) @media (max-width: 500px) ( .menu-main li (display: block;) )

    3. Citlivé menu s hrebenatkami

    @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main ( list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relativní; background: white; ) .menu-main:after ( content: ""; pozícia: absolútna; šírka: 100%; výška: 20px; vľavo: 0; spodok: -20px; pozadie: radiálny prechod (biela 0%, biela 70%, rgba(255,255,255,0) 70%, rgba( 255,255,255,0) 100%) 0 -10px; background-size: 20px 20px; background-repeat: repeat-x; ) .menu-main li (display: inline-block;) .menu-main a ( text-decoration: žiadne; zobrazenie: inline-block; margin: 0 15px; padding: 10px 30px; font-family: "PT Sans Caption", bezpätkové; farba: #777777; prechod: .3s lineárny; poloha: relatívna; ) .menu -main a:before, .menu-main a:after ( content: ""; position: absolute; top: calc(50% – 3px); width: 6px; height: 6px; border-radius: 50%; background: . current:before, .menu-main a.cur rent:after, .menu-main a:hover:before, .menu-main a:hover:after (nepriehľadnosť: 1;) .menu-main a.current, .menu-main a:hover (farba: #F58262; ) @media(max-width:680px) ( .menu-main li (display: block;) )

    4. Responzívna ponuka s nástrojmi

    @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu ( margin: 0 60px; position: relativní; background: #5A394E; box-shadow: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1), inset 150px 0 150px -150px rgba(255,255,255,.12), vložka -150px 0 150px -150px rgba(255,255,255,.12); ) ; z-index: 2; vľavo: 0; šírka: 100 %; top-menu:before ( top: 0; border-bottom: 1px dashed rgba(255,255,255,.2); ) .top- menu:after ( bottom: 0; border-top: 1px dashed rgba(255,255,255,.2); ) .menu-main ( list-style: none; padding: 0; margin: 0; text-align: center; ) .menu-main:before, .menu-main:after ( content: ""; position: absolute; šírka: 50px; výška: 0; hore: 8px; border-top: 18px solid #5A394E; border-bottom: 18px solid # 5A394E; transform: rotation(360deg); z-index: -1; ) .menu-main: pred ( left: -30px; border-left: 12px solid rgba(255, 255, 255, 0); ) .menu- main:after ( right: -30px; border-right: 12px solid rgba(2) 55, 255, 255, 0); ) .menu-main li ( display: inline-block; margin-right: -4px; ) .menu-main a (text-decoration: none; display: inline-block; padding: 15px 30px; font-family: "PT Sans Caption", bezpätkové; farba: biela; prechod: .3s lineárny; ) .menu-main a.current, .menu-main a:hover (pozadie: rgba(0,0,0,.2);) @media (max-width: 680px) ( .top-menu (margin: 0;) .menu-main li ( display: block; margin-right: 0; ) .menu-main:before, .menu-main:after (obsah: žiadny;) .menu-main a (zobrazenie: blok;) )

    5. Responzívne menu s logom v strede

    @import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( pozícia: relatívna; pozadie: rgba(34,34,34,.2); ) .menu-main ( list-style: none; margin: 0; padding: 0; ) .menu-main:after ( content: ""; display: table; clear: both; ) .left-item (float: left;) .right-item (float: right;) .navbar-logo ( position: absolute; left: 50%; top : 50%; transform: translate(-50%,-50%); ) .menu-main a (text-decoration: none; display: block; line-height: 80px; padding: 0 20px; font-size: 18px ; medzery medzi písmenami: 2px; font-family: "Arimo", bezpätkové; váha písma: tučné; farba: biela; prechod: .3s lineárny; ) .menu-main a:hover (pozadie: rgba(0, 0,0,.3);) @media (max-width: 830px) ( .menu-main ( padding-top: 90px; text-align: center; ) .navbar-logo (position: absolute; left: 50% ;top: 10px; transform: translateX(-50%); ) .menu-main li ( float: none; display: inline-block; ) .menu-main a (line-height: normal; padding: 20px 15px; font -size: 16px; ) ) @media (max-width: 630px) ( .menu-main li (display: block;) )

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

    @import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( background: rgba(255,255,255,.5); box-shadow: 3px 0 7px rgba(0,0,0,.3); padding: 20px; ) .top-menu:after ( content: "" ;display: table; clear: both; ) .navbar-logo (display: inline-block;) .menu-main ( list-style: none; margin: 0; padding: 0; float: right; ) .menu-main li (display: inline-block;) .menu-main a ( text-decoration: none; display: block; position: relatívna; line-height: 61px; padding-left: 20px; font-size: 18px; letter-spacing : 2px; font-family: "Arimo", bezpätkové; font-weight: bold; color: #F73E24; transition:.3s linear; ) .menu-main a:before ( content: ""; width: 9px; výška: 9px; pozadie: #F73E24; pozícia: absolútna; vľavo: 50 %; transformácia: otočiť (45 stupňov) preložiťX(6,5px); nepriehľadnosť: 0; prechod: 0,3s lineárny; ) .menu-main a:hover:before (opacity: 1;) @media (max-width: 660px) ( .menu-main ( float: none; padding-top: 20px; ) .top-menu ( text-align: center; padding: 20px 0 0 0; ) .menu-main a (výplň: 0 10px;) .menu-main a:be vpredu (transformácia: otočiť(45°) preložiťX(-6px);) ) @media (maximálna šírka: 600px) ( .menu-main li (zobrazenie: blok;) )