Horizontální menu s šířkou nadřazeného bloku
Toto řešení ukazuje, jak vytvořit vizuálně jednoduché, ale efektní horizontální menu s šířkou přizpůsobující se šířce nadřazeného bloku.
Zde si můžete prohlédnout výsledek.
Toto řešení publikovala Keith Burgin. Bližší popis najdete v článku Alteration to Rollover Horizontal List Navbar.
CSS
#nav
{
width: 100%;
float: left;
background-color: #1270c8;
}
#nav ul
{
padding: 0;
}
#nav ul li
{
display: inline;
}
#nav ul
{
margin: 0;
padding: 0 0 0 7%;
color: #FFFFFF;
font-family: tahoma, verdana, geneva, arial, helvetica, sans-serif;
font-size: .8em;
letter-spacing: 2px;
font-weight: bold;
}
#nav ul li a
{
padding: 0.2em 12px;
background-color: #1270c8;
color: #FFFFFF;
text-decoration: none;
float: left;
border-right: 1px solid #128ac8;
}
#nav ul li a:hover
{
background-color: #3296f4;
color: #FFFFFF;
}
#nav li#active a
{
background-color: #45b4fa;
color: #FFFFFF;
}
XHTML
<html>
<body>
<div id=“nav“>
<ul>
<li><a href=“#“>Položka jedna</a></li>
<li id=“active“><a href=“#“>Položka dva</a></li>
<li><a href=“#“>Položka tři</a></li>
<li><a href=“#“>Položka čtyři</a></li>
<li><a href=“#“>Položka pět</a></li>
</ul>
</div>
</body>
</html>
Mohlo by vás také zajímat
-
-
Moderní trendy ve webdesignu: Top trendy pro rok 2024
12. ledna 2024 -
Aktualizujete svoji .NET webovou aplikaci? Může se hodit app_offline.htm
10. července 2024 -
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