Horizontální menu s vertikálním písmem
Toto řešení ukazuje, jak vytvořit působivé horizontální menu s písmeny orientovanými vertikálně. Jeho využití je možné u netradičních layoutů.
Zde si můžete prohlédnout výsledek.
Toto řešení publikovala Stu Nicholls. Bližší popis najdete v článku A VERTICAL UNORDERED LIST.
CSS
#menu
{
width:15em;
padding:0;
margin:0 auto;
list-style-type:none;
font-size:1.4em;
font-family:georgia, „times new roman“, serif;
}
#menu li
{
float:left;
border:0.2em solid #eee;
margin:0.1em;
}
#menu li a
{
text-decoration:none;
color:#000;
display:block;
width:1.5em;
height:1.5em;
border-top:0.1em solid #000;
height:auto;
}
#menu li a em
{
font-style:normal;
display:block;
text-align:center;
background:#fff;
border-left:0.1em solid #000;
border-right:0.1em solid #000;
}
#menu li a em.nd
{
border-bottom:0.1em solid #000;
}
#menu li a:hover
{
background:#eee;
}
#menu li a:hover em
{
background:#eee;
color:#900;
}
XHTML
<html>
<body>
<ul id=“menu“>
<li><a href=“#“>
<em>J</em><em>A</em><em>H</em>
<em>O</em><em>D</em><em class=“nd“>A</em>
</a></li>
<li><a href=“#“>
<em>G</em><em>R</em><em>A</em>
<em>P</em><em>E</em><em>F</em>
<em>R</em><em>U</em><em>I</em>
<em class=“nd“>T</em>
</a></li>
<li><a href=“#“>
<em>B</em><em>A</em><em>N</em>
<em>Á</em><em class=“nd“>N</em>
</a></li>
<li><a href=“#“>
<em>J</em><em>A</em><em>B</em>
<em>L</em><em>K</em><em class=“nd“>O</em>
</a></li>
<li><a href=“#“>
<em>H</em><em>R</em><em>U</em>
<em>Š</em><em>K</em><em class=“nd“>A</em>
</a></li>
<li><a href=“#“>
<em>Š</em><em>V</em><em>E</em>
<em>S</em><em>T</em><em>K</em>
<em class=“nd“>A</em>
</a></li>
<li><a href=“#“>
<em>V</em><em>I</em><em>Š</em>
<em>N</em><em class=“nd“>Ě</em>
</a></li>
</ul>
</body>
</html>
Mohlo by vás také zajímat
-
Jak zvýšit CTR vašeho e-mail marketingu
9. září 2024 -
Jak lze snadno upravovat soubory v PDF?
14. září 2023 -
Optimalizace a zlepšení výkonu kódu: tipy a triky
14. srpna 2023 -
Vlastní web: Jak nainstalovat WordPress?
24. června 2024
Nejnovější
-
Nové trendy v doménách pro osobní projekty – DIY, LIVING a LIFESTYLE
9. prosince 2024 -
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024 -
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024