Ahoj. Dlouho jsem nepsal příspěvky na téma, jak funguje html / css. Nedávno jsem začal vymýšlet nový layout a při tom jsem narazil na zajímavý trik, který umožňuje udělat menu gumové (můžete do něj přidávat nové položky a velikost se nezvětší, ale vždy bude 100 % nadřazeného bloku). Takže dnes implementujeme gumové menu na css.

Pokud jste příliš líní číst článek, můžete se podívat na toto video. Autor také vše velmi pěkně vysvětluje:

CSS Fluid Menu Krok 1

Prvním krokem je vždy html značení, kde bez něj. Ale v našem případě bude vše jednoduché:

  1. blok obalu nabídky
  2. samotné menu zobrazené prostřednictvím seznam s odrážkami(značka ul)
  3. dobře, položky nabídky uvnitř a v nich již jsou odkazy

Vše je jasné, zde je můj značkovací kód:



Vše vypadá standardně, takto:

Nyní vše převedeme do požadované podoby, CSS se pustí do práce.

Krok 2 – Základní styly

Dále přidám styly do bloku obalu. Totiž nastavím maximální šířku na 600 pixelů (to jen aby bylo pohodlné udělat screenshot, aby sedělo menu) a blok také vycentruji.

zabalit(
pozadí: #fff;
maximální šířka: 600 pixelů
okraj: 0 auto;
}

Krok 3 - implementujte gumovost

Nyní se pustíme do samotného menu. Odstraním z něj značky (z tagu ul), udělám pozadí lineární gradient a hlavně s vlastností display: table-row zajistím, že se kontejner pro menu bude chovat jako řádek tabulky. To je důležité pro další manipulace.

