Gruppen
- Top Gruppen
- Betriebsysteme
- Windows classik
- Linux
- BS-Sonstige
- Software
- Datenbanken
- Bildbearbeitung
- Audio/mp3/Video
- Security/Viren
- SW-Sonstige
- Hardware
- Mainboard/CPU
- Grafikkarten
- Peripherie
- Laptop/Notebook
- HW-Sonstiges
- Netzwerk
- Telefon,ISDN,Modem
- W-Lan
- NW-Sonstiges
- Programmierung
- PHP,ASP,Perl...
- Java,C++...
- Webseiten/HTML
- Sonstiges
- PC-Sonstiges
- Plauderecke
- SN Intern
- Test
/ Forum / Skripte(PHP,ASP,Perl...)
Skripte(PHP,ASP,Perl...)
Fragevon michol vom 12.08.2019, 17:28 Options
Navigationsmenü mit JavaScript
Hallo zusammen!
Ich will ein Navigationsmenü mit JavaScript steuern. Und zwar gibt es 3 Hauptmenüpunkte und bei Punkt 2 soll sich neben der eigentlichen Navigation eine Subnavigation öffnen. Das ist bisher auch kein Problem. Allerdings soll diese Subnavigation dann auch so lange offen bleiben, bis man entweder Menüpunkt 2 verlässt oder den Bereich des Submenüs. Und das tut sie nicht. Schon kurz nach dem onmouseover wird bei mir der css-wert display wieder per Javascript auf none gesetzt und man konnte vielleicht gerade mal sehen, dass es dort noch etwas anderes gibt.
Ich habe mal ein Beispiel, so wie ich das bis jetzt tippen konnte, hier hinterlegt: http://michi2000.mi.ohost.de/js/test2.html
Das Hauptmenü und die Unternavigiation sind beides einzelne Tabellen.
Also wenn jemand mir helfen könnte, wie diese Unternavigation offen bleibt, dann würde ich mich sehr freuen!
Vielen Dank,
michi
Ich will ein Navigationsmenü mit JavaScript steuern. Und zwar gibt es 3 Hauptmenüpunkte und bei Punkt 2 soll sich neben der eigentlichen Navigation eine Subnavigation öffnen. Das ist bisher auch kein Problem. Allerdings soll diese Subnavigation dann auch so lange offen bleiben, bis man entweder Menüpunkt 2 verlässt oder den Bereich des Submenüs. Und das tut sie nicht. Schon kurz nach dem onmouseover wird bei mir der css-wert display wieder per Javascript auf none gesetzt und man konnte vielleicht gerade mal sehen, dass es dort noch etwas anderes gibt.
Ich habe mal ein Beispiel, so wie ich das bis jetzt tippen konnte, hier hinterlegt: http://michi2000.mi.ohost.de/js/test2.html
Das Hauptmenü und die Unternavigiation sind beides einzelne Tabellen.
Also wenn jemand mir helfen könnte, wie diese Unternavigation offen bleibt, dann würde ich mich sehr freuen!
Vielen Dank,
michi
Antwort 1 von kicia vom 13.08.2019, 07:36 Options
Ein Problem ist
"stop()" wird also immer nach 300ms ausgeführt, wenn man die Maus irgendwo hinbewegt.
<div id="navContainer" onmouseover="stop();">"stop()" wird also immer nach 300ms ausgeführt, wenn man die Maus irgendwo hinbewegt.
Antwort 2 von michol vom 13.08.2019, 13:43 Options
hm..danke, okay, aber selbst wenn ich das im div-Tag rausnehmen und bei der Tabelle der Hauptnaviagtion (leider kann ich jetzt den code nicht neu hochladen) und nur im table der Subnavigation das onmouseout="stop()" einsetze, verschwindet die subnavigation wieder sobald ich dort sozusagen die Tabellenzellengrenze zwischen "Zwei 1" und "Zwei 2" überschreite..als ob dieser "Rahmen" nicht zur Tabelle gehört..
Antwort 3 von kicia vom 14.08.2019, 11:27 Options
(Hatte ich nicht schon geantwortet? Hm, wohl nicht abgeschickt, egal)
Ok, das ist mir auch ein Rätsel. Ich habe keine Lösung.
Aber das interessiert mich auch, hat jemand sonst eine Idee?
Ich habe mal den Code reduziert. "onmouseout" wird jedesmal ausgelöst, wenn man den Zeiger von TD nach TABLE oder umgekehrt bewegt. Warum?
(IE, Opera und Firefox verhalten sich da gleich)
Ok, das ist mir auch ein Rätsel. Ich habe keine Lösung.
Aber das interessiert mich auch, hat jemand sonst eine Idee?
Ich habe mal den Code reduziert. "onmouseout" wird jedesmal ausgelöst, wenn man den Zeiger von TD nach TABLE oder umgekehrt bewegt. Warum?
(IE, Opera und Firefox verhalten sich da gleich)
<html>
<head>
<style type="text/css">
td { border:solid 5px #cccccc; }
table { border:solid 2px #ffff00; /*border-collapse:collapse;*/ }
</style>
<script language="javascript" type="text/javascript">
function stop() { alert("stop"); }
function show() { alert("start"); }
</script>
</head>
<body>
<table onmouseout="stop();" cellspacing="15">
<tr><td>Eins</td></tr>
<tr><td>Zwei</td></tr>
<tr><td>Drei</td></tr>
</table>
</body>
</html>Antwort 4 von rfb vom 14.08.2019, 13:15 Options
Eventuell - aber dies müsstest du ausprobieren - reagieren die Eventhandler wie gewünscht, wenn du sie dem Element tbody zuweist, das den Tabelleninhalt zusammenfasst. Inwiefern die explizite Deklarierung des tbody bei deiner Tabellenstruktur sinnvoll ist entzieht sich meiner Kenntnis.
Antwort 5 von kicia vom 15.08.2019, 14:22 Options
Immernoch keine Lösung, aber neue Informationen:
http://de.selfhtml.org/dhtml/modelle/microsoft.htm#event_bubbling
http://msdn2.microsoft.com/en-us/library/ms533545.aspx
Wenn ich das richtig verstanden habe:
Beim Verlassen einer Zelle übergibt die Zelle das Event 'onmouseout' an die übergeordneten Elemente, bis eines davon einen 'onmouseout' handler definiert hat.
Man stelle sich vor für ein <table> ist ein 'onclick' definiert; man klickt in eine Zelle und das 'onclick' Event für diese Zelle wird ausgelöst. Die Tabelle muß das mitbekommen.
Diese 'Vererbung' an die übergeordneten Elemente scheint die Art zu sein, auf die das bisher realisiert wurde. Anscheinend gibt es eine neuere Art, die aber noch von keinem Browser unterstützt wird.
<tbody>
Meines wissens spricht nichts gegen die Verwendung von <tbody>, auch wenn man kein entsprechendes <thead> und <tfoot> definiert. Es ist in diesem Falle weder fehl am Platze noch notwendig.
http://de.selfhtml.org/dhtml/modelle/microsoft.htm#event_bubbling
http://msdn2.microsoft.com/en-us/library/ms533545.aspx
Wenn ich das richtig verstanden habe:
Beim Verlassen einer Zelle übergibt die Zelle das Event 'onmouseout' an die übergeordneten Elemente, bis eines davon einen 'onmouseout' handler definiert hat.
Man stelle sich vor für ein <table> ist ein 'onclick' definiert; man klickt in eine Zelle und das 'onclick' Event für diese Zelle wird ausgelöst. Die Tabelle muß das mitbekommen.
Diese 'Vererbung' an die übergeordneten Elemente scheint die Art zu sein, auf die das bisher realisiert wurde. Anscheinend gibt es eine neuere Art, die aber noch von keinem Browser unterstützt wird.
<tbody>
Meines wissens spricht nichts gegen die Verwendung von <tbody>, auch wenn man kein entsprechendes <thead> und <tfoot> definiert. Es ist in diesem Falle weder fehl am Platze noch notwendig.
Ähnliche Themen
Javascript
tomkat 08.07.2007 - 200 Hits - 2 Antworten
javascript:void(0);
Flashback2581 12.08.2007 - 775 Hits - 3 Antworten
javascript
börny 15.11.2007 - 123 Hits - 5 Antworten
HTML-Tag mit Javascript hinzufügen
Computerfreaki 11.05.2008 - 110 Hits - 10 Antworten
wie macht man mit Javascript aus vorher festgelegten wörtern links?
nympseudo 06.07.2008 - 124 Hits - 10 Antworten
Hinweis
Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..
Neue Einträge
