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 pátá – Sub menu

Sub menu

Protože jsme použili v nadpisu řádkové prvky, kvůli vycentrování na střed. Může se zdát, že tvorba sub menu může být problém. Není.

Dokonce ani problém není to, že nepoužíváme seznamy pro menu.

Seznam <ul><li> se používají v menu opravdu hodně dlouho a přitom jsem pro to nenašel žádný důvod. Naopak si myslím, že ani seznam pro menu nebyl nikdy určen. Prakticky v každém prohlížeči musíte odstranit odrážky a vznikají i jiné problémy, třeba právě s tím, že už se rovnou používají pro menu blokové prvky a tudíž automaticky padá možnost centrování nadpisů na střed stránky či střed menu.

Naštěstí se to dá obejít css příkazem, který si v našem případě nezapisujme:

li {
  display: inline;
}

Příkaz udělá s blokového prvku, prvek řádkoví.
Na druhou stranu je využití seznamů pochopitelné. Je možné, že s tím počítají i někteří roboti. Dále se menu může brát jako seznam odkazů. Pak by využití elementů <ul><li> dávalo smysl. Porušením božího desatera to však není a navíc všichni víme jak to je s dodržováním desatera… pokud jej vůbec znáte.

Seznamy v menu jsou dle mého přežitek, ale občas je používám také. Chybu neudělá tak ani tak. Jen pokud jej nepoužijete, je to o něco jednodušší, navíc si o trochu zkrátíte kód a práci.

Vložení sub menu

Je třeba upravit menu v index.html a přidat tam toto:

      <div id="menu">
       <div id="tlacitka">                   <!-- smazat -->
        <a href="index.html">Úvod</a>
        <span class="sub-menu">
          <a href="#">Služby</a>
          <span>
            <a href="#">Služba</a>
            <a href="#">Služba</a>
            <a href="#">Služba</a>
            <a href="#">Služba</a>
          </span>
        </span>
        <a href="#">Historie</a>
        <a href="#">Fotogalerie</a>
        <a href="#">Kontakt</a>
      </div>                                 <!-- smazat -->
     </div>

Pokud jsme neudělali dříve, tak můžeme smazat <div id=“tlacitka“> už jej nepotřebujeme.

Proč <span>? Span je řádkový element a my stále pracujeme s řádky. Pokud se podíváme na výsledek, tak bez css bude všechno pěkně dál v řádku.

Zkuste si tam dát <div> místo <span> a uvidíte ten bordel. Také by to asi šlo přestylovat, ale bylo by to zbytečně složitější.

Pokud jste to zkoušeli tak dát párkrát zpět. Dalším krokem je css. Přidáme toto:

.sub-menu span {
  position: absolute;
  top: 32px;
  margin-left: -104px;
  width: 130px;
  visibility: hidden;                   /* skrýt menu */
}
.sub-menu:hover span {
  visibility: visible;                  /* odhalit menu */
}

Proč jsme použili v pozicování margin-left? Protože klasický left by se centroval od kraje elementu a menu je přes celou obrazovku. Stačilo by změnit velikost okna prohlížeče a hned by nám sub menu uteklo.

Pokud počítáte s tím, že po vás bude někdo měnit délku slov, je na místě dát za každý odkaz v submenu <br>. Pořád se pracuje s řádky a to i v sub menu. Jen jsme zmenšili šířku sub menu na 130px.

Taktéž, pokud je jiná délka slov v menu, bude i pozicování krapet jiné.

To je vše.

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