0 Kč s DPH

Úpravy menu

Zde uvádíme jednoduché CSS zápisy, které po vložení do editoru Vlastního CSS stylu mohou kompletně proměnit vzhled vašeho menu a dát vašim stránkám osobitý styl. Tučným písmem jsou vždy uvedeny hodnoty, které můžete měnit.

Pozadí menu

Následující příklad je pro modrou šablonu, kde změníme proužek přes celou šířku stránky (pozadí menu) na červenou barvu.

Pokud chcete změnit barvu proužku na červenou, tak do editoru vložte tento zápis:

#menu {background-color: red;}

Pozadí submenu

Určitě budete chtít nastavit i vlastní barvu pozadí submenu. Toho dosáhnete několika řádky zápisu do vlastního CSS stylu.

Barva seznamu <ul> v submenu

Výchozí stav zelené šablony SIRIUS je vidět na obrázku 1. Po přidání níže uvedeného zápisu se pozadí submenu změní jako na obrázku 2 (barvíme je na červeno - red).

.main-menu ul ul {background-color: red;}

Barva odkazu v submenu

Následně je třeba upravit barvu pozadí položky. Po vložení následujícího CSS zápisu bude submenu vypadat jako na obrázku 3.

.main-menu ul ul li a {background-color: transparent;}

Zápisem vypínáme pozadí odkazu (stane se průhledným), bude vidět pouze červené pozadí seznamu.

Hranice mezi odkazy submenu (dělicí čára)

Posledním krokem, který je vidět na obrázku 4, je změna barvy (nebo i typu) hraniční čáry mezi jednotlivými odkazy submenu.

.main-menu ul ul li {border-bottom: 1px dashed white;}

Uvedený zápis pouze mění barvu čáry na bílou. Můžete také změnit přerušovanou čáru na plnou (slovo dashed nahraďte slovem solid). Tloušťku čáry změníte obvykle zadáním v pixelech. Pokud uvedete nulovou hodnotu, čára se nezobrazí.

Podtržení v menu - aktuální stránka

U modré šablony z předhozího příkladu ještě zůstaneme. Každá aktivní stránka je v menu zvýrazněna podtržením. Jeho barvu a tloušťku můžete snadno změnit.

Tento zápis změní barvu podtržení aktivní položky na fialovou a jeho tloušťku změní na 2px (výchozí hodnota je 5px):

.main-menu ul li .active {
border-color: blackborder-width0 0 2px;}

Efekt při najetí na položku menu

Nejdřív vypneme výchozí podtržení při najetí myši a následně zapneme podbavení černou a změníme barvu textu na bílou.

.main-menu ul li a:hover {
border-width: 0; background-color: black;  color: yellow;}

Efekt při najetí na položku submenu

Tímto zápisem stylujeme položky submenu, konkrétně zvětšíme písmo na 20px a ztučníme je při najetí myši.

.main-menu ul ul li a:hover {font-size: 20px;  font-weight: bold;}

Experimentujte s dalšími CSS vlastnostmi, zejména zkuste změnit i pozadí (vlastnost background), obdobně jako u ostatních uvedených příkladů s pozadím.

Úpravy textu

Texty obecně lze pomocí CSS měnit na mnoho způsobů. K základním určitě patří velikost a typ písma, kurzíva, tučné písmo, podtržení a z těch méně častých například kapitálky. Další vlastnosti viz naše CSS základy.

Odkaz v hlavním menu

Zde si ukážeme, jak nastavit všechna písmena velká, bez nutnosti je upravovat v administraci. Pro názornost si je můžeme ještě ztučnit:

Aby vaše odkazy v menu vypadaly jako na obrázku, vložte do editoru následující kód:

.main-menu ul li a {text-transform: uppercase; font-weight: bold;}

Odkaz v submenu

Podobným způsobem lze stylovat i odkazy v submenu, stačí přidat do vlastních stylů tento zápis:

.main-menu ul ul li a {font-size: 20px;  font-weight: bold;}

Vladimír Souš
admin(zav)zoner.cz

Přidat komentář

Přehled komentářů

  • Úpravy menu

    30.5.2016 19:48:43 | Zdenka Sekená

    Dobrý den,
    přesto že jsem postupovala dle Vašeho návodu, nepodařilo se mi menu upravit úplně podle představ. Nadále mi v Menu i v Submenu "prosvítá" původní barva. Děkuji za odpověď. Zdenka Sekená

    Odpovědět

  • Re: Úprava menu

    1.6.2016 15:47:42 | tým inPage

    Dobrý den Zdenko,
    můžete nám prosím napsat o jaký web jde, abychom vám mohli přímo poradit v čem je chyba?

    Odpovědět

  • Úprava menu

    2.6.2016 20:21:44 | Zdenka Sekená

    Dobrý den,
    jde o stránky www.kosmetickysalonbrno.com. S pozdravem Z.S.

    Odpovědět

  • RE: Úprava menu

    3.6.2016 13:58:36 | tým inPage

    Dobrý den, na stránkách zůstala původní růžová při najetí myší. Upravte si ještě tuto část kódu šablony:
    .main-menu ul li.sublinks a:hover {
    background-color: #ff729d;
    border-color: #ff729d;
    }
    .main-menu ul li.sublinks a.active:hover, .main-menu li.sublinks:hover > a {
    background-color: #ff729d;
    }

    Odpovědět

  • Úprava menu

    6.6.2016 22:21:23 | Zdenka Sekená

    Dobrý den,
    velice Vám děkuji za nápovědu, barvu submenu jsem už nastavila, přesto mi zůstává původní růžová v menu při najetí myší v podtržení co jsem nastavila jako bílé,( např. o nás atd. ) a "šipky" v submenu taky, chtěla bych je bílé. Domnívám se, že tato část růžové není vypnutá, prohlížela jsem návody, ale nenašla jsem, ....nemohu to zatím dohledat jak na to.
    S pozdravem Zdenka Sekená

    Odpovědět

  • RE: Úprava menu

    7.6.2016 8:19:59 | tým inPage

    Dobrý den,
    podtržení v menu při najetí myší upravíte následovně:
    .main-menu ul li .active:hover, .main-menu ul li .active, .main-menu ul li a:hover {
    border-color: white;
    }

    A šipky takto:
    .main-menu ul ul li a::before, .main-menu ul li.sublinks ul li a.active::before {
    border-left: 4px solid white;
    }

    Odpovědět

inPage.cz - webové stránky, doména a webhosting snadno.