Frage stellen

Horizontales Menü mit 2 Ebenen mit CSS (ohne JS)

2.7k Aufrufe
Gefragt in Webseiten HTML von
Hallo,

ich möchte mit reinem CSS, also ohne JavaScript eine Navigation, ähnlich wie auf www.techradar.com/ erstellen.

Mein erster Ansatz hat zunächst vielversprechend gewirkt, allerdings funktioniert es nicht richtig.

Hat jemand von euch eine gute Anleitung auf Lager (etwas gegoogelt habe ich natürlich schon).

Danke!

2 Antworten

0 Punkte
Beantwortet von son_quatsch Experte (5.3k Punkte)
In der Form wie auf jener Seite ist das nahezu unmöglich. Aber ein reines CSS-Beispiel hätte ich parat (funktioniert in OPER10, FFOX3, nicht aber MSIE6):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<title>Hover ohne JS</title>
<style type="text/css">
div.auf {
width: 100px;
top: 20px;
border: 1px solid #800;
position: absolute;
text-align: center;
}
span.punkt {
margin: 0;
padding: 0;
height: 35px;
display: block;
overflow: hidden;
}
span.punkt:hover {
height: 100px;
}
b {
font-size: 30px;
cursor: pointer;
}
</style>
</head><body>
<div class="auf" style="left: 50px;">
<span class="punkt">
<b>Eins</b><br />
<a href="seite1.html">Seite 1</a><br />
<a href="seite2.html">Seite 2</a>
</span>
</div>
<div class="auf" style="left: 160px;">
<span class="punkt">
<b>Zwei</b><br />
<a href="seite3.html">Seite 3</a><br />
<a href="seite4.html">Seite 4</a>
</span>
</div>
</body></html>
0 Punkte
Beantwortet von
Hi,
schau dir mal diese Seite an: http://www.dynamicdrive.com/style/csslibrary/category/C1/

Davon gibt es noch mehr. GOOGL hilft!
...