Stylování menu

V této části si ukážeme, jak si můžeme naše menu nastylovat. Máme dvě možnosti. Můžeme si poupravit již nějaký existující vzhled, který nám Smartmenus nabízí, nebo si od základu vytvořit svůj vlastní.

Úprava již existujícího vzhledu

Jeden způsob jak si vytvořit vlastní vzhled menu je poupravit již nějaký existující. Smartmenus nám dává na výběr ze čtyř vzhledů: sm-blue, sm-clean, sm-mint a sm-simple. Pokud si chceme nějaký z těchto vzhledů poupravit, tak si na naši webovou stránku musíme připojit jeho CSS styly a ty potom upravit. CSS soubory všech vzhledů, které nám SmartMenus nabízí najdete v zazipovaném souboru, který se vám stáhne když si chcete smartmenus stáhnout. Pokud bychom chtěli například upravovat vzhled sm-blue, tak si na naši stránku musíme připojit soubor sm-blue.css. Myslím že dále není nic moc k vysvětlování, prostě si otevřete CSS soubor vzhledu, který chcete upravit a začnete s úpravami. Následující ukázka ukazuje upravený vzhled sm-blue.

Vytvoření vlastního vzhledu

Druhý způsob, jak si menu nastylovat je vytvořit si od základu vlastní vzhled. Pokud si vytváříme vlastní vzhled menu, tak musíme vždy začít s kódem, který ukazuje následující ukázka. Tento kód obsahuje media query, které zajišťuje, že se menu na větších obrazovkách nezobrazí v collapsible módu. Naše styly, které se mají aplikovat pro normální stav menu píšeme do tohoto media query a styly, které se mají zobrazit i pro collapsible stav píšeme mimo toto media query.

/* zde píšeme styly, které se aplikují i pro collapsible mód (zobrazení na mobilu) */

@media (min-width: 768px) { /* změněním této hodnoty změníme, kdy se přejde z collapsible stavu na normální stav */

    /* tyto vlastnosti zajišťují změnění collapsible stavu na normální (není doporučeno je měnit) */
    /* ---------- */
    .sm-muj-vzhled ul{position:absolute;width:12em;}
    .sm-muj-vzhled li{float:left;}
    .sm-muj-vzhled.sm-rtl li{float:right;}
    .sm-muj-vzhled ul li,.sm-muj-vzhled.sm-rtl ul li,.sm-muj-vzhled.sm-vertical li{float:none;}
    .sm-muj-vzhled a{white-space:nowrap;}
    .sm-muj-vzhled ul a,.sm-muj-vzhled.sm-vertical a{white-space:normal;}
    .sm-muj-vzhled .sm-nowrap > li > a,.sm-muj-vzhled .sm-nowrap > li > :not(ul) a{white-space:nowrap;}
    /* ---------- */

    /* zde píšeme styly, které se aplikují jen pro normální stav (zobrazení pro počítač) */
}

Poté co máme připravený základní kód pro stylování menu, můžeme se pustit do stylování. Následující ukázka ukazuje, jak bychom mohli menu například nastylovat. Občas je při stylování potřeba otevřít si vývojářské nástroje a podívat se co za elementy vlastně stylovat.

.sm-custom {
    font-size: 1.6rem;
}

/* ul */
.sm-custom, .sm-custom ul {
    background-color: #c03861;
    border-radius: 5px;
    padding: .5rem;
}

/* li */
.sm-custom li:not(:last-child), .sm-custom ul li:not(:last-child) {
    margin-bottom: .5rem;
}

/* link */
.sm-custom a:link, .sm-custom a:visited {
    color: #fff;
    background-color: #912747;
    border-radius: 5px;
    text-decoration: none;
    
    transition: all .2s;

    padding: 1rem 1.5rem;

    position: relative;
}
.sm-custom a:hover {
    background-color: #a12e50;
}

/* arrow */
.sm-custom .sub-arrow {
    display: inline-block;
    width: 1rem;
    margin-left: .8rem;

    position: relative;
}
.sm-custom .sub-arrow::before, .sm-custom .sub-arrow::after {
    content: "";
    display: inline-block;

    background-color: #c43560;
    border-radius: 2px;

    width: .3rem;
    height: 1rem;
    position: absolute;
    bottom: 50%;
    left: 50%;

    transform-origin: bottom;
}
.sm-custom .sub-arrow::before {
    transform: translateX(-50%) rotate(45deg);
}
.sm-custom .sub-arrow::after {
    transform: translateX(-50%) rotate(-45deg);
}

@media (min-width: 48em) {
    /* ---------- */
    .sm-custom ul{position:absolute;width:12em;}
    .sm-custom li{float:left;}
    .sm-custom.sm-rtl li{float:right;}
    .sm-custom ul li,.sm-custom.sm-rtl ul li,.sm-custom.sm-vertical li{float:none;}
    .sm-custom a{white-space:nowrap;}
    .sm-custom ul a,.sm-custom.sm-vertical a{white-space:normal;}
    .sm-custom .sm-nowrap > li > a,.sm-custom .sm-nowrap > li > :not(ul) a{white-space:nowrap;}
    /* ---------- */

    /* li */
    .sm-custom > li {
        margin-right: .5rem;
    }
    .sm-custom li:not(:last-child) {
        margin-bottom: 0;
    }

    /* arrow */
    .sm-custom .sub-arrow::before, .sm-custom .sub-arrow::after {
        transform-origin: left;
    }
    /* other-level arrow */
    .sm-custom .sub-arrow::before {
        transform: translateX(-50%) translateY(.15rem) rotate(45deg);
    }
    .sm-custom .sub-arrow::after {
        transform: translateX(-50%) translateY(-.15rem) rotate(-45deg);
    }
    /* first-level arrow */
    .sm-custom > li > a .sub-arrow::before, .sm-custom > li > a .sub-arrow::after {
        transform-origin: bottom;
    }
    .sm-custom > li > a .sub-arrow::before {
        transform: translateX(-50%) rotate(45deg);
    }
    .sm-custom > li > a .sub-arrow::after {
        
        transform: translateX(-50%) rotate(-45deg);
    }
}

V této části jste se dozvěděli, jak si své menu můžete nastylovat. V další části si ukážeme, jak pro menu vytvořit přepínací tlačítko.