R-menu(
pozadí: linear-gradient(doprava, #b0d4e3 0%,#88bacf 100%);
display:table-row;
styl seznamu: žádný;
}

Jak vidíte, výše uvedený kód právě vyřešil vše, o čem jsem psal. Mimochodem, je vhodné generovat přechody pomocí nástroje Ultimate CSS Gradient generator. Někdy o tom napíšu.

R-menu li(
svisle zarovnat: dole;
display:table-cell;
šířka: auto;
text-align: center;
výška: 50px;
border-right: 1px solid #222;
}

  • vertical-align: bottom - tato vlastnost je nutná, aby pokud text v položce menu zabral 2 řádky, zobrazil se přesně. Když uděláme nabídku, můžete tuto vlastnost odstranit, přiblížit, aby se položky zmenšily a text se zalomil přes dva řádky a uvidíte problém se zobrazením. Vraťte nemovitost a vše bude v pořádku.
  • display: table-cell - jelikož samotné menu zobrazení nastavujeme na řádek tabulky, bylo by logické nastavit jeho položky tak, aby se zobrazovaly jako buňky v tabulce. Je to nutné.
  • šířka: auto - šířka se vypočítá automaticky v závislosti na délce textu v odstavci
  • text-align: center je pouze pro zarovnání textu uvnitř na střed
  • výška: 50 pixelů - nastavte výšku na 50 pixelů
  • no, border-right je jen hranice napravo, takový oddělovač položek

Nabídka sice vypadá nevzhledně, ale to je v pořádku, je čas si to připomenout.

Poslední věcí, kterou musíte udělat, je stylizovat odkazy uvnitř odstavců. Tady mám tento kód:

R-menu li a(
text-dekorace: žádná;
šířka: 1000px
výška: 50px;
vertikální zarovnat: střed;
display:table-cell;
barva: #fff;
písmo: normální 14px Verdana;
}

A takto nyní vypadá menu:

Opět vysvětlím některé řádky:

  • vlastnost text-decoration odstraní z odkazů výchozí podtržení
  • width: 1000px je možná nejdůležitější řádek. Odkazy je potřeba nastavit na přibližně stejnou šířku, možná méně, ale vždy více než nejširší položku nabídky. Odkazy nebudou široké 1000px, protože šířka bude omezena položkou nabídky li, která má šířku nastavenou na auto, ale udělá to tak, že bez ohledu na to, kolik položek v nabídce bude, bude vždy 100 procent široký.
  • vertical-align: middle a display: table-cell - první zarovná text svisle na střed a druhé také zobrazí odkazy jako buňky. Obě vlastnosti jsou povinné.
  • font - no, je to jen sada nastavení pro font. Číst o vlastnosti css pro písma v tomto článku.

Krok 4 (volitelné) můžete přidat interaktivitu

Chcete-li například změnit barvu položky nabídky při najetí myší. To je implementováno docela jednoduše pomocí pseudotřídy hover:

R-menu li:hover(
barva pozadí: #6bba70;
}

Testování menu na gumovost

Paráda, jídelníčky jsou hotové, ale nezkontrolovali jsme to nejdůležitější - jak je to gumové, jak jsem vám slíbil. No, přidám do nabídky další 2 položky:

Nabídka zůstává široká 600 pixelů. Zbytek položek se jen trochu zmenší, aby se vešly 2 nové.

Přidám ještě jeden dlouhý odstavec:

Jak je vidět, nabídka se o něco více zmenšila a dlouhá položka se zobrazovala zcela normálně. A nebýt vlastnosti vertical-align: bottom, o které jsem vám říkal, nabídka by vypadala hůř.

Menu zredukuji na tři položky.

Položky se staly mnohem volnějšími, ale samotné menu se do šířky nezměnilo. Tak jsme udělali 100% gumové menu!

Jak to přizpůsobit?

V zásadě platí, že pokud zavinovací blok nenastavíte na pevnou, ale na maximální šířku, tak se ani nemusí přizpůsobovat. V mém případě mám vlastnost max-width: 600px, a když bude šířka menší než 600px, blok se jednoduše zmenší po obrazovce, aniž by se vytvořil vodorovný posuvník.

No, pokud chcete nějak změnit nebo opravit jídelníček na mobilní zařízení nebo širokoúhlé obrazovky, pak vám pomohou dotazy na média! Hodně štěstí při tvorbě webových stránek!

Pokračujeme v sérii lekcí o rozbalovacích nabídkách. Další na řadě je horizontální rozbalovací nabídka kutilů v css.

Pokud jste se sem dostali náhodou nebo jste hledali jinou implementaci rozbalovací nabídky, doporučuji přejít do nadřazené sekce.

Tato část popisuje horizontální rozevírací nabídku v CSS a HTML.

Navigace na stránce:

Tak, náš úkol:

dělat horizontální menu s rozevíracím seznamem css (na seznamech ul li) bez pomocí jQuery a Javascript, stejně jako bez použití tabulek

v kódu.

html horizontální rozbalovací nabídka

Za prvé, než začneme psát kód, musíme to udělat html šablona pro menu.

Vzhledem k tomu, že děláme univerzální menu, chci, aby se co nejvíce podobalo výstupu WordPress menu. Podle mého názoru je to jeden z nejjednodušších a nejuniverzálnějších kódů Html menu. Vypadá to takto:

Jak můžete vidět z kódu, naše rozbalovací nabídka bude implementována do seznamů ul a li. Takto vypadá nabídka bez CSS stylů:

Řekněme, že to vypadá ošklivě, jako běžný seznam. Dále musíme toto menu ozdobit CSS styly.

Horizontální rozevírací nabídka CSS

Styly CSS pro rozbalovací nabídky a další jsou nutností. Koneckonců, rozbalovací karta je vytvořena na základě pseudotřídy:hover.

Pro horizontální rozevírací nabídku potřebujeme následující styly:

#menu1( pozice:relativní; zobrazení:blok; šířka:100 %; výška:auto; z-index:10; ) #menu1 ul( pozice:relativní; zobrazení:blok; okraj:0px; odsazení:0px; šířka:100 %; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul::after( display:block; width:100%; height:0px; clear:both; content:" "; ) # menu1 ul li( pozice:relativní; zobrazení:blok; float:left; width:auto; height:auto; ) #menu1 ul li a( display:block; padding:9px 25px 0px 25px; font-size:14px; font- rodina:Arial, sans-serif; barva:#ffffef; výška řádku:1,3em; zdobení textu:žádné; váha písma:tučné; transformace textu:velká písmena; výška:36px; velikost rámečku:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( pozadí:#EBBD5B; barva:#2B45E0; )

Toto ještě není konec, jen část CSS pro hlavní horizontální menu. Dále napíšeme styly pro rozevírací nabídku:

#menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:200px; background:#EBBD5B; ) #menu1 ul li:hover ul(display:block;)/*tento řádek implementuje mechanismus dropout*/ #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:hover( pozadí:#FDDC96; barva:#6572BC; )

To je vše. Samotný rozevírací mechanismus je implementován v jednom řádku.

Podívejte se na vzhled pomocí této nabídky:

Rýže. 2 (horizontální rozbalovací nabídka)

Níže je ukázka fungování rozbalovací nabídky a také odkaz na stažení zdrojového kódu. (Ukázka se otevře v rozevíracím seznamu na této stránce, není třeba klikat na tlačítko Otevřít v novém okně 🙂 nebo použít kolečko myši)

Horizontální rozbalovací nabídka po celé šířce

Většina z vás mi může vyčítat, že taková menu, jak jsem ukázal výše, jsou pozdravy z minulosti a částečně máte pravdu, i když jsem se setkal s čerstvými rozvrženími s takovými menu.

Doufám, že jste si stáhli výše uvedený příklad. Html u nás zůstává stejné, ale úplně změníme CSS. Zde můžete jednoduše vzít kód CSS a vložit jej do staženého příkladu nebo se podívat, jak to funguje v demo režimu.

#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( zarovnání textu: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( pozice :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:žádný; šířka:auto; pozadí:#EBBD5B; white-space:nowrap; ) #menu1 ul li:last-child ul(/*poslední položka bude ukotvena doprava*/ left:auto; right:0px; ) #menu1 ul li:hover ul(display:block;)/*tento řádek implementuje mechanismus vypadává*/ #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 % ; velikost 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( pozadí: #FDDC96; barva:#6572BC; )

Tento příklad se také liší od prvního v tom, že rozbalovací nabídka, samotná rozbalovací nabídka, se roztahuje v závislosti na šířce všech položek nabídky.

U velmi dlouhých položek nabídky nemusí být tato volba příliš vhodná, protože vylézají mimo hranice. Chcete-li tuto vlastnost zakázat, vyhledejte vlastnost "white-space: nowrap;" volič #menu1 ul li ul a odstraňte jej.

Níže si můžete prohlédnout ukázku nebo si stáhnout zdroj horizontální rozbalovací nabídky:

Bez oddělovačů toto menu vypadá tak nějak. Oddělovače lze do html přidat ručně, ale pokud máte CMS, jako je WordPress, není ruční přidávání příliš pohodlné.

Horizontální rozevírací nabídka s oddělovači

Možností jsou desítky čisté CSS přidat proužek (oddělovač) mezi položky nabídky. Možnosti, které používají::before nebo::after , nebo mnohem jednodušší border-left, border-right, nebudu duplikovat.

Jsou situace, kdy je layout vytvořen tak úžasně, že jquery je nepostradatelný.

Náš Html kód zůstává stejný, na úplném začátku obsahuje pouze knihovnu jQuery a soubor, který ji používá:

Hned po.

Jak jste pochopili, musíte vytvořit soubor script-menu-3.js a vložte tam tento malý kód:

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

CSS styly pro takové menu by měly být ponechány tak, jak jsou, + hodit tento kousek na konec:

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

Taková horizontální rozbalovací nabídka s oddělovači v jQuery bude vypadat takto:

Níže si můžete prohlédnout ukázku nebo si stáhnout šablonu horizontální nabídky:

Výhody takového řešení jsou:

  • nabídka se bude dynamicky přetahovat;
  • odrážky od oddělovače po odstavec jsou všude stejné;
  • krásnější a flexibilnější design.

CSS+HTML Horizontální vrstvená rozbalovací nabídka

Vzhledem k tomu, že mluvíme o víceúrovňových rozbalovacích nabídkách při najetí myší, pravděpodobně stojí za to je rozdělit do podskupin:

  1. s vipadashkou při ukazování na stranu
  2. s vyskakovacím výpadem třetí úrovně

Ve svých příkladech ukážu víceúrovňové menu CSS na 3 úrovních, pak si myslím, že nebude těžké uhodnout, co je potřeba udělat.

Víceúrovňová rozbalovací nabídka s vipadem na stranu při najetí myší

Pro začátek musíme trochu upravit náš html. Bude tam přidáno několik řádků pro ú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( zarovnání textu: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( pozice :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 (Pozadí: #EBBD5B; barva:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:auto; background:#EBBD5B; white-space:nowrap; ) #menu1 > ul > li:last-child > ul(/*poslední položka bude ukotvena doprava*/ left:auto; right:0px; ) #menu1 ul li:hover > ul(display:block;)/*tento řádek implementuje mechanismus vypouštění*/ #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( background:#FDDC96; color:#6572BC; ) #menu1 ul li ul li ul( top:0px; left:100%; display:none; background:#fddc96; ) #menu1 > ul > li:poslední -child > ul ul(left:auto; right:100%;) #menu1 ul li ul li ul a(color:#F38A01;)

Soubory pro jQuery se zkopírují stejně jako v předchozím příkladu. Rozhodl jsem se, že oddělovače nechám, aby menu vypadalo alespoň trochu lépe. Samozřejmě se bez nich obejdete.

Stalo se to takto:
Udělal jsem 2 skiny v jednom, abych ukázal, jak výpad vypadá vpravo a uprostřed.

Níže si můžete prohlédnout ukázku a stáhnout příklad:

Vrstvená rozbalovací nabídka s rozbalovací nabídkou při umístění kurzoru

V názvu se objevilo trochu oleje, ale půjde to, hlavní je kód.

Podstatou tohoto příkladu je vytvořit horizontální rozevírací nabídku v celé šířce s rozevíracím seznamem v celé šířce + víceúrovňové.

HTML kód měnit nebudu, lze jej převzít z předchozího příkladu. Oddělovače na jQuery jsou také ponechány.

Úplně se změní pouze 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( zarovnání textu: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( pozice :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- patka; barva:#ffffef; výška-řádku:1,3em; zdobení textu:žádné; váha písma:tučné; transformace textu:velká písmena; výška:36px; velikost rámečku:border-box; ) #menu1 ul li > a: vznášet se, #menu1 ul li:hover > a( background:#EBBD5B; barva:#2B45E0; ) #menu1 ul li ul( pozice:absolutní; nahoře:36px; vlevo:0px; zobrazení:žádné; šířka:100%; pozadí:#EBBD5B; ) #menu1 > ul > li > ul::after( clear:both; float:none; width:100%; height:0px; content:" "; ) #menu1 ul li:hover > ul(display:block;)/*tento řádek implementuje mechanismus vypouštění*/ #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 ; barva:#6572BC; ) #menu1 ul li ul li ul( nahoře:0px; vlevo:100%; displej:žádný; pozadí:#fddc96; z-index:15; ) #menu1 ul li ul li ul li(zobrazení : block; float:none; width:100%;) #menu1 ul li ul li ul a( color:#F38A01; border-top:1px solid #ffffff; )

Takto bude menu vypadat: Jediným bodem je, že web by měl mít dostatek místa, protože krajní položka vpravo nemá prostor pro vypadnutí. Tento problém lze vyřešit přes: n-té dítě, ale neobtěžoval jsem se oplotit zahradu.

Podívejte se na ukázku horizontální víceúrovňové rozbalovací nabídky:

Jak jste si mohli všimnout: spodní deska je také na celou šířku. Takto se dělají výpady v několika blocích.

To je z mé strany vše, doufám, že vám bude vyhovovat alespoň jeden z mých příkladů. Děkuji za pozornost.

prospěje to jim i mně 🙂 .

Pokud jste si přečetli příspěvek celý, ale nenašli jste, jak vytvořit vlastní horizontální rozbalovací nabídku v css, položte otázku v komentářích nebo použijte vyhledávání na webu.

Také vám doporučuji navštívit nadřazenou stránku https://web/vypadayushhee-menu/, jsou zde shromážděny všechny příklady a varianty rozbalovacích nabídek.

Poměrně běžné rozložení nabídky webu, kdy kontejner s ním zabírá celou šířku dostupnou na stránce. V tomto případě první položka přiléhá k levému okraji a poslední k pravému a vzdálenost mezi všemi prvky je stejná. Dnes vám ukážeme, jak se to dělá.

Nabízíme Vám ukázku realizace gumového menu kdy Nápověda CSS pro váš zdroj. V tomto menu budou položky umístěny na jednom řádku. Javascript nebude použit. Obsah nabídky bude zabalen do běžného seznamu. Hlavním rysem takového menu je jeho univerzálnost, která je vyjádřena tím, že jak počet, tak délka položek může být libovolný.

Jak to implementovat?

Každý programátor může nabídnout svůj vlastní způsob řešení problému. Vše záleží na jeho fantazii, míře profesionality a schopnostech. Nejběžnějším řešením tohoto problému je použití tabulky. Mnozí by také navrhovali použít javascript. Ti, kteří by navrhli použít vlastnost display s hodnotou stůl nebo buňka tabulky- Spěchám se rozčílit. Tato metoda nemá dostatečnou kompatibilitu mezi prohlížeči.

Naše řešení

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

Podstata procesu je založena na vlastnost text-align s hodnotou ospravedlnit. Pro ty, kteří zapomněli – připomínám: tato vlastnost orientuje zarovnání textu na celou šířku kontejneru.

Při používání našeho řešení je třeba dodržovat dvě závazná pravidla. První je, že šířka kontejneru položky nabídky musí být menší než text. Tedy ne v jednom řádku. Druhým důležitým pravidlem je, že slova jsou natahována stejně, bez ohledu na to, zda patří do stejného odstavce nebo ne.

Níže je kód, který slouží jako příklad vytvoření „gumové“ nabídky:

HTML

< ul> < li>< a href= "#" >Domov < li>< a href= "#" >Blog < li>< a href= "#" >Zprávy < li>< a href= "#" >Populární < li>< a href= "#" >Nový

ul (zarovnání textu: zarovnání; přetečení: skryté; /* odstranit vedlejší efekt metody */ výška: 20px; /* také odstraňuje zbytečné */ kurzor: výchozí ; /* nastaví počáteční tvar kurzoru */ okraj: 50px 100px 0 100px; pozadí: #eee; výplň: 5px ) li ( displej: inline; /* udělat z položek menu text */) li a ( zobrazení: inline-block; /* odstraní zalomení slov v nabídce */ barva: #444; ) a: hover ( barva: #ff0000; ) ul: po ( /* tvořící druhý řádek pro vypracování metody */ obsah: "1" ; okraj-levý: 100 %; výška: 1px; přepad: skrytý; displej: inline-block; )

Chcete-li pracovat ve starém dobrém Internet Exploreru, musíte dodatečně přidat následující kód do CSS

ul ( z-index: expression(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" > ")); ) ul .last (levý okraj: 100 %; ) * html ul ( /* potřeba pouze ie6 */ výška: 30px; )

Po registraci potřebných hodnot vlastností a kódu získáme následující gumové menu:

Nevýhody metody

  1. Kód svazku
  2. Nemožnost určení aktivního stavu prvku pomocí selektoru třídy. To je způsobeno dělením slov v odstavcích (pokud tam je). Řešením tohoto problému je přidání dalšího kontejneru do položek seznamu.
  3. Pro rozbalovací nabídku je třeba upravit kód kvůli negativnímu dopadu přetečení .

Na jakých prohlížečích to funguje?

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

Horizontální menu je seznam sekcí webu, takže je logičtější označit uvnitř prvku

    a poté na její prvky aplikujte styly CSS. Toto uspořádání menu je nejběžnější kvůli zjevným výhodám v jeho umístění na webové stránce.

    Jak vytvořit horizontální menu: příklady značek a návrhů

    HTML značení a základní styly pro horizontální nabídku

    Ve výchozím nastavení jsou umístěny všechny položky seznamu vertikálně, pokrývající celou šířku kontejnerového prvku, který dále zabírá celou šířku jeho kontejnerového bloku.

    HTML značky pro horizontální navigaci

    Do prvku lze dodatečně umístit vodorovné menu umístěné uvnitř tagu

    a/nebo
    ...
    . Díky tomuto html značení je dán sémantický význam a také se objevuje další příležitost pro formátování bloku nabídky.

    Existuje několik způsobů, jak je umístit horizontálně. Nejprve musíte obnovit výchozí styly prohlížeče pro navigační prvky:

    Ul ( list-style: none; /*odstranit značky seznamu*/ okraj: 0; /*odebrat horní a spodní okraj 1em*/ padding-left: 0; /*odebrat levé odsazení o 40px*/ ) a (text-decoration: none; /*odstranit podtržení textu odkazu*/)

    Metoda 1. li (zobrazení: inline;)

    Vytvořte položky seznamu inline. Díky tomu jsou uspořádány vodorovně, na pravé straně je mezi nimi přidána mezera rovna 0,4em (počítáno vzhledem k velikosti písma). Chcete-li jej odstranit, přidejte záporný pravý okraj k li li (margin-right: -4px;) . Dále upravte styl odkazů, jak chcete.

    Metoda 2. li (plovoucí: vlevo;)

    Prvky seznamu činíme plovoucími. V důsledku toho jsou uspořádány vodorovně. Výška ul kontejnerového bloku bude nulová. Abychom tento problém vyřešili, přidáme (přetečení: skryté;) do ul , rozbalíme jej a umožníme mu tímto způsobem obsahovat plovoucí prvky. U odkazů přidejte (zobrazení: blok;) a upravte je podle potřeby.

    Metoda 3. li (zobrazení: inline-block;)

    Vytváření položek seznamu inline-block. Jsou uspořádány vodorovně, na pravé straně je vytvořena mezera, jako v prvním případě. U odkazů přidejte (zobrazení: blok;) a upravte je podle potřeby.

    Metoda 4. ul (zobrazení: flex;)

    Vytvoření seznamu ul jako flexibilní kontejner pomocí . V důsledku toho jsou prvky seznamu rozloženy vodorovně. Přidejte (zobrazení: blok;) pro odkazy a upravte je podle potřeby.

    1. Responzivní nabídka s efektem podtržení při najetí myší na 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", bezpatkové; mezera mezi písmeny: 2px; pozice: relativní; padding-bottom: 20px; margin: 0 34px 0 30px; velikost písma: 17px; text-transform: velká písmena; display: inline-block; transition: color .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; vlevo: 50 %; pozadí: #feb386; přechod: .8s; ) .menu-main a:hover:before, .menu-main .current:before (left: 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 ( odsazení: 25px 0 20px; okraj: 030px; ))

    2. Responzivní menu pro svatební web

    @import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu ( position: relativní; pozadí: #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: střed; pozice: relativní; ) .menu-main:before, .menu-main:after ( content: "\25C8"; line-height: 1; position: absolute; top: 50%; transform: translateY(-50%) ); ) .menu-main:before (left: 15px;) .menu-main:after (right: 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á průhledná n: 0,3 s lineární; ) .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 mušlemi

    @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: ""; pozice: absolutní; šířka: 100%; výška: 20px; vlevo: 0; dole: -20px; pozadí: radiální-gradient (bílá 0%, bílá 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: žádné; zobrazení: vložený blok; okraj: 0 15px; odsazení: 10px 30px; rodina písem: "PT Sans Caption", bezpatkové; barva: #777777; přechod: 0,3s lineární; pozice: relativní; ) .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 (neprůhlednost: 1;) .menu-main a.current, .menu-main a:hover (barva: #F58262; ) @media(max-width:680px) ( .menu-main li (display: block;) )

    4. Responzivní nabídka pásu karet

    @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; vlevo: 0; šířka: 100 %; px. 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 ( styl seznamu: žádný; padding: 0; okraj: 0; zarovnání textu: na střed; ) .menu-main:before, .menu-main:after ( content: ""; position: absolute; šířka: 50px; výška: 0; top: 8px; border-top: 18px solid #5A394E; border-bottom: 18px solid # 5A394E; transform: rotation(360deg); z-index: -1; ) .menu-main: před ( 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", sans-serif; barva: bílá; přechod: .3s lineární; ) .menu-main a.current, .menu-main a:hover (pozadí: 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: žádný;) .menu-main a (zobrazení: blok;) )

    5. Responzivní menu s logem uprostřed

    @import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( position: relativní; background: 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 ; mezery mezi písmeny: 2px; font-family: "Arimo", bezpatkové; váha písma: tučné; barva: bílá; přechod: .3s lineární; ) .menu-main a:hover (pozadí: 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. Responzivní menu s logem vlevo

    @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: relativní; line-height: 61px; padding-left: 20px; font-size: 18px; letter-spacing : 2px; font-family: "Arimo", sans-serif; font-weight: bold; color: #F73E24; transition:.3s linear; ) .menu-main a:before ( content: ""; width: 9px; výška: 9px; pozadí: #F73E24; poloha: absolutní; vlevo: 50 %; transformace: otočit (45 stupňů) přeložitX(6,5px); neprůhlednost: 0; přechod: 0,3s lineární; ) .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 fore (transform: rotation(45deg) translateX(-6px);) ) @media (max-width: 600px) ( .menu-main li (display: block;) )