Hover-Effekt auch wenn Maus im Untermenü ist

[Jacques]

Hallo zusammen,

ich habe schon alle möglichen Foren durchsucht, konnte aber keine Lösung finden. Hier meine Frage:
Ich habe mit Hilfe von Java Script ein Dropdown Menü erstellt. Auf dem Header liegt zusätzlich ein Hover, mit dem die einzelnen Buttons die Farbe und auch die Größe ändern. Wenn ich jetzt auf den Button klicke, ändert er seine Farbe und das Dropdownmenü wird geöffnet. Fahre ich mit der Maus über das Dropdownmenü, und verlasse somit den Button, verschwindet auch der Hover.
Hat jemand eine Idee für die Lösung meines Problems? Ich häng tatsächlich schon ne Weile daran. Mit diesem Dropdownmenü habe ich mich auch das erste mal mit Java Script beschäftigt, bin also noch blutiger Anfänger.

 

[mermshaus]

Willkommen im Forum.

Vermutlich sind die Elemente nicht geschachtelt. Du müsstest uns aber mal den Code zeigen (möglichst in einem reduzierten Beispiel).

Weil gerade dieses Thema hier ständig kommt, der kurze Hinweis: Es gibt im Web Dropdown-Lösungen wie Sand am Meer. Das Problem ist im Prinzip gelöst. Daher gleicht es immer etwas der Neuerfindung des Rads, eine weitere Lösung auf den Qualitätsstandard bestehender hieven zu wollen.

 

[janm]

ich möchte hier auch noch einmal loswerden, dass man verschachtelte untermenüs am besten mit css :hover löst.
Lässt sich sehr schnell googlen

 

[Wustersoss]

Volle Zustimmung Janm.
Javascript in einem Menü ist immer riskant. Menü funktioniert eventuell nicht ohne Javascript(schlimmster Zustand), weil dann kommt bald die nächste Frage: "Wieso findet Google meine Unterseiten nicht".
Zudem ist es nicht im Sinne der Barrierefreiheit.

Nur mal zum Nachdenken, ansonsten ist es mir ja Wurscht, was ihr macht.

 

[Jacques]

Die Meinungen darüber ob man das Untermenü mit Java Script oder CSS umsetzt sind wohl ziemlich gespalten. Hab mit Hilfe dieses Tutorials das Menü gebaut: JavaScript Tutorial: Dropdown-Menü erstellen mit JavaScript | deutsch - YouTube Das einzige was mir jetzt noch fehlt ist diese Hover Sache. Also wie ich mit Java Script auf den Hover zugreife.

Hier ist der HTML Code

<div class="nav_right">
<div class="button">
<ul>
<li><a onmouseover="aufklappen()" onmouseout="zuklappen()" href="#"><span>ÜBER UNS</span></a></li>
<li><a href="#"><span>LEISTUNGEN</span></a></li>
<li><a href="#"><span>REFERENZEN</span></a></li>
<li><a href="#"><span>KONTAKT</span></a></li>
</ul>
</div>

<!--ANFANG DROPDOWN-->

<div onmouseover="aufklappen()" onmouseout="zuklappen()" id="dropdown_index">
<div class="dropdown_box">
<ul>
<li><a href="#"><span>Aktuelles</span></a></li>
<li><a href="#"><span>unser Team</span></a></li>
</ul>
</div>
</div>

<!--ENDE DROPDOWN-->

CSS:

#header .button { padding:0px; margin:0; height: 187px; }
#header .button li { background-image:url(../BILDER/button_ueber_uns.gif); float:left; width:120px; height:187px;}
#header .button li:last-child { color:#3F0; }
#header .button li a { display:block; padding-top:150px; color:#aeaeae; font-size:1.2em; }
#header .button li a:hover { color:#FFFFFF; background-color:#0b07a9; height:70px; position:absolute; width:121px; }
#header .button li:last-child a:hover { background-color:#0b07a9; height:70px; position:absolute; width:120px; }
#header .button li a span { display:block; text-align:center; }

/*dropdown*/

#dropdown_index { position:absolute; display:none; margin-left:440px; margin-top:22px; }
#dropdown_index .dropdown_box li { background-color:#FFF; width:121px; height:30px; border-bottom:1px solid #aeaead; }
#dropdown_index .dropdown_box li:last-child { border:none; }
#dropdown_index .dropdown_box li a { color:#aeaead; }
#dropdown_index .dropdown_box li a:hover { color:#494949; }
#dropdown_index .dropdown_box li a span { display:block; text-align:center; padding-top:8px; }

/*dropdown*/

Und zuletzt Java Script:

function aufklappen () {
document.getElementById('dropdown_index').style.display='block';
document.getElementById('header').style.hover='block';
}

function zuklappen () {
document.getElementById('dropdown_index').style.display='none';
}

 

[Jacques]

Soll ich das Menü denn besser ganz mit CSS bauen? Hab schon einige Foreneinträge gelesen in denen nach nem Untermenü mit Hilfe von CSS gefragt wurde. Und die verzweifelten Fragensteller wurden schon alleine für die Idee regelrecht auseinander genommen und ausgelacht

 

[Wustersoss]

Und die verzweifelten Fragensteller wurden schon alleine für die Idee regelrecht auseinander genommen und ausgelacht

Das passiert immer dann, wenn die Befragten keine Antwort haben und unwissend sind. Das sind dann aber auch die Ersten, die sich wundern warum ihre eigenen Seiten bei den Suchmaschinen so schlecht gelistet sind.

Wenn du es besser machen willst, mache es in HTML und CSS und verzichte beim Menü auf Javascript. Javascript soll (meine Meinung), unterstützend und als zusätzliche Hilfe angewandt werden, jedoch niemals die Grundfunktionalität einer Webseite beeinträchtigen und dazu gehört nun mal die Navigation. Keine Frage, dass man da zusätzlich noch nette Effekte mit Javascript einbauen kann, aber erst mal muss die Seite ohne Javascript funktionieren, danach kommen die JavaScript-Spielereien.

Was alles möglich ist, stellt Stu Nicholls eindrucksvoll dar. Such dir was aus Stu Nicholls | CSSplay | A basic CSS anywidth flyout menu

 

[Jacques]

Das passiert immer dann, wenn die Befragten keine Antwort haben und unwissend sind.

Den Eindruck habe ich allerdings auch. Hier scheint eines der wenigen Foren zu sein, in denen man ne anständige Antwort bekommt! Vielen lieben Dank für das Tutorial, bin froh das ich doch auf Java Script verzichten kann!

 

[Wustersoss]

Wenn du Probleme mit der Umsetzung hast, fragst einfach noch mal nach.

 

[Jacques]

Werd ich machen! Danke für Deine Hilfe!

 

[Tronjer]

Für eine einfache Dropdown-Navigation, in der die Menüpunkte beim Hovern ohne Verzögerung ausgeklappt werden sollen, braucht es kein JS. Ich hatte vor einiger Zeit dazu mal ein Grundgerüst gepostet.