Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij podzimní akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se JavaScript
JavaScript týden

Tvorba submenu jen v HTML a CSS

Bylo vaším snem udělat si menu nahoře na vaší stránce? Chtěli jste si k tomu udělat submenu a nevěděli jste, jak na to? Dnes si ukážeme, jak to jde i bez JavaScriptu pouze v čistém HTML a CSS.

Základ

Nejdříve si založíme nějaký HTML dokument, který si poté jen nastylujeme.

<!DOCTYPE html>
<html lang="cs-cz">

    <head>
        <meta charset="utf-8" />
        <title>Tvorba submenu</title>
        <link type="text/css" rel="stylesheet" href="style.css" />
    </head>

    <body>
        <header>
            <h1 id="logo">Submenu</h1>
            <nav>
                <ul>
                    <li><a href="/">Hlavní strana</a></li>
                    <li><a href="#">Fórum</a>
                        <ul>
                            <li><a href="#">Mimo téma</a></li>
                            <li><a href="#">Poradna</a></li>
                            <li><a href="#">Otázky</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>

Všimněte si, že nemusíme vytvářet nějaké extra třídy pro položky. Dále se podívejte, jak máme obalené submenu. Dali jsme ho do tagu li, aby prohlížeč věděl, kde to submenu chceme. Menu jsem dal do tagu header. Umístíme ho totiž poté hned vedle nadpisu, protože pokud se tvoří submenu, je dobré ho mít nějak dobře umístěné. Přestupme tedy na CSS.

Stylování stránky

Pro začátek si nastylujeme zatím náš dosavadní HTML dokument. S dovolením použiji styly ze seriálu Webové stránky krok za krokem. Trochu si je poupravím, kvůli okolnostem, protože máme pouhý HTML dokument s menu.

body {
    font-family: Arial;
    min-width: 900px;
}

header {
    width: 900px;
    margin: auto;
}

Nastavme si nějaký jednoduchý vzhled. Dejme tag header na střed a kvůli tomu nastavme i minimální šířku body, aby prohlížeč věděl s čím to má zarovnat. Hlavně nezapomeňte, že pokud budete chtít udělat responzivní design (či pokud dáte mnoho položek do menu), bude menu pod sebou a to není vůbec hezké.

#logo {
    font-size: 60px;
    color: #4169E1;
    float: left;
    margin: 0px;
    z-index: -1;
}

U loga nastavme takovou výšku, aby logo bylo stejně vysoké jako menu. V našem případě 60 px. Nastavme ho též na levou stranu, aby poté menu nebylo pod ním, což není zrovna hezké. A nakonec musíme přidat z-index a dát mu zápornou hodnotu, jinak by submenu nechtělo jít přes něj.

nav ul {
    margin: 0px;
    list-style-type: none;
}
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Protože chceme tlačítka, musíme odebrat tečky ze seznamu. Též dáme margin na 0, aby nikde nevznikala zbytečná mezera.

nav ul li {
    float: left;
    display: block;
    padding: 0px 25px;
    margin: 0px 5px;
    font-size: 17px;
    height: 73px;
    width: 130px;
    line-height: 4.3em;
    background-color: #ccbb00;
    text-align: center;
}

Zde si můžete všimnout mnoha tagů ze zmíněného seriálu. Nastavujeme tlačítka vedle sebe a různé styly, které jistě znáte. Přidal jsem ještě barvu na pozadí, jinak bychom měli všechno krásně bílé a uživatel by nevěděl, na co má klikat. Navíc jsem text nastavil na střed.

nav ul li:hover {
    background: #ffbb00;
    box-shadow: 0px 0px 5px black;
}

Z krásného pocitu interaktivity webových stránek nastavíme aktivnímu tlačítku stín a jinou barvu. Používám úplně stejné styly jako z HTML & CSS seriálu.

nav ul li a {
    color: white;
    text-decoration: none;
}

V poslední části nastavení našeho vzhledu jsem ještě přidal bílé odkazy. Vesměs skoro všechno musíte znát.

Máme tedy hrubý základ CSS. Zatím to vypadá docela dost mizerně. Tlačítka jsou všude poházená a kdyby tohle viděl uživatel, řekne si, jaký blbec to psal. Zatím výsledek vypadá nějak takto:

Mezivýsledek submenu v HTML a CSS

Tvorba submenu

Pojďme tedy přidat styly pro submenu.

nav ul li ul {
    display: none;
    position: relative;
    left: -70px;
    z-index: 1;
}

