Jak vytvořit gumové responzivní menu pomocí CSS? Horizontální rozbalovací nabídka Udělej si sám pomocí CSS a Html. Rozbalte nabídku na celou šířku.

Příznaky těhotenství po implantaci embrya

Dobré odpoledne

Často je nutné vytvořit vodorovné menu, které se roztáhne přes celou šířku nadřazeného bloku, bez ohledu na to, kolik položek obsahuje.

Dnes bych vám ráda ukázala, jak si právě takové menu vytvořit.

Naše menu bude tedy následující:

Je natažený do celé šířky a vynikne při najetí. Menu je po stranách zaoblené.

HTML MARKUP

...
Domov
Zajímavé novinky
Další položka menu!

Aby bylo menu plné, použil jsem tabulky se 100% šířkou. Každá tabulka má v nabídce kontejner div. V závislosti na tom, zda je první, poslední nebo mezilehlá položka nabídky div, je přiřazena odpovídající třída.

Každý kontejner div má 2 boční okraje s absolutním umístěním, které jsou nezbytné pro správné zobrazení. Pokud použijete standardní okraje, pak při přepnutí položek nabídky text poskočí o 1-2 pixely, což je dobré.

Aktivní třída je zodpovědná za vybranou položku nabídky a zvýrazní ji.

V každé položce máme obrázek a text. Abychom zajistili, že toto vše bude zarovnáno přesně uprostřed svisle, používáme tabulku. Díky vlastnosti vertikálního zarovnání budou naše položky nabídky vždy zobrazeny hladce a nebudou se vzdalovat.

PRAVIDLA CSS

Nejprve nastavíme styly pro obecné zobrazení nabídky:

Menu_container ( padding-top: 40px; width: 100%; height: 47px; border-spacing: 0px; ) .menu_container td ( vertical-align: middle; /* vertikální zarovnání */ ) .last_point_menu, .first_point_menu, .middle_point_menu šířka: 100 %; výška: 47px; okraj: 1px plný #dadbda; z-index: 1000; pozice: relativní; levý okraj: žádný; ) .inner_table ( šířka: 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 ( šířka: 40px!important; ) .inner_table_menu (výška: 100 %; padding: 0px; vertical-align: middle; border: none; text-align: left; ) .inner_table_title ( padding-left: 10px; padding-right: 10px; text-transform: velká písmena; line-height: 13px; ) .inner_table_menu td.inner_table_img ( šířka: 30px! důležité; výška: 30px!důležité; padding-left: 15px; )

Pro krásu zaobleme rohy po stranách nabídky:

Menu_prvního_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 -bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px ;)

Nyní má naše menu krásnější vzhled:

První bod zatím nemá levé ohraničení. Napravíme to trochu později.

Nyní do nabídky přidáme efekty hoveru.

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 (color-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; ) /* určí hranice při umístění kurzoru */ .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; )

Naše nabídka nyní vypadá mnohem lépe, ale prozatím nemáme ohraničení pro zvýrazněné položky nabídky. Pojďme to napravit!

