Hallo,
brauche ein DropDown Menü. Habe auch schon etwas gefunden, allerdings ist es noch nicht ganz so wie ich es gerne haben möchte.
Unzwar soll zum einen wenn man mit dem Mauszeiger über den Menuepunkt fährt nicht der Textcursor, sondern einfach nur der Pfeil angezeigt werden. Komischerweise funktioniert es so wie es sein soll in Opera, jedoch nicht im IE.
Weiterhin möchte ich, dass wenn man das Menue an einer Stelle aufgeklappt hat und einen anderen Menuepunkt anklickt, das gerade offene wieder geschlossen werden. Im Prinzip so wie es auf www.mindfactory.de zu sehen ist. nur diese Ausfahranimation soll nicht sein.
Wäre vielleicht jemand so nett und könnte sich das Script mal zur Brust nehmen, es umcoden und hier posten?
Hier das Script:
<html>
<head>
<title>Klick Menü</title>
</head>
<style type="text/css">
<!--
div { width: 100px;}
#master1 {
position:relative;
margin:10px 0px 0px 10px;
border: 1px solid #000000;
}
#master2 {
position:relative;
margin:5px 0px 0px 10px;
border: 1px solid #000000;
}
.sub { position:relative; margin:1px 0px 0px 10px; background-color: #FF0033 }
.thema { position:relative; margin:1px 0px 0px 10px; background-color: #33FF66 }
//-->
</style>
<script type="text/javascript">
<!--
function open_close_sub (id)
{
if ( document.getElementById(id).style.display == 'none')
{
document.getElementById(id).style.display='block';
}
else
document.getElementById(id).style.display='none';
}
//-->
</script>
<body>
<div id='master1' onClick="open_close_sub('sub_master1')">
Kategorie 1
</div>
<div id='sub_master1' style='display:none;'>
<div id='sub1' class='sub' onClick="open_close_sub('thema_sub1')">Subkategorie 1</div>
<div id='thema_sub1' style='display:none;'>
<div class='thema'><a href='#'>Thema 1</a></div>
<div class='thema'><a href='#'>Thema 2</a></div>
</div>
<div id='sub2' class='sub' onClick="open_close_sub('thema_sub2')">Subkategorie 2</div>
<div id='thema_sub2' style='display:none;'>
<div class='thema'><a href='#'>Thema 1</a></div>
<div class='thema'><a href='#'>Thema 2</a></div>
</div>
<div id='sub3' class='sub' onClick="open_close_sub('thema_sub3')">Subkategorie 3</div>
<div id='thema_sub3' style='display:none;'>
<div class='thema'><a href='#'>Thema 1</a></div>
<div class='thema'><a href='#'>Thema 2</a></div>
</div>
</div> <!-- Ende div: sub_master1 -->
<div id='master2'>
Kategorie 2
</div>
</body>
</html>
Danke für eure Mühe.
brauche ein DropDown Menü. Habe auch schon etwas gefunden, allerdings ist es noch nicht ganz so wie ich es gerne haben möchte.
Unzwar soll zum einen wenn man mit dem Mauszeiger über den Menuepunkt fährt nicht der Textcursor, sondern einfach nur der Pfeil angezeigt werden. Komischerweise funktioniert es so wie es sein soll in Opera, jedoch nicht im IE.
Weiterhin möchte ich, dass wenn man das Menue an einer Stelle aufgeklappt hat und einen anderen Menuepunkt anklickt, das gerade offene wieder geschlossen werden. Im Prinzip so wie es auf www.mindfactory.de zu sehen ist. nur diese Ausfahranimation soll nicht sein.
Wäre vielleicht jemand so nett und könnte sich das Script mal zur Brust nehmen, es umcoden und hier posten?
Hier das Script:
<html>
<head>
<title>Klick Menü</title>
</head>
<style type="text/css">
<!--
div { width: 100px;}
#master1 {
position:relative;
margin:10px 0px 0px 10px;
border: 1px solid #000000;
}
#master2 {
position:relative;
margin:5px 0px 0px 10px;
border: 1px solid #000000;
}
.sub { position:relative; margin:1px 0px 0px 10px; background-color: #FF0033 }
.thema { position:relative; margin:1px 0px 0px 10px; background-color: #33FF66 }
//-->
</style>
<script type="text/javascript">
<!--
function open_close_sub (id)
{
if ( document.getElementById(id).style.display == 'none')
{
document.getElementById(id).style.display='block';
}
else
document.getElementById(id).style.display='none';
}
//-->
</script>
<body>
<div id='master1' onClick="open_close_sub('sub_master1')">
Kategorie 1
</div>
<div id='sub_master1' style='display:none;'>
<div id='sub1' class='sub' onClick="open_close_sub('thema_sub1')">Subkategorie 1</div>
<div id='thema_sub1' style='display:none;'>
<div class='thema'><a href='#'>Thema 1</a></div>
<div class='thema'><a href='#'>Thema 2</a></div>
</div>
<div id='sub2' class='sub' onClick="open_close_sub('thema_sub2')">Subkategorie 2</div>
<div id='thema_sub2' style='display:none;'>
<div class='thema'><a href='#'>Thema 1</a></div>
<div class='thema'><a href='#'>Thema 2</a></div>
</div>
<div id='sub3' class='sub' onClick="open_close_sub('thema_sub3')">Subkategorie 3</div>
<div id='thema_sub3' style='display:none;'>
<div class='thema'><a href='#'>Thema 1</a></div>
<div class='thema'><a href='#'>Thema 2</a></div>
</div>
</div> <!-- Ende div: sub_master1 -->
<div id='master2'>
Kategorie 2
</div>
</body>
</html>
Danke für eure Mühe.