Jak si můžete všimnout, nastavujeme ručně pozici. Protože submenu je součástí tlačítka Fórum, posouvá se. Napsáním záporné hodnoty left se nám submenu seřadí pěkně pod sebe. Ještě musíme přidat z-index s kladnou hodnotou, jinak by se nám menu pořád schovávalo.

nav ul li ul li {
    clear: both;
}

nav ul li:hover ul {
    display: block;
}

U submenu musíme ukončit plovoucí obsah, protože kdybyste chtěli rozšiřovat svoje stránky, dělalo by vám to neplechu. Aby nám vůbec fungovalo submenu, musíme nastavit display na block. Kdybychom použili jinou hodnotu, submenu by si dělalo, co by chtělo.

nav ul li ul li:not(:last-child) {
    border-bottom: 2px solid white;
}

Nakonec vylepšíme vzhled a to rámečkem. Bez něj by nám menu splývalo v jedno tlačítko a to my přeci nechceme. Navíc stín teď bude o trochu lépe fungovat. Kdybychom ale nastavili margin, uživatel by se nedostal ani na jedno tlačítko v submenu. Výsledek tedy bude poté podle naších očekávání:

Výsledné submenu

Jak je známo, je nesmysl nastavovat pozice ručně. V tomto návodu však nastavujeme pozici pro submenu, aby bylo pěkně zarovnáno. Zkuste si tedy teď upravit HTML dokument, aniž byste zasahovali do CSS souboru a přidejte submenu pod kontakt:

Druhé submenu u kontaktu

Dokončení stránky

Menu se již dá jen rozšiřovat. Stačí trochu upravit styly a můžete dělat v submenu další submenu. Pokud pak budete chtít dodělat stránku, stačí pod celé menu (tedy pod uzavírací tag nav) přidat:

<div class="cistic"></div>

A do souboru style.css přidat:

.cistic {
    clear: both;
}

Toto již můžete znát z této sítě, kde se používá velmi často a hodí se i tady. Ukončíme tím obtékání. A pak už stačí jenom přidat obsah, který menu krásně překryje.

Závěr

Tímto jsem vám chtěl ukázat, že i pouhým CSS a HTML jdou různé divy. Nemusíte tedy vkládat žádný JavaScript a podobně. Stačí jen znalosti a můžete udělat cokoliv. Příkladem jsou různé hry, animace, webové stránky a podobně.


 

Stáhnout

Staženo 240x (948 B)
Aplikace je včetně zdrojových kódů v jazyce CSS

 

Všechny články v sekci
CSS 3 zdrojákoviště
Článek pro vás napsal Jan Lupčík
Avatar
Jak se ti líbí článek?
12 hlasů
Autor se primárně věnuje vývoji webových stránek a aplikacích v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.
Aktivity (2)

 

 

Komentáře

Avatar
Pavel Junek
Redaktor
Avatar
Pavel Junek:19.2.2015 18:32
left: -70px;
Jak si můžete všimnout, nastavujeme ručně pozici. Protože submenu je součástí tlačítka Fórum, posouvá se. Napsáním záporné hodnoty left se nám submenu seřadí pěkně pod sebe

úplně stačí nastavit padding na 0 ;)

//ukázka: http://jsfiddle.net/885mskh7/

Editováno 19.2.2015 18:33
 
Odpovědět
19.2.2015 18:32
Avatar
Jan Lupčík
Super redaktor
Avatar
Odpovídá na Pavel Junek
Jan Lupčík:19.2.2015 19:30

To jo, akorát zde se mnohokrát ukazuje, že pozice jsou špatné a hodí se na dobré využití jako v tomto článku. :)

Odpovědět
19.2.2015 19:30
TruckersMP vývojář
Avatar
tipek136
Člen
Avatar
tipek136:23.2.2015 10:30

Ahoj, přesně tohle jsem hledal. Nebylo by ale lepší, kdyby si nastavil odkaz na celou buňku, a ne jenom na ten text?

 
Odpovědět
23.2.2015 10:30
Avatar
Jan Lupčík
Super redaktor
Avatar
Odpovídá na tipek136
Jan Lupčík:23.2.2015 15:10

Ano, to klidně můžeš, ale ve většině případů se odkaz nastavuje jako obsah buňky a ne celá buňka. :)

Odpovědět
23.2.2015 15:10
TruckersMP vývojář
Avatar
Odpovídá na Jan Lupčík
Neaktivní uživatel:23.2.2015 15:13

To bych právě netvrdil, celá buňka by měla být klikatelná.

Odpovědět
23.2.2015 15:13
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Michal Šmahel:23.2.2015 15:48

Ale myslím, že by se

<li>

do

<a>

uzavírat nemělo. Proto to dělám pomocí paddingu. Nastavím

<a>

padding, aby se roztáhla klikací plocha přes celou buňku.

Odpovědět
23.2.2015 15:48
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Odpovědět
23.2.2015 15:50
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Jan Lupčík
Super redaktor
Avatar
Odpovídá na Michal Šmahel
Jan Lupčík:23.2.2015 16:05

S tím by se ale dělalo menu (respektive submenu) velmi špatně.

Odpovědět
23.2.2015 16:05
TruckersMP vývojář
Avatar
Jakub Vaněk (Bubavanek):23.2.2015 18:20

Jako tohle je moc hezký, když jsem začínal určitě bych to využil.:) Ale přes JS je to prostě jednodušší.

 
Odpovědět
23.2.2015 18:20
Avatar
Matúš Petrofčík:23.2.2015 18:30

wut wut?

Jan Lupčík:
Normálne sa do <li> dá <a>, <li> sa vynulujú padingy marginy guličky a prípadne zmení display (alebo float), a ďalej sa štýluje <a>, a <li> sa tomu <a> potom prispôsobí, a dá sa klikať všade, nie len na text.

Jakub Vaněk (Bubavanek):
Myslím že cez CSS je to jednoduchšie než cez javascript, a k tomu to funguje aj tam, kde je javascript vypnutý (nehovorím o prehliadači v konzole)

Odpovědět
23.2.2015 18:30
obsah kocky = r^2 ... a preto vlak drnká
Avatar
Jan Lupčík
Super redaktor
Avatar
Odpovídá na Matúš Petrofčík
Jan Lupčík:23.2.2015 18:34

Tak to je na každém, já chtěl vytvořit submenu a tohle byl jen příklad. :)

Odpovědět
23.2.2015 18:34
TruckersMP vývojář
Avatar
Odpovídá na Michal Šmahel
Neaktivní uživatel:23.2.2015 19:13

O tom se přece vůbec nepřu :)

Odpovědět
23.2.2015 19:13
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Michal Šmahel:23.2.2015 19:17

Však já vím, ale napsal jsem to všem, kteří tady o tom debatovali.

Odpovědět
23.2.2015 19:17
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Odpovídá na Matúš Petrofčík
Jakub Vaněk (Bubavanek):23.2.2015 20:36

No tak asi jak pro koho. Pro mě je jednodušší to skrýt a při najetí zase zobrazit, než se s tím plácat v CSS. To mi zabere vždycky věčnost. A co se týče vypnutého JS, tak to máš pravdu.

 
Odpovědět
23.2.2015 20:36
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Jakub Vaněk (Bubavanek)
Matúš Petrofčík:23.2.2015 21:06

V CSS urobíš to isté :) submenu skryješ ( display:none; ) a ak prejdeš po rodičovi myškou ( :hover ) tak submenu dáš zobraziť ( display: block; ). Rodič ale musí mať position: relative; a submenu position: absolute; , a nastavené top a left :)

Editováno 23.2.2015 21:08
Odpovědět
23.2.2015 21:06
obsah kocky = r^2 ... a preto vlak drnká
Avatar
Odpovídá na Matúš Petrofčík
Jakub Vaněk (Bubavanek):23.2.2015 22:05

No stejně je to pro mě složité :) Ale tak to asi záleží na každém, zaplaťpánbů doteďka jsem to nemusel přes CSS řešit. Já jsem na to asi prostě levej :)

 
Odpovědět
23.2.2015 22:05
Avatar
Odpovídá na Matúš Petrofčík
Jakub Vaněk (Bubavanek):23.2.2015 22:05

No stejně je to pro mě složité :) Ale tak to asi záleží na každém, zaplaťpánbů doteďka jsem to nemusel přes CSS řešit. Já jsem na to asi prostě levej :)

 
Odpovědět
23.2.2015 22:05
Avatar
Odpovídá na Jakub Vaněk (Bubavanek)
Matúš Petrofčík:23.2.2015 22:15

Život je o učení :) ja tiež neviem všetko :D

Odpovědět
23.2.2015 22:15
obsah kocky = r^2 ... a preto vlak drnká
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Matúš Petrofčík
Tomáš123:24.2.2015 15:43

Rodič nemusí mať position: relative a potomok nemusí mať definovanú pozíciu zľava a zhora. Stačí použiť display: inline-block pre hlavné položky. Viď tiež: http://tomas123.mujskript.cz/index.php?…

Odpovědět
24.2.2015 15:43
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Odpovědět
24.2.2015 15:59
obsah kocky = r^2 ... a preto vlak drnká
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Matúš Petrofčík
Tomáš123:24.2.2015 16:20

Nerozumiem... Iba píšem o jednoduchšom spôsobe.