/* styly pro boční okraje */ .borderLeftSecond, .borderRightSecond ( zobrazení: žádné; pozice: absolutní; šířka: 1px; výška: 47px; barva pozadí: #9fbb62; nahoře: 0px; z-index: 1000; ) /* absolutní offsety pro okraje */ .borderLeftSecond ( vlevo: 0px; ). , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond) /* zobrazení: první a poslední položka */ .first_point_menu.active .borderLeftSecond ( display: none; ) .last_point_menu.active .borderRightSecond ( display: none; ) .last_point_menu:hover .borderLeftSecond ( display: block; )

To je vše!

Dokázali jsme to skvělé menu nataženo přes celou šířku nadřazeného bloku! Položky se při najetí myší nepřekrývají a rozložení neskáče.

Horizontální nabídka je seznam sekcí webu, takže je logičtější umístit ji do prvku

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

    Jak vytvořit horizontální menu: příklady rozložení a designu HTML značky a základní styly pro horizontální nabídku

    Ve výchozím nastavení jsou všechny prvky seznamu uspořádány svisle a zabírají celou šířku prvku kontejneru, který zase zabírá celou šířku jeho bloku kontejneru.

    HTML značky pro horizontální navigaci

    Vodorovné menu umístěné uvnitř tagu může být navíc umístěno uvnitř ... a/nebo ... elementu. 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 vodorovně. 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 rovnající se 1 em*/ padding-left: 0; /*odstranit levé odsazení rovné 40px*/ ) a ( text-decoration: none; /*odstranit podtržení textu odkazu*/)

    Metoda 1. li (zobrazení: inline;)

    Vytváření prvků seznamu malými písmeny. V důsledku toho jsou umístěny vodorovně, s mezerou 0,4 em na pravé straně mezi nimi (počítáno vzhledem k velikosti písma). Chcete-li jej odstranit, přidejte záporný pravý okraj pro li li (margin-right: -4px;) . Dále nastylujeme odkazy, jak chceme.

    Metoda 2. li (plovoucí: vlevo;)

    Udělat prvky seznamu plovoucí. V důsledku toho jsou umístěny vodorovně. Výška kontejnerového bloku ul bude nulová. Abychom tento problém vyřešili, přidáme (přetečení: skryté;) k ul, čímž jej prodloužíme a umožníme mu tak obsahovat plovoucí prvky. U odkazů přidejte (zobrazení: blok;) a upravte je podle potřeby.

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

    Vytváření prvků seznamu inline-block. Jsou umístě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 uspořádány vodorovně. Pro odkazy přidáme (zobrazení: blok;) a upravíme je podle potřeby.

    1. Adaptivní nabídka s efektem podtržení při najetí myší na odkaz
    • Práce
    • O
    • Blog
    • Kontakt
    @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 (zobrazení: blok; ) .menu-main li:after (obsah: žádný;) .menu-main a ( padding: 25px 0 20px; okraj: 0 30px; ) ) 2. Adaptivní menu pro svatební web
    • Práce
    • O
    • Blog
    • Kontakt
    @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á, přechod: 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. Responzivní vroubkovaná nabídka
    • Práce
    • O
    • Blog
    • Kontakt
    @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.current: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. Adaptivní nabídka na pásu karet
    • Práce
    • O
    • Blog
    • Kontakt
    @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), inset -150px 0 150px -150px rgba(255,255,255,.12); ) .top-menu:before, .top-menu:after: absolute: ""; position: absolute: ""; ; z-index: 2; vlevo: 0; šířka: 100 %; výška: 3px; ) .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; width: 50px; height: 0; top: 8px; border-top: 18px solid #5A394E; border-bottom: 18px solid # 5A394E; transform: rotation(360deg); z-index: -1; ) .menu-main:before ( left: -30px; border-left: 12px solid rgba(255, 255, 255, 0); ) .menu- main:after ( right: -30px; border-right: 12px solid rgba(255, 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
    • Práce
    • O
    • Příběh
    • Kontakt
    • Prodejna
    • Galerie
    @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 (padding: 0 10px;) .menu-main a:before (transform: rotation(45deg) translateX(-6px);) ) @media (max-width: 600px) ( .menu-main li (zobrazit: blok;) )

    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 řekneme, jak se to dělá.

    Nabízíme vám příklad implementace gumového menu pomocí CSS pro váš zdroj. V tomto menu budou položky umístěny na jednom řádku. Javascript nebude použit. Obsah nabídky bude uzavřen v běžném seznamu. Hlavním rysem takového menu je jeho univerzálnost, která je vyjádřena tím, že počet i délka položek mohou být libovolné.

    Jak to implementovat?

    Každý programátor může nabídnout svůj vlastní způsob řešení daného 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. Spěchám zklamu ty, kteří by navrhli použít vlastnost display s tabulkou hodnot nebo buňkou tabulky. Tato metoda není dostatečně kompatibilní s různými prohlížeči.

    Naše řešení

    Naše nabídka bude postavena na pevných základech znalostí HTML5 a CSS3.

    Podstata procesu je založena na vlastnosti text-align s hodnotou justify. Pro ty, kteří zapomněli, připomínám: tato vlastnost orientuje zarovnání textu přes 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žek nabídky by měla 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 bodu nebo ne.

    Níže je kód, který slouží jako příklad vytvoření gumového menu:

    HTML

    < ul> < li>< a href= "#" >Domov< li>< a href= "#" >Blog< li>< a href= "#" >Zprávy< li>< a href= "#" >Oblíbený< li>< a href= "#" >Nové předměty

    ul ( text-align: justify; overflow: hidden; /* eliminuje vedlejší účinky metody */ výška: 20px; /* také eliminuje zbytečné */ kurzor: výchozí ; /* nastavuje počáteční tvar kurzoru */ margin : 50px 100px 0 100px; pozadí: #eee; padding: 5px; ) li ( display: inline; /* dělá z položek nabídky text */ ) li a ( display: inline- block; /* eliminuje dělení slov v nabídce */ barva: #444; ) a : hover ( color: #ff0000; ) ul: after ( /* tvořící druhý řádek pro vypracování metody */ obsah: "1" ; levý okraj: 100 %; výška: 1px; přetečení: skryté; zobrazení: vložený blok; )

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

    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 zadání potřebných hodnot vlastností a kódu získáme toto gumové menu:

    Nevýhody metody
  • Kód svazku
  • Neschopnost určit aktivní stav prvku pomocí selektoru třídy. K tomu dochází v důsledku přerušení slov v odstavcích (pokud tam je). Řešením tohoto problému je přidat další kontejner do prvků seznamu.
  • Pro rozbalovací nabídku je třeba upravit kód kvůli negativnímu dopadu přetečení .
    • V jakých prohlížečích to funguje?
    6.0+ 6.0+ 10.5+ 5.0+ 3.6+ - -

    Pokračujeme v sérii lekcí o rozbalovacích nabídkách. Další na řadě je horizontální rozbalovací nabídka „udělej si sám“ pomocí 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:

    vytvořit vodorovnou nabídku s rozevíracím seznamem css (na seznamech ul li) bez použití jQuery a Javascriptu a také bez použití tabulek

    v kódu.

    Rozbalovací horizontální nabídka html

    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 ho co nejvíce přiblížit 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:

    • Domov
    • O nás
    • Naše služby
      • Naše služba č.1
      • Naše služba č. 2
      • Naše služba č. 3
      • Naše služba č. 4
      • Servis 5
    • Zprávy
    • Kontakty

    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ů:

    Přiznejme si to, vypadá to ošklivě, jako běžný seznam. Dále musíme toto menu ozdobit pomocí CSS stylů.

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

    Styly CSS pro rozbalovací nabídky a další jsou stejně potřebné jako vzduch. Koneckonců, rozbalovací karta je vytvořena na základě pseudo-class: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í seznam nabídky:

    #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 drop-out*/ #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ý drop-out mechanismus je implementován v jedné linii.

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

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

    Níže je ukázka toho, jak funguje rozbalovací nabídka, a také odkaz na stažení zdrojů. (Ukázka se otevře pomocí rozevíracího seznamu v horní části této stránky, není třeba klikat na otevírání v novém okně 🙂 nebo kolečkem 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 ahoj z minulosti a částečně máte pravdu, i když jsem viděl nedávné rozvržení s takovými nabídkami.

    Doufám, že jste si stáhli výše uvedený příklad. Naše Html zůstává stejné, ale úplně změníme CSS. Můžete jednoduše vzít CSS kód odtud a vložit jej do staženého příkladu nebo sledovat v demo režimu, jak 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( 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 připojena k pravému okraji*/ left:auto; right:0px; ) #menu1 ul li:hover ul(display:block;)/*toto line implementuje mechanismus výpadků*/ #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( pozadí: #FDDC96; barva:#6572BC; )

    Tento příklad se od prvního liší také tím, ž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 možnost příliš vhodná, protože překračují limity. Chcete-li tuto vlastnost zakázat, stačí najít vlastnost "white-space:nowrap;" na voliči #menu1 ul li ul a odstraňte jej.

    Níže se můžete podívat na ukázku nebo si stáhnout zdroje 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í jejich ruční přidávání příliš pohodlné.

    Horizontální rozevírací nabídka s přepážkami

    Existuje několik desítek možností pro přidání pruhu (oddělovače) mezi položky nabídky pomocí čistého CSS. Nebudu duplikovat možnosti, které používají::before nebo::after , nebo mnohem jednodušší border-left, border-right.

    Jsou situace, kdy je layout vytvořen tak úžasně, že se bez jquery neobejdete.

    Náš HTML kód zůstává stejný, jen jsme na úplný začátek zahrnuli knihovnu jQuery a soubor, který ji používá:

    Hned po .

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

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

    Styly CSS pro takovou nabídku by měly být ponechány tak, jak jsou, + přidejte tento kousek na konec:

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

    Horizontální rozevírací nabídka s oddělovači v jQuery bude vypadat takto:

    Níže si můžete prohlédnout v demo režimu nebo si stáhnout šablonu horizontální nabídky:

    Výhody tohoto řešení jsou:

    • nabídka se bude vykreslovat dynamicky;
    • odrážky od oddělovače po odstavec jsou všude stejné;
    • krásnější a flexibilnější design.
    Horizontální víceúrovňová rozbalovací nabídka CSS+HTML

    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:

  • s vip podložkou při ukazování do strany
  • s vyskakovacím rozbalovacím seznamem třetí úrovně

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

    Víceúrovňová rozbalovací nabídka s postranním panelem, na který je umístěn ukazatel myši

    Nejprve musíme trochu upravit náš HTML. Pro úroveň 3 tam bude přidáno několik řádků:

    • Domov
    • O nás
    • Naše služby
      • Naše služba č.1
        • Doplnění služby 1
        • Doplnění služby 2
      • Naše služba č. 2
        • Doplnění služby 3
        • Doplnění služby 4
      • Naše služba č. 3
      • Naše služba č. 4
      • Servis 5
    • Zprávy
    • Kontakty
      • Cestovní mapa
        • Mapový doplněk
        • Doplněk pro mapu 2
      • Formulář zpětné vazby

    #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( 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 připojena k pravému okraji*/ 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( pozadí:#FDDC96; barva:#6572BC; ) #menu1 ul li ul li ul( nahoře:0px; vlevo:100%; display:none; background:#fddc96; ) #menu1 > ul > li:last-child > ul ul(left:auto; right:100%;) #menu1 ul li ul li ul a(color:#F38A01;)

    Zkopírujeme soubory pro jQuery tak, jak byly z předchozího příkladu. Rozhodl jsem se, že oddělovače nechám, aby menu vypadalo alespoň trochu lépe. Samozřejmě to jde i bez nich.

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

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

    Víceúrovňová rozbalovací nabídka s vyskakovací podložkou při najetí myší

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

    Podstatou tohoto příkladu je vytvoření horizontální rozevírací nabídky 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. V jQuery také ponecháváme oddělovače.

    Úplně se změní pouze 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( 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:hover, #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- size: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( pozadí: #FDDC96; barva:#6572BC; ) #menu1 ul li ul li ul( top:0px; left:100%; display:none; background:#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; )

    Takto bude menu vypadat: Jediným bodem je, že web musí mít dostatek místa, protože poslední položka vpravo nemá místo pro rozevírací seznam. Tento problém lze vyřešit pomocí:nth-child, ale neobtěžoval jsem se.

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

    Jak jste si mohli všimnout: spodní matrice má také plnou šířku. Takto se dělají kapky 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 celý příspěvek, 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://site/vypadayushhee-menu/, kde jsou shromážděny všechny příklady a typy rozbalovacích nabídek.

    Publikace na dané téma