nicht angemeldet
Hallo Jürgen,
die fertige Version fehlerfrei getestet im aktuellen Firefox und Opera:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript">
// bei aktiviertem JS die Submenüs ausblenden
window.onload = closeSubs;
function closeSubs() {
subMenues = document.getElementById('menu').getElementsByTagName('ul');
for(i = 0; i < subMenues.length; i++){
// offene Submenüs schließen
subMenues[i].style.display = 'none';
}
}
function handleClicks(e){
var e=(window.event)?window.event:e;
var o=(window.event)?e.srcElement:e.target;
if(o.className == 'submenuHeader'){
// gewählten Menüpunkt aufklappen
liste = o.nextSibling;
while(liste.nodeName != 'UL' || liste.nextSibling == null){
liste = liste.nextSibling;
}
status = liste.style.display;
closeSubs();
if(status == 'block'){
liste.style.display = 'none';
}else{
liste.style.display = 'block';
}
}
}
window.document.addEventListener("click", handleClicks, false);
</script>
<style type="text/css">
ul#menu {
list-style-type:none;
width:200px;
background:#CCC;
padding:0;
}
ul#menu li {
padding:2px 2px 2px 20px;
background:url(bottom.png) no-repeat left bottom;
}
ul#menu li.submenu {
padding-left:0;
padding-bottom:0;
/* anderer Unterstrich (Hintergrundbild) für Ende von Submenüs */
/* background:url(deinBild) no-repeat left bottom; */
}
ul#menu li.submenu h3 {
cursor:pointer;
padding:0 0 2px 20px;
margin:0;
font-size:1em;
font-weight:normal;
background:url(bottom.png) no-repeat left bottom;
}
.submenuList {
display:block;
}
ul#menu li.submenu ul {
list-style-type:none;
padding:0 0 0 20px;
}
ul#menu li.submenu ul li{
padding:2px 2px 2px 20px;
/* anderer Unterstrich (Hintergrundbild) für Submenüs */
/* background:url(deinBild) no-repeat left bottom; */
}
ul#menu li.submenu ul li.noBg {
background-image:none;
}
</style>
</head>
<body>
<ul id="menu">
<li>Startseite</li>
<li>Menüpunkt</li>
<li class="submenu">
<h3 class="submenuHeader">Menüpunkt mit Submenü</h3>
<ul class="submenuList">
<li>Menüpunkt</li>
<li class="noBg">Menüpunkt</li>
</ul>
</li>
<li>Menüpunkt</li>
<li class="submenu">
<h3 class="submenuHeader">Menüpunkt mit Submenü</h3>
<ul class="submenuList">
<li>Menüpunkt</li>
<li class="noBg">Menüpunkt</li>
</ul>
</li>
</ul>
</body>
</html>
bottom.png ist bei mir ein 1px hoher Streifen mit teilweiser Alpha-Transparenz.
Irgendwelche Einwände?
Grüße, Matze
JürgenB
MudGuard