Es geht sogar komplett ohne JS - mal schnell zusammengepfuscht, um die Idee zu demonstrieren (die Idee zum Float-Drop-Prinzip sah ich vor Jahren auf CSSplay). Beim Tabben kommt die Subnavi an die gewünschte Stelle und bleibt auch stehen. Der Rest, d.h. das Unsichtbarmachen im Normalzustand, ist dann ein Selbstgänger, z.B. mit Überbreiten und overflow: hidden; etc.
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
font: 100% sans-serif;
padding: 20px;
}
ul#nav {
float: left;
width: 100%;
}
ul#nav li {
float: left;
}
ul#nav > li {
width: 300px;
}
ul#nav a {
display: block;
width: 150px;
background: #c00;
color: #fff;
text-decoration: none;
text-align: center;
padding: 5px 0;
}
ul#nav > li > a {
float: left;
border-top: 10em solid #fff;
}
ul#nav ul {
float: left;
}
ul#nav ul li {
clear: left;
}
ul#nav ul a {
border-top: 1px solid #000;
}
ul#nav a:focus {
margin-right: 1px;
background: red;
}
</style>
<ul id="nav">
<li><a href="#">Fotos</a>
<ul>
<li><a href="#">Fotos 1</a></li>
<li><a href="#">Fotos 2</a></li>
</ul>
</li>
</ul>
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Geändert von heiko_rs (17.06.2012 um 02:38 Uhr)
|