Horizontální menu s vertikálním písmem

2. června 2006

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

Nejnovější

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *