Dropdown-Menü Navigation

[Lolaskater31337]

Hi, ich arbeite zZ an einer Homepage und habe eine waagerechte Navigation unterm Banner. Jedoch besteht hier kaum die Möglichkeit Unterpunkte für die Links zu platzieren, also möchte ich ein Dropdown-Menü machen.

Etwa so wie in dieser Forensoftware oben:


Beim drüberscrollen/draufklicken soll das Menü erscheinen/ausfahrn und weitere Links offembaren.

Hat jemand einen Vorschlag wie man das am besten löst? Mein Webspace unterstützt alles was man beim Webdesign anwenden kann, also keine Grenzen.

Danke im Vorraus.

 

[BcF]

Bei [Suchmaschine deiner Wahl] suchen nach -> Suckerfish

Es geht theoretisch auch ganz ohne JS aber damit hatte ich zumindest bisher nur Probleme.

Mein Webspace unterstützt alles was man beim Webdesign anwenden kann

Glaub ich nich ;)
Was ist z.B. mit Perl, Python, ASP(.NET) etc.

 

[Drakes]

Es geht theoretisch auch ganz ohne JS aber damit hatte ich zumindest bisher nur Probleme.

Es geht ziemlich gut ohne Probleme auch ohne JS, wenn man mal wieder vom IE6 absieht. :? Daher gibt es auch Lösungen, wo Javascript nur bei IE6 und früher angewendet wird, damit bei den neueren Browsern JS nicht aktiviert sein muss. ;ugl

 

[BcF]

Es geht ziemlich gut ohne Probleme auch ohne JS, wenn man mal wieder vom IE6 absieht. :? Daher gibt es auch Lösungen, wo Javascript nur bei IE6 und früher angewendet wird, damit bei den neueren Browsern JS nicht aktiviert sein muss. ;ugl

Sowie bei Suckerfish ;)

 

[Commodore]

Sowas hier: http://www.html.de/tutorials/12744-js-mouseovermenue.html ? ;)

 

[sandy1]

schau mal unter diesen link da findest du bestimmt was Dynamic Drive DHTML Scripts- Chrome CSS Drop Down Menu

 

[Lolaskater31337]

Hi, danke für die vielen Antworten.
Ich habe etwas rumprobiert und es stellt sich mir das Problem, dass wenn ich Koordinaten für ein Dropdown-Menü angeben muss (im <div> tag) diese im Mozilla Firefox funktionieren, beim Internet Explorer sind diese jedoch irgendwo anderst :O
Andere Browser hab ich nich da.

Ahm ich sehe grad, das hat offembar was mit der Dimensionierung des Fensters zu tun,, wenn mans verändert verschiebt sich die seite aber die sachebn im <div> tag bleiben an ort und stelle aufm Monitor (Buttons+Dropdown Menü) oO


Das Script, das ich gefunden habe und benütze:

Script+Stylesheet

<SCRIPT LANGUAGE="JavaScript">
function test(x) {
 if (navigator.appName == 'Microsoft Internet Explorer')
 x.blur();
}
function show_layer(x)
{
if(document.layers)
document.layers[x].visibility="show";
else
document.all[x].style.visibility="visible";
}
function hide_layer(x)
{
if(document.layers)
document.layers[x].visibility="hide";
else
document.all[x].style.visibility="hidden";
}
var old;
var memold;
var subold;

if(document.layers)
{
window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=do_out;
}
else
{
document.onmouseup=do_out;
}
function do_menu(x)
{
if(!old)
old=memold;
if(old!=x)
{
show_layer(x);
old=x;
} else
old="";
}
function do_check(x)
{
if(old && old!=x)
{
hide_layer(old);
show_layer(x);
old=x;
}
do_submenu();
}
function do_out()
{
if(old)
hide_layer(old);
memold=old; old="";
do_submenu();
}
function do_submenu(x)
{
if(subold)
{
hide_layer(subold);
subold="";
}
if(x)
{
show_layer(x);
subold=x;
}
}
function lade(seite) {
parent.pageFrame.location.href = seite;
}
// -->
</script>
<style>

.menu        {position: absolute;top:0;z-index: 2;}
.submenu    {position: absolute;top: 22;z-index: 1;    visibility: hide;visibility: hidden;}

</style>

Und die Buttons+Dropdown:

<div id="m1" class="menu" style="left:554;top:208;">
<a href="javascript:do_menu('m1x')" onmouseover="do_check('m1x')" onclick="test(this);" >Button01</a>
</div>
<div id="m1x" class="submenu" style="left:567;top:238">
<table cellspacing="0" cellpadding="0" border="0" width="137">
<tr><td width="10" height="14"><img src="Data/dropdown01.gif"></td><td width="117" height="14"><img src="Data/dropdown02.gif"></td><td width="10" height="14"><img src="Data/dropdown03.gif"></td></tr>
<tr><td width="10" background="Data/dropdown04.gif"></td><td width="117" background="Data/dropdown05.gif">
<a href="ihre.htm" TARGET="frame" onmouseover="do_submenu()"><b>Sublink</b></a><br>
<a href="ihre.htm" TARGET="frame" onmouseover="do_submenu()"><b>Sublink</b></a><br>
<a href="ihre.htm" TARGET="frame" onmouseover="do_submenu()"><b>Sublink</b></a><br>
<a href="ihre.htm" TARGET="frame" onmouseover="do_submenu()">Sublink</a></td><td width="10" background="Data/dropdown06.gif"></td></tr>
<tr><td width="10" height="15"><img src="Data/dropdown07.gif"></td><td width="117" height="15"><img src="Data/dropdown08.gif"></td><td width="10" height="15"><img src="Data/dropdown09.gif"></td></tr>
</table>
</div>

Note: Das Dropdownmenü wird als table angezeigt mit paar schicken Grafiken und Textlinks :>