Úpravy vzhledu menu - ERIS

5. 3. 2014

V tomto článku vám ukážeme, jak si sami a jednoduše můžete změnit menu u šablony Eris. Stačí znát základy CSS.  Návod obsahuje všechny části a možnosti menu. Drobná změna jako je pozadí menu, dokáže změnit a ozvláštnit celé stránky. Vyzkoušejte to.

Změna barvy pozadí

Vložte do vlastního stylu CSS následující kód:

#main-menu {background-color: #3E92C9;}

Obrázkové pozadí menu

Použít můžete vlastní obrázek, který se bude nekonečně opakovat po celé šířce menu. Další možností je využít jeden z online generátorů pozadí i barevných přechodů.

#main-menu {background-image: url("/obrazek/3/pozadi-203/"); }

Pozadí submenu

Submenu je rolovací část menu, v základu je vždy tmavě šedé, nebo černé. Mezi odkazy je jemná dělící linka border-top, tu jsme v tomto příkladu přepsali na růžovou. Použijte kód:

#main-menu ul ul > li > a{ background: #202020; border-top: 1px solid #454545; }

Efekt při najetí na položku

Při přejíždění myší po menu se vybraná část barevně změní. Tento efetk upravíme následujícím kódem, do kterého jsme připsali i barvu písma:

#main-menu > ul > li > a:hover { background: #1A2E4C; color: #ffffff;}

Efekt při najetí na položku submenu

Změna efektu po přejetí myší na položku v submenu i s kódem pro změnu barvy písma:

#main-menu ul ul > li > a:hover {background: #1A2E4C; color: #ffffff;}

Hlavní položka submenu

Položka hlavního menu, ze kterého se roluje submenu se upravuje kódem:

#main-menu > ul > li:hover > a { background: #1A2E4C; color: #ffffff; }

Aktivní položka menu i submenu

Stránka, kterou právě prohlížíte se v menu zvýrazňuje. Jde o světle modré pozadí položky, které je vidět u prvních dvou obrázků, tohto návodu. Označuje se jako class .active, tuto třídu můžete změnit pro hlavní menu i submenu:

Změna barvy #main-menu ul > li a.active { background:#3965A9; color: #ffffff; } Změna při najetí na aktivní položku #main-menu ul > li .active:hover { background:#1A2E4C; color: #000000; }

Změna barvy položky submenu #main-menu ul ul > li.active a { color: #3965A9; background-color: #202020; } Změna při najetí na aktivní položku v submenu #main-menu ul ul > li.active a:hover { color: #ffffff; background-color: #1A2E4C; }

U tohoto menu můžete měnit i další CSS vlastnosti, například velikost písma
a podtržení odkazů.

Případné nejasnosti či dotazy nám pište do komentářů tady pod článkem.