Vertikální dvouúrovňové obrázkové menu 2
Klasické vertiká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. Nezbývá, 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.
Podobné ř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
{
width: 150px;
}
ul.uroven1 li.polozka1
{
position: relative;
font-weight: bold;
height: 50px !important;
line-height: 50px;
background: #fff url(’88-1.png‘) 0 0 repeat-y;
padding: 0 .5em;
height: 1em;
border-bottom: solid #eee 2px;
}
ul.uroven2
{
position: absolute;
line-height: 100%;
left: 149px;
top: 0;
width: 150px;
background: #fff url(’88-2.png‘) 0 0 repeat-y;
visibility: hidden;
padding: .3em .5em;
}
ul.uroven2 img
{
border: solid #368 2px;
}
ul.uroven2 li.polozka2 a
{
font-weight: bold;
text-align: left;
height: 30px;
line-height: 30px;
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(’88-1.png‘) -150px 0 repeat-y;
}
ul.uroven1 li.polozka1Hover ul.uroven2,
ul.uroven1 li.polozka1:hover ul.uroven2
{
visibility: visible;
}
form
{
position: relative;
left: 160px;
top: -150px;
}
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
-
Responzivní design: Proč by ho neměl ignorovat žádný vývojář?
27. listopadu 2023 -
Proč je důležité tvořit obsah na váš web?
29. srpna 2024 -
Novinky ze světa domén: Co nás čeká v blízké budoucnosti?
3. července 2025 -
Nejnovější
-
Počítač v kapse: Android 16 připravuje průlomový Desktop Mode
8. července 2025 -
Novinky ze světa domén: Co nás čeká v blízké budoucnosti?
3. července 2025 -
E-mail je tu s námi už 50 let, půjde do penze?
30. června 2025 -
Budoucnost HTTPS a SSL certifikátů
25. června 2025
Marty
Říj 3, 2009 v 23:19V IE 6 nepoužitelné