Horizontální dvouúrovňové menu
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>
Štefka
Úno 5, 2011 v 10:40Ahoj, 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?