Odpovědět
24.2.2015 16:20
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Odpovídá na Tomáš123
Matúš Petrofčík:24.2.2015 22:50

Chcel som vidieť nejaké demo (ukážku) ako by to vyzeralo bez tých position relative a position absolute :) skúšať sa mi to teraz nechce, ale som zvedavý či sa to zobrazí tak ako chcem(e) :)

Odpovědět
24.2.2015 22:50
obsah kocky = r^2 ... a preto vlak drnká
Avatar
Tomáš123
Člen
Avatar
Odpovědět
25.2.2015 11:12
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Tomáš123:4.1.2016 21:37

Z-index nie je potrebný ani v jednom prípade. Na statickú pozíciu nemá z-index žiadny vplyv a relatívna pozícia je vyššie ako statická (predvolená). Problém by nastal, ak by bol pod menu nejaký nestaticky poziciovaný prvok. Praktickejšie by ale bolo riešiť z-index tam.

jinak by se nám menu pořád schovávalo.

To sa mi nepodarilo nasimulovať.

U loga nastavme takovou výšku, aby logo bylo stejně vysoké jako menu.

Font-size neslúži na nastavenie výšky...

Floatovaný element je vo väčšine prípadov pretypovaný na blokový. V prípade displayu: list-item síce k pretypovaniu nedochádza (v CSS 2.1 nie je definované, či má dôjsť k pretypovaniu na block alebo list-item), v každom prípade display: list-item je display:block s odrážkami (ktoré sú zneviditeľnené). Deklarácia displayu je tam teda zbytočná.

Dosť nepraktické je určovať fixnú šírku a výšku. Po zväčšení písma (ktorému sa použitím jednotky px usilovne brániš v starších IE) bude menu vyzerať zle. Dlhšie slová sa orežú, viac kratších sa zalomí a zmizne v bielom pozadí.

Kdybychom použili jinou hodnotu, submenu by si dělalo, co by chtělo.

Ukážkové vysvetlenie.

font-size: 17px;
height: 73px;
line-height: 4.3em;

Kvôli rozličným jednotkám si spôsobuje odchýlku 0.1px. Zbytočne. Stačilo by:

height: 4.3em;
line-height: 4.3em

A vôbec by to nezáviselo od veľkosti písma. Nejde o tú malú odchýlku, ale o potenciálne zbytočné problémy.

Iné nezrovnalosti už boli spomenuté.

Odpovědět
4.1.2016 21:37
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Jan Lupčík
Super redaktor
Avatar
Odpovídá na Tomáš123
Jan Lupčík:5.1.2016 6:35

Ten z-index je tam právě kvůli tomu, kdyby tam měl být další obsah. :)
Ano, vím, že se tak nenastavuje výška, ale myslel jsem, aby ten text byl podobně vysoký jako menu.
Starší IE už neřeším. Stejně je to malé % lidí a je s tím jenom plno problémů. Takže tak.

Odpovědět
5.1.2016 6:35
TruckersMP vývojář
Avatar
Tomáš123
Člen
Avatar
Tomáš123:5.1.2016 6:46

Edit, pri poslednom tvrdení som sa zle vyjadril. Celá hodnota jednotky em závisí od veľkosti písma. Iba vertikälna stredovosť by bola nezávisle poistená.

Odpovědět
5.1.2016 6:46
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Jan Lupčík
Tomáš123:5.1.2016 7:03

Ten z-index je tam právě kvůli tomu, kdyby tam měl být další obsah.

Ako som písal, musel by to byť nestaticky poziciovaný prvok. Vyjadril som aj náklonnosť k inému riešeniu, ale beriem, že nie je jediné.

Ano, vím, že se tak nenastavuje výška, ale myslel jsem, aby ten text byl podobně vysoký jako menu.

Asi nepočítaš s tým, že to môže vyzerať trochu inak. Neviem pre aký prehliadač si to odladil, ale vo Firefoxe ani nevidno celý text a na úrovni menu sa to nevykresľuje.

Starší IE už neřeším. Stejně je to malé % lidí a je s tím jenom plno problémů. Takže tak.

Jediné s čím je tu plno problémov je tvoje riešenie. Stačí iba nastaviť veľkosť písma v nenovej relatívnej jednotke. Zafunguje % aj em.

Odpovědět
5.1.2016 7:03
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Jan Lupčík
Super redaktor
Avatar
Odpovídá na Tomáš123
Jan Lupčík:5.1.2016 7:56

Dobře. Až budu doma, mrknu na to. Díky za připomínky. :)

Odpovědět
5.1.2016 7:56
TruckersMP vývojář
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 28 zpráv z 28.