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 - CSS3 zdrojákoviště

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

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 - CSS3 zdrojákoviště

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žením následujícího souboru souhlasíš s licenčními podmínkami

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

Článek pro vás napsal Jan Lupčík

Uživatelské hodnocení:

12 hlasů

Autor se primárně věnuje vývoji webových stránek a aplikací v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.

Aktivity