ZONER Cookies

Vážený návštěvníku, potvrzením pomocí tlačítka OK udělujete souhlas nám a našim partnerům s použitím cookies pro nezbytné, analytické a marketingové účely na tomto zařízení. Volbou Nastavení můžete sami určit, jaké skupiny cookies je možné zpracovávat, popřípadě jejich zpracování úplně zakázat. Ukládání nezbytných cookies probíhá vždy, a to v zájmu zachování funkčnosti webové prezentace.

V tomto okně můžete zvolit kategorie cookies v souladu s vlastními preferencemi.

Nezbytné

Tyto cookies zajišťují bezchybný provoz našich webových stránek. Umožňují například vložení služby do objednávky, ukládání dat s ohledem na bezpečnost webu, přihlašování k webu a podobně. Nezbytné cookies nelze deaktivovat, jelikož by došlo k narušení správného fungování webu.

Preferenční

Preferenční cookies umožňují, aby si webová stránka zapamatovala informace, které mění, jak se webová stránka chová nebo jak vypadá. Je to například preferovaný jazyk nebo region, kde se nacházíte.

Analytické

Díky nástrojům jakými jsou například Google analytics můžeme sledovat, jak stránky používáte, z jakých zdrojů a technologií. Na základě těchto dat můžeme web neustále vylepšovat, aby byl pro vás co nejpřívětivější. Veškerá data jsou anonymizována, konkrétní uživatele tedy identifikovat nemůžeme.

Marketingové

Společně s nástroji třetích stran můžeme zobrazovat vámi preferované reklamy v partnerských sítích přesně dle vašich zájmů. V případě nesouhlasu je vysoce pravděpodobné, že vaše zájmy a preference nebudou zohledněny a bude se vám reklama zobrazovat plošně. Veškeré profily vašich zájmů jsou pseudonymizované, díky tomu není možná bezprostřední identifikace vaší osoby.

Horizontální dvouúrovňové menu

2. září 2005
•
Miroslav Kučera

Obsah

  1. CSS
  2. XHTML

Související

Toto menu je vhodné pro křížovou navigaci, podobně jako klasické hover-menu. Je ale výhodnější na webu, kde jen přepínáme mezi podkategoriemi, nemusíme pořád otevírat ‚roletky‘. Zároveň ale toto menu reaguje na :hover, je tedy možné se z libovolného místa webu dostat kamkoli.

Pro správnou funkci v MSIE je třeba do kořenového adresáře stránky umístit soubor hover.htc.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Anton Andreasson. Bližší popis najdete v článku Horizontal in horizontal.

CSS

.cl
{
clear: both;
}
ul, li
{
list-style: none;
margin: 0;
padding: 0;
}
ul.uroven1
{
font-weight: bold;
position: relative;
height: 3.4em;
width: 100%;
font-family: sans-serif;
font-size: 15px;
overflow: hidden; /* IE, opera */
}
ul.uroven2
{
position: absolute;
left: 0;
top: 1.5em;
display: block;
visibility: hidden;
width: 5000%; /* IE, opera */
border-top: solid #acf .2em;
background: #68a;
padding: .13em 0;
}
li
{
behavior: url(hovermenu.htc);
}
li.uroven1
{
float: left;
margin: 0 .5em;
}
li.uroven2
{
float: left;
margin: .2em .5em;
}
li.uroven1 a
{
display: block;
color: #226;
text-decoration: none;
padding: .2em .5em;
border: solid #fca .2em;
border-bottom: none;
}
li.uroven2 a
{
padding: 0 .2em;
border: none;
}
li#aktivni a
{
border-color: #9bd;
background: #acf;
}
li#aktivni li.uroven2 a
{
background: transparent;
}
li#aktivni ul
{
visibility: visible;
}
/* hover efekty */
li.uroven1#aktivniHover ul, li.uroven1#aktivni:hover ul
{
visibility: visible;
z-index: 1;
}
li.uroven1#aktivni a:hover
{
border-color: #fca;
}
li.uroven1Hover ul.uroven2,li.uroven1:hover ul.uroven2
{
visibility: visible;
z-index: 2;
}
li.uroven2 a:hover,li.uroven1#aktivni li.uroven2 a:hover
{
color: #eee;
}

XHTML

<html>
<body>
<ul id=“menu“ class=“uroven1″>
<li class=“uroven1″ id=“aktivni“><a href=““>Pevné disky</a>
<ul class=“uroven2″>
<li class=“uroven2″><a href=““>5400 rpm</a></li>
<li class=“uroven2″><a href=““>7200 rpm</a></li>
<li class=“uroven2″><a href=““>10000 rpm</a></li>
</ul>
</li>
<li class=“uroven1″><a href=““>Optická média</a>
<ul class=“uroven2″>
<li class=“uroven2″><a href=““>CD-R</a></li>
<li class=“uroven2″><a href=““>CD-RW</a></li>
<li class=“uroven2″><a href=““>DVD-R</a></li>
<li class=“uroven2″><a href=““>DVD+R</a></li>
<li class=“uroven2″><a href=““>DVD-RW</a></li>
<li class=“uroven2″><a href=““>DVD+RW</a></li>
</ul>
</li>
<li class=“uroven1″><a href=““>Flash paměti</a>
<ul class=“uroven2″>
<li class=“uroven2″><a href=““>Flashdisky</a></li>
<li class=“uroven2″><a href=““>Paměťové karty</a></li>
<li class=“uroven2″><a href=““>MP3 přehrávače</a></li>
</ul>
</li>
<li class=“uroven1″><a href=““>Příslušenství</a>
<ul class=“uroven2″>
<li class=“uroven2″><a href=““>Kabely</a></li>
<li class=“uroven2″><a href=““>Redukce</a></li>
<li class=“uroven2″><a href=““>Rámečky</a></li>
<li class=“uroven2″><a href=““>Chladiče</a></li>
<li class=“uroven2″><a href=““>Sluchátka</a></li>
</ul>
</li>
<li class=“cl“></li>
</ul>
</body>
</html>

Předchozí článek EJB 2.x - Entity Beans (callback metódy a životný cyklus)
Další článek Dotnetnuke
Štítky: Články, Pro CSS: menu
Miroslav Kučera

Mohlo by vás také zajímat

Nejnovější

1 komentář

  1. Štefka

    Úno 5, 2011 v 10:40

    Ahoj, nejde mi pak zavolat tu stranku. Pouzivam jiz na jinych strankach uspesne konstrukci v souboru index.php ktera vklada vsechny stranky do tehle podle toho co se v menu vybere.

    ve spojeni stimto menu ale nefunguje. Ani moc nerozumim jak funguje ta aktivni polozka :-(
    muzete mi pomoci prosim?

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *