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
-
Certifikáty Entrust ztratí důvěru Google Chrome
8. července 2024 -
AI a internetové podvody
29. října 2024 -
inPage AI: Jak na generování obsahu
18. července 2024 -
Nejnovější
-
Jak rozšířit úložiště Macu za pětinovou cenu?
16. prosince 2024 -
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