Vertikální vysouvací menu
Vertikální vysouvací menu.
Je důležité, aby MSIE nebyl v quirks módu, jinak se budou tlačítka zobrazovat užší než v ostatních prohlížečích. Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Russ Weakley. Bližší popis najdete v článku Taming the ‚Taming lists‘ model.
CSS
#tlacitko
{
width: 160px;
padding: 0;
margin: 0;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
font-size: 95%;
}
#tlacitko ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#tlacitko li
{
border-top: 1px solid #fff;
margin: 0;
}
#tlacitko li a
{
display: block;
padding: 5px;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #tlacitko li a { width: auto; }
#tlacitko li a:hover
{
background-color: #2586d7;
color: #fff;
}
#tlacitko li
{
border-top: 1px solid #fff;
margin: 0;
}
#tlacitko li li a
{
display: block;
padding: 3px 3px 3px 30px;
background-color: #69C;
color: #fff;
text-decoration: none;
width: 100%;
}
#tlacitko li li a:hover
{
background-color: #2586d7;
color: #fff;
}
XHTML
<html>
<body>
<div id=“tlacitko“>
<ul>
<li><a href=“#“>Hlavní odkaz 1</a></li>
<li><a href=“#“>Hlavní odkaz 2</a></li>
<li><a href=“#“>Hlavní odkaz 3</a>
<ul>
<li><a href=“#“>Pododkaz 31</a></li>
<li><a href=“#“>Pododkaz 32</a></li>
<li><a href=“#“>Pododkaz 33</a></li>
<li><a href=“#“>Pododkaz 34</a></li>
</ul>
</li>
<li><a href=“#“>Hlavní odkaz 4</a></li>
</ul>
</div>
</body>
</html>
Mohlo by vás také zajímat
-
Od iPhonu po Android: Ultra HDR přináší nový standard fotografií
1. listopadu 2024 -
Vaše pošta může být špatně nastavena – svěřte ji profesionálům
13. července 2023 -
Responzivní design: Proč by ho neměl ignorovat žádný vývojář?
27. listopadu 2023
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
qasimod
Lis 13, 2009 v 12:46me se nic nevysouvá, nevím čím to bude