Tvorba submenu len v HTML a CSS

Bolo vaším snom urobiť si menu hore na vašej stránke? Chceli ste si k tomu urobiť submenu a nevedeli ste, ako na to? Dnes si ukážeme, ako to ide aj bez JavaScriptu len v čistom HTML a CSS.

Základ

Najskôr si založíme nejaký HTML dokument, ktorý si potom len 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šimnite si, že nemusíme vytvárať nejaké extra triedy pre položky. Ďalej sa pozrite, ako máme obalené submenu. Dali sme ho do tagu chcete, aby prehliadač vedel, kde to submenu chceme. Menu som dal do tagu header. Umiestnime ho totiž potom hneď vedľa nadpisu, pretože ak sa tvoria submenu, je dobré ho mať nejako dobre umiestnené. Prestup teda na CSS.

Štýlovanie stránky

Pre začiatok si nastylujeme zatiaľ náš doterajší HTML dokument. S dovolením použijem štýly zo seriálu Webové stránky krok za krokom. Trochu si ich poupravím, kvôli okolnostiam, pretože máme púhy HTML dokument s menu.

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

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

Nastavme si nejaký jednoduchý vzhľad. Dajme tag header na stred a kvôli tomu nastavme aj minimálnu šírku body, aby prehliadač vedel s čím to má zarovnať. Hlavne nezabudnite, že ak budete chcieť urobiť responzívne dizajn (či ak dáte veľa položiek do menu), bude menu pod sebou a to nie je vôbec pekné.

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

U loga nastavme takú výšku, aby logo bolo rovnako vysoké ako menu. V našom prípade 60 px. Nastavme ho tiež na ľavú stranu, aby potom menu nebolo pod ním, čo nie je práve pekné. A nakoniec musíme pridať z-index a dať mu zápornú hodnotu, inak by submenu nechcelo ísť cez neho.

nav ul {
    margin: 0px;
    list-style-type: none;
}

Pretože chceme tlačidlá, musíme odstrániť bodky zo zoznamu. Tiež dáme margin na 0, aby nikde nevznikala zbytočná medzera.

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;
}

Tu si môžete všimnúť mnohých tagov zo spomínaného seriálu. Nastavujeme tlačidlá vedľa seba a rôzne štýly, ktoré určite poznáte. Pridal som ešte farbu na pozadí, inak by sme mali všetko krásne biele a užívateľ by nevedel, na čo má klikať. Navyše som text nastavil na stred.

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

Z krásneho pocitu interaktivity webových stránok nastavíme aktívnemu tlačidle tieň a inú farbu. Používam úplne rovnaké štýly ako z HTML & CSS seriálu.

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

V poslednej časti nastavení nášho vzhľadu som ešte pridal bielej odkazy. Napospol skoro všetko musíte poznať.

Máme teda hrubý základ CSS. Zatiaľ to vyzerá celkom dosť mizerne. Tlačidlá sú všade pohádzané a keby toto videl užívateľ, povie si, aký blbec to písal. Zatiaľ výsledok vyzerá nejako takto:

Medzivýsledok submenu v HTML a CSS - Ostatné články o HTML a CSS

Tvorba submenu

Poďme teda pridať štýly pre submenu.

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

Ako si môžete všimnúť, nastavujeme ručne pozíciu. Pretože submenu je súčasťou tlačidlá Fórum, posúva sa. Napísaním záporné hodnoty left sa nám submenu zoradia pekne pod seba. Ešte musíme pridať z-index s kladnou hodnotou, inak by sa nám menu stále schovávalo.

nav ul li ul li {
    clear: both;
}

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

U submenu musíme ukončiť plávajúce obsah, pretože keby ste chceli rozširovať svoje stránky, robilo by vám to neplechu. Aby nám vôbec fungovalo submenu, musíme nastaviť display na block. Keby sme použili inú hodnotu, submenu by si robilo, čo by chcelo.

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

Nakoniec vylepšíme vzhľad a to rámčekom. Bez neho by nám menu splývalo v jedno tlačidlo a to my predsa nechceme. Navyše tieň teraz bude o trochu lepšie fungovať. Keby sme ale nastavili margin, používateľ by sa nedostal ani na jedno tlačidlo v submenu. Výsledok teda bude potom podľa našich očakávaní:

výsledné submenu - Ostatné články o HTML a CSS

Ako je známe, je nezmysel nastavovať pozície ručne. V tomto návode však nastavujeme pozíciu pre submenu, aby bolo pekne zarovnané. Skúste si teda teraz upraviť HTML dokument, bez toho aby ste zasahovali do CSS súboru a pridajte submenu pod kontakt:

Druhé submenu u kontaktu - Ostatné články o HTML a CSS

Dokončenie stránky

Menu sa už dá len rozširovať. Stačí trochu upraviť štýly a môžete robiť v submenu ďalšie submenu. Ak potom budete chcieť dorobiť stránku, stačí pod celé menu (teda pod uzatvárací tag nav) pridať:

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

A do súboru style.css pridať:

.cistic {
    clear: both;
}

Toto už môžete poznať z tejto siete, kde sa používa veľmi často a hodí sa aj tu. Ukončíme tým obtekania. A potom už stačí len pridať obsah, ktorý menu krásne prekryje.

Záver

Týmto som vám chcel ukázať, že aj voľným CSS a HTML idú rôzne divy. Nemusíte teda vkladať žiadny JavaScript a podobne. Stačí len vedomosti a môžete urobiť čokoľvek. Príkladom sú rôzne hry, animácie, webové stránky a podobne.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 284x (948 B)
Aplikácia je vrátane zdrojových kódov v jazyku HTML

Článok pre vás napísal Jan Lupčík

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

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