Zdroj: http://www.mojezaliby.cz/web-stranky/pekne-menu-pro-web-htmcss  •  Vydáno: 19.1.2013 20:14  •  Autor: Antonio

Pěkné menu pro web - htm/css

Pěkné menu pro web - htm/cssO rozbalovacím menu pomocí CSS nastylování tu už jednou řeč byla. Tentokrát se však k tematice vrátím podrobněji pomocí podrobného návodu i s vlastní ukázkou.

Hned úvodem začneme ukázkou horizontálního menu. Použil jsem celkem 3 html tagy a hlavně možností kaskádových stylů - CSS.

Menu je vytvořeno pomocí seznamu <ul> a jeho nastylováním přes CSS. Položky seznamu jsou odkazy obalené tagem <li>. Uvnitř tagu může být i další seznam, který má opět položky a položka může být opět dalším seznamem. Takto dostáváme víceúrovňové menu.

Dalším krokem je už jen nastylování jednotlivých tagů pomocí CSS. Ideální je navíc obalit celé menu vlastním identifikátorem pro lepší cílenost stylů.

Menu v ukázce je obaleno identifikátorem #ukazkamenu. Všimněte si hlavně stupňování zápisu pro jednotlivé úrovně. Základní menu je "ul" druhá úroveň je již "li ul" (seznam, který je položkou), třetí úroveň je již "li ul li ul" (seznam, který je položkou seznamu, který je sám položkou). Pseudotřída ":hover" je aktivována po najetí myši na prvek. Nižší úrovně jsou tedy skryty "display: none;", ale po najetí myší se atribut display mění a jdou již viditelné.

/* CSS Document */
#ukazkamenu {color: white; margin: 0 25px 170px 0; border-radius: 10px; background: black; width: 368px; float: left;}
#ukazkamenu a {cursor: pointer;}
#ukazkamenu ul { padding: 3px 4px; height: 25px;}
#ukazkamenu li {float: left; list-style-type:none; font-weight: bold; font-size: 13px; margin: 0 10px;}
#ukazkamenu li ul {display: none;}
#ukazkamenu li:hover ul {display: block; position: absolute; z-index: 10; padding: 12px; margin: 0 -35px;}
#ukazkamenu li:hover ul li {background: grey; float: none; text-align: center; padding: 8px 20px;}
#ukazkamenu li:hover ul li ul {display: none;}
#ukazkamenu li:hover ul li:hover ul {display: block; position: absolute; margin: -35px 34px;}
#ukazkamenu li:hover ul li:hover ul li{background: darkgrey;}



A zde, kdybste tápali, je i samotný html kód menu z ukázky. Úrovně jsou pro přehled odsazeny podle hloubky.

<div id="ukazkamenu">
<ul>
  <li><a>O mně</a></li>
  <li><a>Články</a>
    <ul>
      <li><a>2010</a></li>
      <li><a>2011</a></li>
      <li><a>2012</a>
        <ul>
          <li><a>Dnes</a></li>
          <li><a>Zítra</a></li>
          <li><a>Pozítří</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a>Galerie</a>
    <ul>
      <li><a>Hory</a></li>
      <li><a>Lesy</a></li>
      <li><a>Moře</a></li>
    </ul>
  </li>
  <li><a>Kontakt</a></li>
</ul>
</div>