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:
| 6.0+ | 6.0+ | 10.5+ | 5.0+ | 3.6+ | - | - |
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
- Položka nabídky
- Položka nabídky
- Položka nabídky ...
- blokový obal pro menu
- samotná nabídka zobrazená prostřednictvím seznamu s odrážkami (značka ul)
- Položky nabídky jsou uvnitř, a proto již mají odkazy
- vertical-align: bottom - tato vlastnost je nezbytná proto, aby text v položce nabídky zabral 2 řádky, zobrazil se rovnoměrně. Když vytvoříme nabídku, můžete tuto vlastnost odstranit, přiblížit, aby se položky zkomprimovaly a text se přesunul na 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í nastavíme jako řádek tabulky, bylo by logické nastavit, aby se jeho položky 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 - to je jen pro vystředění textu uvnitř
- výška: 50 pixelů — nastavte výšku na 50 pixelů
- no, border-right je jen hranice napravo, oddělovač položek
- vlastnost text-decoration přepíše výchozí podtržení pro odkazy
- width: 1000px je možná nejdůležitější řádek. Odkazy je potřeba nastavit přibližně na tuto šířku, možná menší, ale rozhodně větší než nejširší možná položka nabídky. Odkazy nebudou široké 1000 pixelů, protože šířka bude omezena položkou nabídky li, jejíž šířka je nastavena na auto, ale bude možné zajistit, že pro libovolný počet položek v nabídce bude vždy 100 procenta šířky.
- 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 potřeba.
- font - no, to je jen sada nastavení pro font. Přečtěte si o vlastnostech css pro písma v tomto článku.
- 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
- 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.
- s vip podložkou při ukazování do strany
- s vyskakovacím rozbalovacím seznamem třetí úrovně
- 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
- Naše služba č.1
- Zprávy
- Kontakty
- Cestovní mapa
- Mapový doplněk
- Doplněk pro mapu 2
- Formulář zpětné vazby
- Cestovní mapa
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 tomu má označení html sémantický význam a také poskytuje 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 @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 @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 @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 @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
@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;) ) 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
|
|
...
|
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!
Dostali jsme vynikající menu roztažené přes celou šířku nadřazeného bloku! Položky se při najetí myší nepřekrývají a rozložení neskáče.
Ahoj. Už hodně dlouho jsem nepsal příspěvky na téma práce s html/css. Nedávno jsem začal dávat dohromady nový layout a při tom jsem narazil na zajímavý trik, který vám umožní udělat menu flexibilní (můžete do něj přidávat nové položky a velikost se nezvětší, ale vždy bude 100% rodičovský blok). Dnes tedy implementujeme gumové menu pomocí CSS.
Pokud jste příliš líní číst článek, můžete se podívat na toto video. Autor také vše velmi dobře vysvětluje:
Prvním krokem je vždy html značení, kde bychom bez něj byli? Ale v našem případě bude vše jednoduché:
Vše je jasné, zde je můj značkovací kód:
Vše vypadá standardně, takto:
Nyní vše dáme do požadované podoby, CSS se pustí do práce.
Krok 2 – Základní stylyDále přidám styly do bloku obalu. Jmenovitě nastavím maximální šířku na 600 pixelů (jen pro snadnější pořízení snímku obrazovky, aby se vešlo menu) a blok také vycentruji.
Zabalit(
pozadí: #fff;
max-width: 600px;
okraj: 0 auto;
}
Nyní se pojďme věnovat samotnému menu. Odstraním z něj značky (značku ul), vytvořím na pozadí lineární přechod a hlavně použiji vlastnost display: table-row, aby se kontejner pro nabídku choval jako řádek tabulky. To je důležité udělat pro další manipulace.
R-menu(
pozadí: linear-gradient(doprava, #b0d4e3 0%,#88bacf 100%);
zobrazení: tabulka-řádkový;
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. Jednou o něm zase napíšu.
R-menu(
svisle zarovnat: dole;
displej: tabulka-buňka;
šířka: auto;
text-align: center;
výška: 50px;
border-right: 1px solid #222;
}
Nabídka zatím vypadá nevzhledně, ale to je v pořádku, je čas si to připomenout. 
Poslední věcí, kterou musíte udělat, je stylovat odkazy uvnitř položek. Tady mám tento kód:
R-menu li a(
text-dekorace: žádná;
šířka: 1000px;
výška: 50px;
vertikální zarovnat: střed;
displej: tabulka-buňka;
barva: #fff;
písmo: normální 14px Verdana;
}
A takto nyní vypadá menu:
Opět mi dovolte vysvětlit některé řádky:
Například tak, že se při najetí myší změní barva položky nabídky. To lze implementovat docela jednoduše pomocí pseudotřídy hover:
R-menu li:hover(
barva pozadí: #6bba70;
}
Skvělé, jídelní lístky 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ů. Zbývající položky byly jednoduše zmenšeny, aby se do nich vešly 2 nové.
Přidám ještě jeden dlouhý bod:
Jak je vidět, menu se trochu více zmenšilo a dlouhá položka se zobrazuje zcela normálně. A nebýt vlastnosti vertical-align: bottom, o které jsem vám říkal, menu by vypadalo 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!
V zásadě platí, že pokud nastavíte obalový blok na maximální šířku spíše než na pevnou, pak se ani nemusí přizpůsobovat. V mém případě mám vlastnost max-width: 600px a když bude šířka menší než 600 pixelů, blok se jednoduše zmenší spolu s obrazovkou, aniž by se vytvořil vodorovný posuv.
No, pokud chcete nějak změnit nebo opravit nabídku na mobilních zařízeních nebo širokoúhlých obrazovkách, pak vám pomohou dotazy na média! Hodně štěstí při tvorbě webu!
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
Rýže. 2 (horizontální rozbalovací nabídka)
Udělal jsem 2 skiny v jednom, abych ukázal, jak vypadá kapka vpravo a uprostřed.