Dropdownmenü soll sich mit onmouseover schließen lassen

diekate · 30.06.2011

ich habe ein drop-down-menü gebastelt, wenn man einen menü-punkt anklickt öffnet sich bereits ein untermenü. Dieses soll über onmouseout geschlossen werden, wenn das komplette untermenü mit der maus verlassen wird. das problem ist, es schließt sich, wenn man einen unterpunkt verlässt... was muss ich tun?
ich stell das jetzt mal etwas simpel hier rein:

HTML:

<head>
<script type="text/javascript">
function weg()
{document.getElementById('Untermenue').style.display='none'}
</script>
</head>

<body>
<div id="Untermenue" onmouseout="weg()">
<a href="..."><img src="abc.png"/></a>
<a href="..."><img src="def.png"/></a>
<a href="..."><img src="ghi.png"/></a>
</div>
</body>

habe iwo bei meiner suche schon was davon gelesen, dass es was mit den inline-objekten, also den links, zu tun hat... aber wie löse ich das problem dann?

taskrider · 01.07.2011

AW: Dropdownmenü soll sich mit onmouseover schließen lassen

hmm - dein Ansatz ist ja schon nicht schlecht, aber!

Du kannst das auch ohne Javascript lösen, solltest du auch, denn wenn einer deiner Besucher Javascript aus geschaltet hat geht das menu eh nicht mehr.

Als gedanken stütze wie man ein Menu bauen kann empfehle ich dir mal diese Seite

Bitte kostenlos registrieren, damit du die Links siehst.

diekate · 01.07.2011

AW: Dropdownmenü soll sich mit onmouseover schließen lassen

danke für den link, aber wollt schon n eigenes haben und kein vorgefertigtes

vllt könnteste mir aber erklären wie sowas funktioniert oder hast du vllt n nettes tutorial für mich? und kannst du mir vllt zur not noch ne javascript-lösung sagen, würde mich auch tierisch interessieren, was ich da nu falsch gemacht habe

taskrider · 01.07.2011

AW: Dropdownmenü soll sich mit onmouseover schließen lassen

ich hoffe du bist dem englischen mächtig denn dieses Tut hier zeigt eigentlich den Weg der am meisten genutzt wird wenn man Menüs erstellen will

JavaScript bin ich nicht so erfahren, beschäfftige mich fast ausschließlich mit PHP/XHTML/CSS

Was mir aber aufgefallen ist, wenn ich jetzt nur mal aus der Warte daran gehe das es mit CSS gelöst wird, ist der Fakt das alle Punkte ungeliedert sind.
Das heißt einfach soviel das du jetzt einfach mal nen ScreenReader vorstellen musst. Er kann zwar erkennen das es den Punkt 'Untermenue' gibt, aber der Inhalt darin hat keine Struktur, da sind nur aneinandergereite a Tags vorhanden.

Wie Du in dem Tut sehen wirst ist auch das Son of Suckerfish Model mit einer Listenstruktur (einer ul = unsortierten Liste) ausgestattet. Damit wird dann Strucktur in das ganze gebracht. Solltest du nun ein Menupunkt haben der Unterpunkte besitzt werden diese Baumartig darin eingepflegt, so das es auch für einen Screenreader ersichtlich ist, das es sich darum um Unterpunkte handelt.

Bsp:

Menu1
Menu2
Menu3

Untermenu1
Untermenu2
Untermenu3

Menu4

In HTML wäre diese sortierung dann so

HTML:

<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3
<ul>
<li>Untermenu1</li>
<li>Untermenu2</li>
<li>Untermenu3</li>
</ul>
</li>
<li>Menu4</li>
</ul>

Nun zu deinem Fehler, den ich aber auch nur vermute!
Wenn die Struktur fehlt, weiß auch das Script nicht was es verstecken soll. Dein Script greift erst wenn du innerhalb des von dir angebenen DIVs bist, heißt also es kann garnicht darauf regieren wenn das Elternelement verlässen tust, da dein script erst beim Kindelement greifen tut.

Klar soweit?

Sturmkraehe · 01.07.2011

AW: Dropdownmenü soll sich mit onmouseover schließen lassen

@taskrider nur das dein code nicht sehr schön ist, weil die hälfte der tags nicht geschlossen wird - nur weil die Browser eine Fehlerkorrektur haben heißt das nicht das man sie unbedingt einsetzen muss!

ok- 2 Tags

1 li und ein ul

taskrider · 01.07.2011

AW: Dropdownmenü soll sich mit onmouseover schließen lassen

Sturmkraehe schrieb:
@taskrider nur das dein code nicht sehr schön ist, weil die hälfte der tags nicht geschlossen wird - nur weil die Browser eine Fehlerkorrektur haben heißt das nicht das man sie unbedingt einsetzen muss!

Welche Tags sind denn nicht geschlossen, erstmal richtig lesen, bevor man flamed - schade

diekate · 01.07.2011

AW: Dropdownmenü soll sich mit onmouseover schließen lassen

ahh ok... aber wie strukturier ich das ganze dann so um, dass es aufs div greift?

diekate · 01.07.2011

AW: Dropdownmenü soll sich mit onmouseover schließen lassen

ach ja und wenn ich dieses css menü baue, wie du es da hast... woher weiß dann das untermenü, dass es nur angesprochen wird, wenn ich menü1 bzw. menü2 oder so klicke und nicht bei jedem menüpunkt geöffnet wird?!