SmartMenus Tutoriál

Vytvoření přepínacího tlačítka

V této části si ukážeme, jak pro menu vytvořit přepínací tlačítko. K jeho vytvoření SmartMenus plugin nepoužijeme a dokonce k tomu nebudeme potřebovat ani žádný JavaScript, bude fungovat i bez něj.

Checkbox hack

Pro vytvoření přepínacího tlačítka nebudeme potřebovat žádný JavaScript. Namísto něj použijeme checkbox, pomocí kterého budeme stylovat ostatní elementy, když bude označený a menu by tedy mělo být otevřené. K tomu využijeme pseudo třídu :checked a různe CSS kombinátory (třeba + nebo ~) pro výběr elementů. Následující ukázka stylování elementu, když je checkbox označený ukazuje. Když checkbox není označený, tak má box modrou barvu, a když je označený tak má fialovou barvu.

<style>
    .button {
        display: inline-block;
        font-size: 1.6rem;
        font-weight: bold;

        padding: .5rem 1rem;

        color: #fff;
        background-color: #0f5f5c;
        border-radius: 5px;

        cursor: pointer;
    }
    .button:hover { background-color: #147a77; }

    .box {
        width: 8rem;
        height: 4rem;

        margin-top: 1rem;

        background-color: royalblue;
    }

    /* skrytí checkboxu */
    .checkbox { display: none; }
    /* použití + kombinátoru k vybrání sousedního elementu s třídou box */
    .checkbox:checked + .box {
        /* když je checkbox označený, tak bude mít box fialovou barvu */
        background-color: rebeccapurple;
    }
</style>

<!-- label pro checkbox bude sloužit jako tlačítko -->
<label class="button" for="tlacitko">tlačítko</label>
<input class="checkbox" type="checkbox" id="tlacitko">
<div class="box"></div>
index.html

Nastylování přepínacího tlačítka

Občas můžeme chtít, aby naše přepínací tlačítko vypadalo jinak, když je menu otevřené a když je zavřené. K tomu můžeme také použít :checked pseudo třídu a různé CSS kombinátory. Následující ukázka ukazuje, jak bychom například mohli přepínací tlačítko nastylovat. Tlačítko obsahuje hamburger ikonu a když se checkbox označí (když se menu otevře), tak se tato ikona změní ve křížek.

<style>
    /* nastylování tlačítka */
    .button {
        display: block;

        width: 3rem;
        height: 3rem;

        background-color: #0f5f5c;
        border-radius: 5px;

        cursor: pointer;

        position: relative;
    }
    /* nastylování ikony tlačítka (prostřední část) */
    .button__icon {
        /* umístění ikony do středu tlačítka */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        /* nastavení animace pro přepínání tlačítka */
        transition: all .3s;

        width: 70%;
        height: .2rem;

        background-color: #fff;
    }
    /* nastylování ikony (horní a dolní část) */
    .button__icon::before, .button__icon::after {
        content: ""; /* zobrazení pseudo elementu ::before a ::after */
        display: block;
        position: absolute;
        left: 0;

        /* nastavení animace pro přepínání tlačítka */
        transition: all .3s;

        width: 100%;
        height: .2rem;

        background-color: #fff;
    }
    /* nastylování ikony (horní část) */
    .button__icon::before {
        /* posunutí ::before elementu nahoru */
        bottom: .8rem;
    }
    /* nastylování ikony (dolní část) */
    .button__icon::after {
        /* posunutí ::after elementu dolů */
        top: .8rem;
    }

    /* skrytí checkboxu */
    .checkbox { display: none; }

    /* když je checkbox označený, prostřední část ikony zmizí */
    .checkbox:checked + .button .button__icon {
        background-color: transparent;
    }
    /* když je checkbox označený, horní část ikony sjede dolů a natočí se */
    .checkbox:checked + .button .button__icon::before {
        transform: translateY(.8rem) rotate(45deg);
    }
    /* když je checkbox označený, dolní část ikony vyjede nahoru a natočí se */
    .checkbox:checked + .button .button__icon::after {
        transform: translateY(-.8rem) rotate(-45deg);
    }
</style>
<input class="checkbox" type="checkbox" id="tlacitko">
<label class="button" for="tlacitko"><span class="button__icon"></span></label>
index.html

Skrytí/zobrazení menu při stisknutí tlačítka

Poté co máme nastylované samotné přepínací tlačítko, tak můžeme zajistit, že se při jeho stisknutí zobrazí/skryje menu. Opět použijeme pseudo třídu :checked a CSS kombinátory. V následující ukázce se přepínací tlačítko objeví jen v collapsible módu, jinak bude menu stále viditelné. Abyste si mohli menu v ukázce zkusit pomocí přepínacího tlačítka zobrazit a skrýt, tak pravděpodobně budete muset zmenšit velikost okna, pokud máte velkou obrazovku.

<style>
    /* ... ostatní styly tu nejsou zobrazeny ... */

    /* menu je skryto */
    .sm { display: none; }
    /* při označení checkboxu se menu zobrazí */
    .checkbox:checked ~ .sm {
        display: block;
    }

    @media (min-width: 48em) {
        /* ... ostatní styly tu nejsou zobrazeny ... */

        /* v normálním stavu (zobrazení pro PC) se přepínací tlačítko nezobrazí */
        .button {
            display: none;
        }

        /* v normálním stavu (zobrazení pro PC) se menu zobrazí vždy */
        .sm {
            display: block;
        }
    }
</style>
<input class="checkbox" type="checkbox" id="tlacitko">
<label class="button" for="tlacitko"><span class="button__icon"></span></label>

<ul id="moje-menu" class="sm sm-muj-vzhled">
    <li><a href="http://css-layouty.4fan.cz/">první odkaz</a></li>
    <li><a href="#">rozbalovací nabídka</a>
        <ul>
            <li><a href="http://pole-v-js.4fan.cz/">první odkaz</a></li>
            <li><a href="./">druhý odkaz</a></li>
            <li><a href="http://pis-vsemi-deseti.4fan.cz/">třetí odkaz</a></li>
        </ul>
    </li>
    <li><a href="https://jirkasa.github.io/javascript-promisy/">druhý odkaz</a></li>
</ul>

<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.smartmenus.min.js"></script>
<script>
    $('#moje-menu').smartmenus();
</script>
index.html

V této části jsme si ukázali, jak můžeme pro menu vytvořit přepínací tlačítko. Dokonce k tomu ani není potřeba žádný JavaScript. V další části si vysvětlíme co jsou to eventy a metody. To je již poslední část tohoto tutoriálu.

pokračovat na další část

Části Tutoriálu