Horizontální dvouúrovňové obrázkové menu
Klasické horizontální menu s obrázkovým pozadím. Je třeba dát pozor na formulářový prvek SELECT, který dělá těmto menu problémy – v IE se vnutí do popředí a není vidět obsah podmenu, ve Firefoxu se vnutí do popředí pouze tehdy, je-li rozbalen. Tuto chybu nelze rozumně eliminovat, protože řada prohlížečů (typicky Mozilla, Opera) kreslí formulářové prvky po svém. Nezbývá tedy, než si dát při tvorbě na tuto chybu pozor.
Zde si můžete prohlédnout výsledek. Pro správnou funkci v MSIE je třeba do kořenového adresáře stránky umístit soubor hovermenu.htc.
Toto řešení publikovali Patrick Griffiths a Dan Webb. Bližší popis najdete v článku Suckerfish dropdowns
CSS
.menu
{
padding: 0;
margin: 0;
}
.menu a
{
text-decoration: none;
color: #333;
display: block;
width: 100%;
text-align: center;
}
.menu ul, .menu li
{
list-style-type: none;
margin: 0;
padding: 0 .5em;
}
ul.uroven1 li.polozka1
{
float: left;
position: relative;
font-weight: bold;
height: 50px !important;
line-height: 50px;
background: #fff url(’86-1.png‘) 0 0 repeat-x;
padding: 0 .5em;
height: 1em;
_width: 1px; /* IE */
}
ul.uroven2
{
position: absolute;
line-height: 100%;
left: 0;
top: 50px;
width: 120px;
background: #fff url(’86-2.png‘) 0 0 repeat-y;
visibility: hidden;
padding: .3em .5em;
border-bottom: solid #069 10px;
}
ul.uroven2 img
{
border: solid #368 2px;
}
ul.uroven2 li.polozka2 a
{
font-weight: normal;
text-align: left;
padding: 0 .5em .1em;
margin: 0 -.5em;
}
.menu a:hover
{
text-decoration: underline;
}
ul.uroven2 li.polozka2 a:hover
{
color: #d44;
background: #eee;
}
ul.uroven1 li.polozka1
{
behavior: url(hovermenu.htc);
}
ul.uroven1 li.polozka1:hover,
ul.uroven1 li.polozka1Hover
{
background: #fff url(’86-1.png‘) 0 -60px repeat-x;
}
ul.uroven1 li.polozka1Hover ul.uroven2,
ul.uroven1 li.polozka1:hover ul.uroven2
{
visibility: visible;
}
XHTML
<html>
<body>
<ul class=“menu uroven1″>
<li class=“polozka1″>
<a href=““>Textil</a>
<ul class=“menu uroven2″>
<li class=“polozka2″><a href=““>oděvy</a></li>
<li class=“polozka2″><a href=““>pletené</a></li>
<li class=“polozka2″><a href=““>tkané</a></li>
</ul>
</li>
<li class=“polozka1″>
<a href=““>Elektronika</a>
<ul class=“menu uroven2″>
<li class=“polozka2″><a href=““>hi-fi</a></li>
<li class=“polozka2″><a href=““>bílá technika</a></li>
<li class=“polozka2″><a href=““>počítače</a></li>
</ul>
</li>
<li class=“polozka1″>
<a href=““>Sport</a>
<ul class=“menu uroven2″>
<li class=“polozka2″><a href=““>batohy</a></li>
<li class=“polozka2″><a href=““>boty</a></li>
<li class=“polozka2″><a href=““>zimní výbava</a></li>
</ul>
</li>
<li class=“cl“></li>
</ul>
<form action=““>
<select name=“sample“>
<option value=“0″>—</option>
<option value=“1″>lorem</option>
<option value=“2″>ipsum</option>
</select>
</form>
</body>
</html>
Mohlo by vás také zajímat
-
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024 -
Jak se chránit před podvody na internetu – část 1
8. října 2024
Nejnovější
-
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024 -
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024 -
Chcete jedinečnou doménu? Objevte koncovky FOOD, MEME a MUSIC!
7. listopadu 2024 -
OpenAI představilo novou funkci ChatGPT Search
6. listopadu 2024