DHTML ?Rolldown? Menu

Garaen · 20. Mai 2004

Hio

Ich habe das Tutorial für ein Dynamisches DTHML Menu durchgelesen und den Skript leicht verändert:

Code:

<html>
<head>
<title>Basic DHTML Menu</title>

<script type="text/javascript">
<!--

function show(divid) {
d=document;
d.getElementById("cat1").style.display="none";
d.getElementById("cat2").style.display="none";

d.getElementById(divid).style.display="inline";
}

//-->
</script>

</head>
<body bgcolor="#FFFFFF">

<a href="#" onMouseover="show('cat1')">Category 1</a><br>
<div id="cat1" style="display:none">
<a href="#" class="sub"><TR><TD width="70">
			<IMG SRC="Bild/MITGLIEDER.gif" WIDTH=70 HEIGHT=30 border="0"></TD></TR></a><br>
<a href="#" class="sub"><TR><TD width="70">
			<IMG SRC="Bild/MITGLIEDER.gif" WIDTH=70 HEIGHT=30 border="0"></TD></TR></a><br>
<a href="#" class="sub"><TR><TD width="70">
			<IMG SRC="Bild/MITGLIEDER.gif" WIDTH=70 HEIGHT=30 border="0"></TD></TR></a><br>
</div><br>
<a href="#" onMouseover="show('cat2')">Category 2</a><br>
<div id="cat2" style="display:none">
<a href="#" class="sub"><TR><TD width="70">
			<IMG SRC="Bild/MITGLIEDER.gif" WIDTH=70 HEIGHT=30 border="0"></TD></TR></a><br>
<a href="#" class="sub"><TR><TD width="70">
			<IMG SRC="Bild/MITGLIEDER.gif" WIDTH=70 HEIGHT=30 border="0"></TD></TR></a><br>
<a href="#" class="sub"><TR><TD width="70">
			<IMG SRC="Bild/MITGLIEDER.gif" WIDTH=70 HEIGHT=30 border="0"></TD></TR></a><br>
</div><br>
</body>
</head>

</html>

Nun meine Frage:
Wie mache ich dass das Menu sich nach oben aufklappt?
Wie mache ich dass es, wenn der Cursor nicht darüber ist, sich wieder einklappt? (Onmouseout?)

Danke im Voraus

Quaese · 20. Mai 2004

Hi,

Du meinst sicherlich, dass sich das Menü über dem Link aufklappt. Einfach den
Link unterhalb des Div-Containers plazieren.

Code:

<div id="cat1" style="display: none;" ...>
</div>
<a href="#" ...>Category 1</a>

Mit dem onmouseout kannst Du das Einklappen des Menüs erreichen. Ich
würde das Script jedoch etwas abändern.

Code:

function show(divid, isOver) {
    d=document;
    if(isOver == 1){
        d.getElementById(divid).style.display="inline";
    }else{
        d.getElementById(divid).style.display="block";
    }
}

Das Script erwartet die Übergabe von zwei Parametern:
divid - ID des einzublendenden Menüs
isOver - 1 = es handelt sich um ein Mouseover-Effekt, sonst = MouseOut

Ausserdem habe ich wegen der Anzeige in Nicht-IE-Browsern "inline" in "block" geändert.

Aufgerufen wird die Funktion wie folgt:

Code:

<div id="cat1" style="display:none" onMouseover="show('cat1',1)" onmouseout="show('cat1',0)">
    <a href="#" class="sub"><TR><TD width="70"><IMG SRC="Bild/MITGLIEDER.gif" WIDTH=70 HEIGHT=30 border="0"></TD></TR></a><br>
    <a href="#" class="sub"><TR><TD width="70"><IMG SRC="Bild/MITGLIEDER.gif" WIDTH=70 HEIGHT=30 border="0"></TD></TR></a><br>
    <a href="#" class="sub"><TR><TD width="70"><IMG SRC="Bild/MITGLIEDER.gif" WIDTH=70 HEIGHT=30 border="0"></TD></TR></a><br>
</div>
<a href="#" onMouseover="show('cat1', 1)" onmouseout="show('cat1',0)">Category 1</a><br><br>

"onmouseout" und "onmouseover" werden sowohl im Div-Container als auch im
Link eingebunden!

Ausserdem verwendest Du in Deinen Menü TD- und TR-Tags, ohne eine Tabelle
definiert zu haben!?

Ciao
Quaese

Garaen · 21. Mai 2004

Danke für die schnelle Hilfe.

Das Menu klappt zwar nun nach oben auf .. aber das mit dem einklappen geht irgendwie nochnicht ganz.
Woran könnte das liegen?
------------------------------------------------------------------------------------------------------
"Ausserdem verwendest Du in Deinen Menü TD- und TR-Tags, ohne eine Tabelle
definiert zu haben!?"

