Tvorba submenu jen v HTML a CSS

HTML a CSS Ostatní 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;
}

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 131x (948 B)
Aplikace je včetně zdrojových kódů v jazyce HTML

 

  Aktivity (1)

Článek pro vás napsal IT Man
Avatar
Autor se primárně věnuje vývoji webových stránek v PHP a v JavaScriptu (knihovna jQuery). Napsal část manuálu HTML 5 a CSS 3, kde má celkem velký přehled. Jednoduše má v oblibě weby.

Jak se ti líbí článek?
Celkem (12 hlasů) :
3.666663.666663.666663.66666 3.66666


 



 

 

Komentáře
Zobrazit starší komentáře (18)

Avatar
Tomáš123
Člen
Avatar
Tomáš123:

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  -2 24.2.2015 15:43
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Matúš Petrofčík
Šéfredaktor
Avatar
Odpovědět  ±0 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:

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
Matúš Petrofčík
Šéfredaktor
Avatar
Odpovídá na Tomáš123
Matúš Petrofčík:

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  +1 24.2.2015 22:50
obsah kocky = r^2 ... a preto vlak drnká
Avatar
Tomáš123
Člen
Avatar
Odpovědět  +1 25.2.2015 11:12
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Tomáš123:

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. ledna 21:37
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Tomáš123
IT Man:

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. ledna 6:35
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Tomáš123
Člen
Avatar
Tomáš123:

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. ledna 6:46
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na IT Man
Tomáš123:

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. ledna 7:03
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Tomáš123
IT Man:

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

Odpovědět  +2 5. ledna 7:56
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
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 10 zpráv z 28. Zobrazit vše