Úpravy menu - šablona SIRIUS
14. 6. 2013
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: black; border-width: 0 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