Ähm...... meinst du mit dem <table> </table> Tag ?
-------------------------------------------------------------------------------------------------------

thx im Voraus

Quaese · 21. Mai 2004

Hi,

es kann unzählige Gründe haben, dass das Menü nicht aufklappt! Da es bei mir
jedoch problemlos funktioniert, schicke ich Dir den Code im Anhang mit.

Ja, ich meinte Table-Tags. Die habe ich ebenfalls in den Code eingefügt.

Ciao
Quaese

Garaen · 21. Mai 2004

hm stimmt es funktioniert !

Danke vielmals !

Garaen · 21. Mai 2004

hio
Hm das Skript funktioniert zwar super .. aber irendwie schaffe ich es nicht das richtig in meine Website, welche mit Slices erstellt wurde, zu integrieren ....
Kaum ist das Script drin, verschieben sich alle Slices .
Hier ist der Quelltext meiner Website (thoraxchirurgie.ch. + tt)

Code:

rl]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN">
<HTML>
<HEAD>
<TITLE>Thoraxchirurgie</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">	

<script type="text/javascript">
<!--

function show(divid, isOver) {
	d=document;
	if(isOver == 1){
	  d.getElementById(divid).style.display="inline";
	}else{
	  d.getElementById(divid).style.display="none";
	}
}
//-->
</script>

</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 >
<DIV ALIGN=CENTER>

<!-- ImageReady Slices (Thoraxchirurgie.psd) -->
<TABLE WIDTH=785 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD WIDTH=48 HEIGHT=900 ROWSPAN=8>
			<IMG SRC="Bild/spacer.gif" ALT=""></TD>
		<TD HEIGHT=21 COLSPAN=13>
			<IMG SRC="Bild/spacer.gif" ALT=""></TD>
	</TR>
	<TR>
		<TD Background="Bild/Header2.gif" HEIGHT=122 ALT="" COLSPAN=12>
	</TD>
		<TD WIDTH=46 HEIGHT=879 ROWSPAN=7>
			<IMG SRC="Bild/spacer.gif" ALT=""></TD>
	</TR>
	<TR>
		<TD Background="Bild/Header2-03.gif" HEIGHT=40 ALT="" COLSPAN=9 ROWSPAN=2>
		   </TD>
		<TD Background="Bild/Marquee.gif" WIDTH=352 HEIGHT=25 ALT="">
    <marquee>April 25 - 28., AATS American Association for Thoracic Surgery, Toronto ||||| June 23 - 25., Schweizerische Gesellschaft f&uuml;r Chirurgie gemeinsam mit der Schweizerischen Gesellschaft f&uuml;r Thorax-, Herz- und Gef&auml;sschirurgie, Davos ||||| September 12 - 15., EACTS European Association for Cardio Thoracic Surgery, Leipzig ----- 
							</marquee>
			</TD>
		<TD Background="Bild/Header2-05.gif" WIDTH=75 HEIGHT=40 ALT="" COLSPAN=2 ROWSPAN=2>
		  </TD>
	</TR>
	<TR>
		<TD Background="Bild/Header2-06.gif" WIDTH=352 HEIGHT=15 ALT="">
      </TD>
	</TR>
	<TR>
		<TD Background="Bild/Seite-Links.gif" WIDTH=7 HEIGHT=584 ALT="" ROWSPAN=2>
		   </TD>
		<TD><a href="homesite.html" target="main"><img src="Bild/HOME.gif" width="49" height="36" name="button" border="0"></a></TD>
		<TD Background="Bild/navpause1.gif" WIDTH=2 HEIGHT=36 ALT="">
		    </TD>
        
 
		<TD><a href="statutensite.html" target="main"><img src="Bild/STATUTEN.gif" width="60" height="36" border="0"></a></TD>
 

		<TD Background="Bild/navpause2.gif" WIDTH=1 HEIGHT=36 ALT="">
		     </TD>
		<TD width="70">
			<IMG SRC="Bild/MITGLIEDER.gif" WIDTH=70 HEIGHT=36 ALT=""></TD>
		<TD Background="Bild/navpause3.gif" WIDTH=2 HEIGHT=36 ALT="">
			   </TD>
		<TD width="65">
			<IMG SRC="Bild/VORSTAND.gif" WIDTH=65 HEIGHT=36 ALT=""></TD>
		<TD Background="Bild/nix.gif" WIDTH=428 HEIGHT=36 ALT="" COLSPAN=3>
	       </TD>
		<TD Background="Bild/Seite-Rechts.gif" WIDTH=7 HEIGHT=584 ALT="" ROWSPAN=2>
		 </TD>
	</TR>
	<TR>
		<TD Background="Bild/Main.gif" HEIGHT=548 ALT="" COLSPAN=10>
     <IFRAME SRC="homesite.html" WIDTH="677" HEIGHT="548" name="main" align="center"
     border="0" frameborder="0" noresize scrolling="auto">
     </IFRAME> 
			   </TD>
	</TR>
	<TR>
		<TD Background="Bild/Unten.gif" HEIGHT=66 ALT="" COLSPAN=12>
			    </TD>
	</TR>
	<TR>
		<TD HEIGHT=67 COLSPAN=12>
			<IMG SRC="Bild/spacer.gif" ALT=""></TD>
	</TR>
	<TR>
		<TD WIDTH=48 HEIGHT=1>
			<IMG SRC="Bild/spacer.gif" ALT=""></TD>
		<TD WIDTH=7 HEIGHT=1>
			<IMG SRC="Bild/spacer.gif" ALT=""></TD>
		<TD WIDTH=49 HEIGHT=1>
			<IMG SRC="Bild/spacer.gif" ALT=""></TD>
		<TD WIDTH=2 HEIGHT=1>
			<IMG SRC="Bild/spacer.gif" ALT=""></TD>
		<TD WIDTH=60 HEIGHT=1>
			<IMG SRC="Bild/spacer.gif" ALT=""></TD>
		<TD WIDTH=1 HEIGHT=1>
			<IMG SRC="Bild/spacer.gif" ALT=""></TD>
		<TD WIDTH=70 HEIGHT=1>
			<IMG SRC="Bild/spacer.gif" ALT=""></TD>
		<TD WIDTH=2 HEIGHT=1>
			<IMG SRC="Bild/spacer.gif" ALT=""></TD>
		<TD WIDTH=65 HEIGHT=1>
			<IMG SRC="Bild/spacer.gif" ALT=""></TD>
		<TD WIDTH=8 HEIGHT=1>
			<IMG SRC="Bild/spacer.gif" ALT=""></TD>
		<TD WIDTH=352 HEIGHT=1>
			<IMG SRC="Bild/spacer.gif" ALT=""></TD>
		<TD WIDTH=68 HEIGHT=1>
			<IMG SRC="Bild/spacer.gif" ALT=""></TD>
		<TD WIDTH=7 HEIGHT=1>
			<IMG SRC="Bild/spacer.gif" ALT=""></TD>
		<TD WIDTH=46 HEIGHT=1>
			<IMG SRC="Bild/spacer.gif" ALT=""></TD>
	</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>

