PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : [JS+CSS]: Nach rechts aufklappende Menüs?

mf_2
2007-05-04, 21:26:43
Hallo,

Ich wollte für eine Homepage nach rechts aufklappende Menüs machen.
Leider hat das Menü mehrere Ebenen, in etwa so:



Punkt 1 - Unterpunkt 1 - Seite 1
- Seite 2
- Seite 3
- Seite 4
- Unterpunkt 2 - Seite 1
- Seite 2
Punkt 2 - Unterpunkt 1 - Seite 1
- Seite 2
- Seite 3
- Seite 4
- Unterpunkt 2 - Seite 1
- Seite 2
- Seite 3
Punkt 3 - Unterpunkt 1 - Seite 1
- Seite 2
- Seite 3
- Seite 4
- Unterpunkt 2 - Seite 1
- Seite 2



Hier mein Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML><HEAD><TITLE></TITLE>
<style type="text/css">

#dynmenu {
position:absolute;
left:280px;
top:160px;
width:250px;
visibility:hidden; }

</STYLE>
<script type="text/javascript">
function hideLayer(layerName) {
if(document.getElementById)
document.getElementById(layerName).style.visibility='hidden';
if(document.all)
document.all[layerName].style.visibility='hidden';
if(document.layers)
document.layers[layerName].style.visibility='hidden';
}
function showLayer(layerName) {
if(document.getElementById)
document.getElementById(layerName).style.visibility='visible';
if(document.all)
document.all[layerName].style.visibility='visible';
if(document.layers)
document.layers[layerName].style.visibility='visible';
}
</script>

</HEAD>






<BODY background="bg.bmp" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" onload="hideLayer('dynmenu')">
<TABLE border=0 cellpadding=0 cellspacing=0 width="100%" height="100%"><TR><TD align="center" style="vertical-align:middle;">
<DIV style="width:1000px; height:600px; border-color:white; border-width:1px; border-style:solid;">
<TABLE border=0 style="width:100%; height:100%;" cellpadding=5 cellspacing=5><TR style="height:540px; vertical-align:top;"><TD>

<div id="dynmenu">
<a onClick="showLayer('dynmenu')" href="#">Unterpunkt 1</a><br>
<a onClick="showLayer('dynmenu')" href="#">Unterpunkt 2</a><br>
<a onClick="showLayer('dynmenu')" href="#">Unterpunkt 3</a>
</div>

&nbsp;<BR>
<B><DIV onMouseOver="showLayer('dynmenu')" onMouseOut="hideLayer('dynmenu')">&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;Punkt 1</DIV><P>
&nbsp;<BR>
&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;Punkt 2<P>
&nbsp;<BR>
&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;Punkt 3<P>
&nbsp;<BR>
&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;Punkt 4<P>
</B>

</TD></TR><TR style="height:50px; width=100%;"><TD class="logo">&nbsp;</TD></TR></TABLE>
</DIV></TD></TR></TABLE>

</BODY></HTML>


Das die Höhe des aufklappenden Menüs nicht ganz stimmt, macht nichts, da ich den Code etwas auf das wesentliche reduziert habe.

Nun mein Problem:
Wenn ich mit der Maus über den Punkt 1 fahre, soll das Menü mit den dazugehörigen Unterpunkten erscheinen. Das geht auch. Wenn ich nun auf einen anderen Punkt fahre oder aus dem Menü weg, soll das Unterpunkte Menü wieder verschwinden. Das geht mit onMouseOut, ABER: Das verschwindet dann auch, wenn ich die Maus vom Punkt 1 in das Unterpunkte Menü bewegen will, und das ist natürlich käse!
Ich habe die 3te Ebene noch nicht erstellt, da ich denke dass sie analog zur 2ten Ebene funktioniert. Gibt es evtl. noch eine elegantere Lösung, mein Problem zu lösen?
Ich kenne mich leider mit JavaScript noch nicht wirklich aus.

Danke schonmal,
mf_2
DanMan
2007-05-05, 12:23:51
Und was machen die ohne aktives JS? Die haben dann keine Navi, oder wie? Tut mir Leid, aber das verstößt gegen die Barrierefreiheit.
Flipper
2007-05-05, 17:46:38
Das geht auch ohne JS (für alle browser ohne IE, aber wer IE benutzt hat dann eh JS aktiviert), wie zB hier: http://acv.co.at realisiert. Link zum Tutorial hab ich nicht bei der hand, aber mit google sollte das nicht allzu schwer sein.
Gast
2007-05-06, 14:15:10
Ja mit CSS ist das bedeutend einfacher und kompatibler und schöner finde ich, auf der Seite oben toggled er das Menü über die display-Eigenschaft.

Sowas macht heute eigentlich kein Mensch mehr mit Javascript direkt (eher AJAX)
mf_2
2007-05-06, 17:22:59
Ich habe mir das auf acv.co.at angesehen und das macht genau das, was ich will, nur leider nicht im Internet Explorer! Da werde ich mal versuchen, ein wenig zu debuggen...
mf_2
2007-05-07, 00:00:51
So, habs hinbekommen! Vielen Dank für den Link!!
Flipper
2007-05-08, 02:01:30
was macht acv.co.at nicht im IE?
mf_2
2007-05-08, 21:30:29
Das Menü sieht gestaucht aus, bevor man das erste Mal drüberfährt, allerdings nur im Internet Explorer.
Version des IE ist 7.0, OS ist XPSP2.

Scheiß Vorführeffekt, jetzt wollte ich gerade nen Screen machen und da lädt es tadellos. Naja umso besser.
Früher sah es so aus, als würden sich die unteren 3-4 Menülinks nach oben und unten hin jeweils überlappen. Erst wenn man mal an irgendeiner Stelle über das Menü gefahren ist (man musste nicht unbedingt etwas anklicken) hat sich das ganze entzerrt.

Und das eigentliche Problem hatte ich mit dem Hover Zustand des 'a' Tags, da saß der Fehler aber glaube ich vor meinem Bildschirm :D
Flipper
2007-05-09, 15:44:03
Danke!
mf_2
2007-05-09, 21:57:28
Hast du das Problem mit dem gestauchten Menü auch?
Flipper
2007-05-10, 14:49:49
Ich kanns hier nicht testen, ich hab keinen IE7. Mit den Beta-Versionen von IE7 hat's nie Probleme gegeben (das war auf einem Windows Vista (ebenfalls beta) in einer VM), aber gut zu wissen dass teilweise welche auftreten. Vielleicht bedeutet das einen kleinen Zusatzverdienst im Sommer ;)