V několika kapitolách si ukážeme, jak si můžete vytvořit Vaši první jednoduchou, ale moderní webovou šablonu za použití jazyků html a css.

Kapitola šestá – Animace a vzhled menu

Vzhled

V první řadě je určitě vhodné, aby menu na sebe upozornilo. Nejčastěji tak, že vybočuje s designu webu například jiným písmem, tučným textem, výraznou či odlišnou barvou, stínem textu anebo nějakým efektem tlačítka.

Upravíme menu prozatím jen za pomoci css.

Najdeme si část, kterou jsme věnovali menu a přepíšeme (doplníme, upravíme) ji do této podoby:

#menu a {
  color: rgb(220,220,220);                   
  text-decoration: none;                     
  background: rgb(185,0,0);
  font-size: 20px;                            
  padding: 2px 10px;                          
  margin-left: -4px;
  padding: 6px 14px;
  font-weight: bold; 
  font-family: arial;
  text-shadow: 1px 1px 1px rgb(50,50,50);
}
.sub-menu span {
  position: absolute;
  top: 38px;
  margin-left: -114px;
  width: 130px;
  visibility: hidden;                      /* skrýt menu */
  line-height: 32px;                       /* výška řádku */
}

Musela se upravit i výška řádku v sub menu, protože jsme upravili vnitřní okraje, ale výška řádku zůstala stejná.

Menu už vypadá zajímavěji. Díky šedé je výraznější… možná až moc.  Necháme to.

Animace tlačítka

Sice se nejedná o typické tlačítko, ale i určitý efekt stisknutí tu máme, tak je načase jej modernizovat o plynulejší efekt.

Přídáme do css k #menu a .sub-menu span vlastnosti:

#menu a {
  transition-duration: 0.8s;                /* doba prolnutí */
} 

To samé přidáme i do sub menu a dáme větší prodlevu s novou vlastností:

.sub-menu span {
  position: absolute;
  top: 38px;
  margin-left: -114px;
  width: 130px;
  visibility: hidden;                      
  line-height: 32px;
  opacity: 0;                         /* průhlednost menu */
  transition-duration: 1.2s;
}
.sub-menu:hover span {
  visibility: visible;
  opacity: 1;
}

Jde o to, že vlastnost visibilityse nedá animovat za pomoci css3 vlastnosti transition-duration. Naštěstí vlastnost opacityano. Pokud bychom použili jen opacity, proměnu by submenu nezmizelo, ale jen se zneviditelnilo a dál by tak nějak překáželo a reagovalo na myš uživatele či překrývalo jiné elementy.

Soubory z lekce ke stažení: lekce-6.zip