wobei dies dann ein drop-down menue wäre....
so ich habe mal gekramt, weil ich so ein dropdown-menü mal umgesetzt habe. dies basiert auf css und nicht javascript, heisst, ist auch mit ausgeschaltetem javascript ausführbar. (leider nicht barrierefrei, da das menü mit der tastatur trotzdem verbuggt ist)
das script besteht aus 3 komponenten:
1. die .html datei:
2. css datei für alle browser
3. css datei für explorer < 7
1. hier genannt dropdown.html
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>n3v3r-ag4in modifizierter dropdown css hack für alle browser</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="n3v3r-ag4in" />
<link rel="stylesheet" type="text/css" href="dropdown.css" />
<style type="text/css">@import url(dropdown.css) all;</style>
<!--[if lt IE 7]>
<style type="text/css">@import url(ie_drop.css);</style>
<![endif]-->
</head>
<body>
<div id="menuebox" style="">
<div id="menue">
<div class="aussen" style="text-align:left; margin-left:30px;">
<span class="menutag"><strong>Überschrift</strong></span>
<a class="innen-1" href="">Unterpunkt 1</a><span class="invis"></span>
<a class="innen" href="">Unterpunkt 2</a><span class="invis"></span>
<a class="innen" href="">Unterpunkt 3</a> </div>
</div>
</div><!-- menue -->
<!-- Der folgende Block bedient nur IEs!
Durch diese Redundanz vermeiden wir den Einsatz von Javascript. -->
<!--[if IE]>
<div class="stupidie">
<a class="auss" href="#" style="margin-left:25px"><span class="menutag">Überschrift</span>
<table><tr><td>
<a class="inn" href="">Unterpunkt 1</a>
<a class="inn" href="">Unterpunkt 2</a>
<a class="inn" href="">Unterpunkt 3</a>
</td></tr></table>
</a>
<![endif]-->
</div>
</body>
</html>
2. css-datei für alle browser ( dropdown.css )
#menuebox-top {
position: relative;
height: 30px;
font-size: 12px;
}
.stupidie-top {
display: none;
}
#menue-top {
position:absolute;
top: 5px;
left: 10px;
z-index: 200;
}
#menue-top .aussen {
width: 120px;
}
#menue-top a.innen,
#menue-top a.innen-1 {
width: 120px;
}
/* ================= */
#menuebox {
position: relative;
height: 30px;
}
.stupidie {
display: none;
}
#menue {
position:absolute;
top: 5px;
left: 0;
padding-bottom: 2px;
z-index: 200;
width: 950px;
}
.aussen {
float: left;
display: block;
overflow: hidden;
width: 120px;
height: 1.3em;
font-weight: bold;
text-align: left;
background-color:#580000;
color: white;
}
.aussen:hover {
height: auto;
background-color:#580000;
color: #10e51a;
}
.aussen2 {
float: left;
display: block;
overflow: hidden;
width: 120px;
height: 2.4em;
font-weight: bold;
text-align: left;
background-color: #580000;
color: white;
}
.aussen2:hover {
height: auto;
background-color:#580000;
color: #10e51a;
}
a.innen-1 {
margin-top: 2px;
}
a.innen,
a.innen-1 {
display: block; text-align:left;
width: 120px;
padding: 5px 0;
text-decoration: none;
font-weight: normal;
background-color: #580000; background-image:url(bg.gif);
color: white; font-size:11px; padding-left:5px;
}
a:hover.innen,
a:hover.innen-1 {
background-color: #580000;
color: #10e51a;
}
span.menutag {
display: block;
cursor: default;
}
3. css datei für die explorer < 7 ( ie_drop.css )
/* seiteneigenes dropdown im head */
.stupidie-top {
display: block;
position: absolute;
top: 5px;
left: 10px;
z-index: 200;
}
.stupidie-top a.auss {
width: 10em;
}
.stupidie-top a.inn {
width: 10em;
}
/* ================ */
#menue {
display:none;
}
.stupidie {
display: block;
position: absolute;
top: 5px;
left: 0;
z-index: 200;
}
a.auss {
float: left;
width: 10em;
height: 1.4em;
overflow: hidden;
display: block;
font-weight: bold;
text-align: left;
text-decoration: none;
background-color: #580000;
color: white;
}
a:hover.auss {
overflow: visible;
background-color: #580000;
color: #10e51a;
}
a:hover.auss table {
display: block;
margin-top: 3px;
color: #400;
border-collapse: collapse;
}
a.inn {
display: block;
width: 10em;
padding: 2px 0;
font-size: 11px;
font-weight: normal;
text-align: left;
text-decoration: none;
background-image:url(bg.gif);
color: white; padding-left:5px;
}
a:hover.inn {
position: relative;
background-color: #580000 ;
color: #10e51a;
}
span.menutag {
display: block;
cursor: default;
}
so das menu entstand abgeleitet von nem online-beispiel, der zahn der zeit lässt mich die quelle aber nicht mehr finden.
(getestet mit: ie7, firefox, ie6, opera)