0 Kč s DPH

Úpravy vzhledu menu

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;}

změna barvy menu

 

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/"); }

obrázkové pozadí menu

 

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; }

změna pozadí submenu

 

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; }

celkova zmena menu

Na tomto obrázku je zobrazena celková změna menu, kterou jsme právě provedli.
 

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.

Kateřina Kolouchová
Webdesigner
admin(zav)zoner.cz

Přidat komentář

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