das Scipt sollte da stehen :

<TD><a href="statutensite.html" target="main"><img src="Bild/STATUTEN.gif" width="60" height="36" border="0"></a></TD>

Kann das Menu nicht Tabellenübergreifend sein ?

Thx im Voraus

Quaese · 21. Mai 2004

Hi,

damit das Menü Dein Layout nicht verschiebt, muss es absolut positioniert werden.

Ich bin folgendermassen vorgegangen:

Einen äusseren relativen Div erstellt. Dieser nimmt alle weiteren Menü-Elemente
auf. Die absoluten Angaben der enthaltenen Elemente beziehen sich auf die
Abmessungen dieses Containers.
Absolutes Positionieren des Ausklappmenüs um die Anzahl Pixel des Linkbildes
oberhalb des unteren Randes.
Absolutes Positionieren von Link und Bild genau auf dem unteren Rand.

Weiterhin habe ich in die Tabellenzellen des Menüs ein Hintergrundbild eingebunden.
Dies war notwendig, da sonst Lücken zu sehen waren (Bild war zu schmal).

Ich habe den Quellcode und das Hintergrundbild in den Anhang gepackt.

Ach ja, ich habe zum Testen alle Bilder mit absolutem Pfad eingebunden. Das
musst Du wieder ändern.

Hoffentlich hast Du es Dir so vorgestellt.

Edit:
In Zeile 54 steht valign="middle". Das musst Du in valign="bottom"
ändern, da sonst die Anzeige im Opera nicht richtig funktioniert.

Ciao
Quaese

Garaen · 21. Mai 2004

Sieht schon viel schöner aus nur sind einzelne Teile noch verschoben .. aber danke vielmals muss mir das mal anschauen

DHTML ?Rolldown? Menu

Garaen

Grünschnabel

Quaese

Moderator

Garaen

Grünschnabel

Quaese

Moderator

Garaen

Grünschnabel

Garaen

Grünschnabel

Quaese

Moderator

Garaen

Grünschnabel

Neue Beiträge