Scisoft.cz - tvorba webových stránek

Tvorba webových stránek

Myslíme na Vaše návštevníky
zákazníky

Příklad CSS menu

Pomocí CSS lze obyčejné odkazy velmi snadno přeměnit na velmi efektní trojrozměrné buttony.
Menu založené na CSS má jedinou nevýhodu - hůře se adaptuje pro weby s velkým počtem stránek. Na webových stránkách časopisu EJE jsme tento problém řešili pomocí podmenu specifických pro určitý okruh stránek.



Jak je uděláno menu Scisoft?

Základem je nastavení barev tak, aby tlačítka vzbuzovala plastický dojem. Hypotetický směr osvětlení je z levého horního rohu. U vystupujícího tlačítka jsou proto levá a horní hrana světlejší než plocha tlačítka a ta je opět světlejší než pravá a horní hrana. Stisknuté tlačítko splývá s podkladem. Pokud by podklad nebyl tak tmavý, bylo by možné vzbudit dojem zamáčknutí nasvětlením pravé a dolní hrany tlačítka.


Příklad menu:

Tvorba www stránek

Tvorba webových stránek

Tvorba internetových stránek

Tvorba webu

HTML definice:
<p class="tlacitko">
  <a title="..." href="...">
    Tvorba www stránek
  </a>
</p>
<p class="tlacitko">
  <a title="..." href="...">
    Tvorba webových stránek
  </a>
</p>
<p class="tlacitko">
  <a title="..." href="...">
    Tvorba internetových stránek
  </a>
</p>
<p class="tlacitko">
  <a title="..." href="...">
   Tvorba webu
  </a>
</p>
CSS definice:
1. Je třeba definovat třídu tlačítka odstavec <p> vytvářející tlačítko a v něm obsaženou kotvu <a>.
Vlastnosti které bude mít odstavec <p> s vystupujícím tlačítkem:
  .tlacitko P {
    padding: 0px; 
    margin: 0px; 
    width: 118px;
  }
Společné vlastnosti defnované pro vystupující i zmáčknuté tlačítko:
  .tlacitko, .tlacitkoPressed {
    font-weight: bold;
    text-align: left;
    padding-bottom: 10px;
    margin-top: 0px;
    width: 118px;
  }
Vlastnosti odkazu ve vystupujícím tlačítku: (nastavení barev v border zajišťuje požadovaný plastický efekt)
  .tlacitko A, .tlacitko A:visited {
    padding: 2px 0 2px 4px;
    text-decoration: none;
    display: block;
    color: #224059;
    background-color: #ddeeff;
    border-top: 3px #e0e0ff solid;
    border-left: 3px #e0e0ff solid;
    border-bottom: 4px #31557f solid;
    border-right: 4px #31557f solid;
    width: 118px;
  }
Vlastnosti odkazu ve zmáčknutém tlačítku:
  .tlacitkoPressed A,
  .tlacitkoPressed A:visited {
    display: block;
    padding: 2px 0 2px 4px;
    text-decoration: none;
    background-color: #000077; 	
    border-top: 4px #000077 solid;
    border-left: 4px #000077 solid;
    border-bottom: 3px #000077 solid;
    border-right: 3px #000077 solid;
    color: #ffffff;
    width: 118px;
  }
Vlastnosti odkazu, nad kterým je kursor myši:
  .tlacitko A:hover,
  .tlacitkoPressed A:hover {
    color:  #ffffff;background-color: #7ea8cf; 	
    border-top: 3px #e0e0ff solid;
    border-left: 3px #e0e0ff solid;
    border-bottom: 4px #31557f solid;
    border-right: 4px #31557f solid;
    text-decoration: none;
  }
  .tlacitkoPressed A:hover {
    background-color: #000077;
    border-top: 4px #000077 solid;
    border-left: 4px #000077 solid;
    border-bottom: 3px #000077 solid;
    border-right: 3px #000077 solid;
  }

CSS pochopitelně neumí poznat, které tlačítko je zrovna zmáčknuté. Problém lze řešit následovně: