Záložkové menu vysouvající se nahoru

1. října 2005

•

Záložkové menu, ve kterém se záložky vysouvají nahoru.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Stu Nicholls. Bližší popis najdete v článku More snazzy border menus.

CSS

.snazzy {background:transparent;}
.snazzy span {text-align:center; color:#fff; margin:0; font-weight:normal;}
.b1, .b2, .b3, .b4 {display:block; font-size:1px;
/* \*/
overflow: hidden;
/* */ }
.b1, .b2, .b3 {height:1px;}
.b2, .b3, .b4 {border-left:1px solid #fff; border-right:1px solid #fff;}
.b1 {margin:0 5px; background:#fff;}
.b2 {margin:0 3px; border-width:0 2px;}
.b3 {margin:0 2px;}
.b4 {height:2px; margin:0 1px;}
.boxcontent {display:block; border-left:1px solid #fff; border-right:1px solid #fff;}
.red {background:#c00;}
.orange {background:#f90;}
.yellow {background:#b8b800;}
.green {background:#090;}
.blue {background:#00c;}
.indigo {background:#309;}
.violet {background:#c6c;}
#navigation2 {background:transparent; margin:1em auto; height:3em; background:#bbb;
/* \*/
overflow: hidden;
/* */ }
#navigation2 ul {margin:0; padding:0; list-style-type:none; background:transparent;}
#navigation2 li {display:block; float:left; margin:0 1px;}
.pad {display:block; height:1em;
/* \*/
overflow: hidden;
/* */ }
a.menu2, a.menu2:visited {display:block; text-decoration:none; width:5.5em;}
a.menu2:hover {background:transparent; cursor:pointer;}
a.menu2:hover .boxcontent {padding-bottom:0.8em;}
a.menu2:hover .pad {height:0.2em;}

XHTML

<html>
<body>
<div id=“info“>
<h2>Záložky vysouvající se nahoru</h2>
<div id=“navigation2″>
<ul>
<li>
<a class=“menu2″ href=“#nogo“>tlačítko #1
</a>
</li>
<li>
<a class=“menu2″ href=“#nogo“>tlačítko #2
</a>
</li>
<li>
<a class=“menu2″ href=“#nogo“>tlačítko #3
</a>
</li>
<li>
<a class=“menu2″ href=“#nogo“>tlačítko #4
</a>
</li>
<li>
<a class=“menu2″ href=“#nogo“>tlačítko #5
</a>
</li>
<li>
<a class=“menu2″ href=“#nogo“>tlačítko #6
</a>
</li>
<li>
<a class=“menu2″ href=“#nogo“>tlačítko #7
</a>
</li>
</ul>
</div>
</div>
</body>
</html>