Dropdown Menü//Javascript

Skaters

Hallo, ich habe für die Navigation meiner Webseite Dropdownmenüs für die Navigationsbuttons erstellt, welchee mit jedoch ein kleiens Problem bereiten.
Funktioniert halt so, dass man auf einen Button klickt, dann öffnet sich darunter eine kleine Navigatigation (dropdown Menü) in dem einige Sublinks sind.
Das ganze sieht erstma so aus:

Script+Stylesheet

Code

<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>

Alles anzeigen

Und die Buttons+Menü:

Code

<div id="m1" class="menu" style="left:554;top:208;">
[url='javascript:do_menu('m1x')']Button01[/url]
</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]Data/dropdown01.gif[/img]</td><td width="117" height="14">[img]Data/dropdown02.gif[/img]</td><td width="10" height="14">[img]Data/dropdown03.gif[/img]</td></tr>
<tr><td width="10" background="Data/dropdown04.gif"></td><td width="117" background="Data/dropdown05.gif">
[url='ihre.htm'][b]Sublink[/b][/url]


[url='ihre.htm'][b]Sublink[/b][/url]


[url='ihre.htm'][b]Sublink[/b][/url]


[url='ihre.htm']Sublink[/url]</td><td width="10" background="Data/dropdown06.gif"></td></tr>
<tr><td width="10" height="15">[img]Data/dropdown07.gif[/img]</td><td width="117" height="15">[img]Data/dropdown08.gif[/img]</td><td width="10" height="15">[img]Data/dropdown09.gif[/img]</td></tr>
</table>
</div>

Alles anzeigen

Problem:
Die Sachen im <div> Tag scheinen eine fest Position, jenach Auflösung des Monitores (oder so) zu haben. Wenn man das Browserfenster in der Größe verändert, bleiben die Buttons wo sie sind, während sie die Tabelle verschiebt.
Im Internetexplorer (der bei mir die Seite in einer anderen Auflöösung anzeigt) sind die Buttons schon von vorn rein falsch Positioniert.

Weiss jemand, was falsch ist und wie ich das Problem lösen kann?
Danke im vorraus!

jojo87

was hältst du von einem reinen css dropdown menu?
http://www.htmldog.com

K.Y.L.T.

Nimm lieber ein css-dropdown wie jojo87 vorgeschlagen hat,
Javascriptnavis sind unsicher, weil du sie ja jederzeit ausschalten kannst, dann wars mit der Navigation;)

No0ob

CSS Menüs funktionieren auch nicht in älteren Browsern.

Skater

Hallo, danke für die Antworten.
Ich habe eure Ratschläge befolgt und konnte mit erfolgreich eine hübsche Navigation zusammenbasteln. Das Problem ist, sie funktioniert momentan nur mit Mozilla Firefox (getestet in Mozilla Firefox, Internet Explorer und tOnline Browser).

Im Internet Explorer beispielsweise sieht man die Buttons, aber beim Rollover bzw draufklicken, dropt das Menü nicht down!

Style

Code

<style>


#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}


#nav a {
	display: block;
	width: 10em;
}


#nav li {
	float: left;
	width: 10em;
}


#nav li ul {
	position: absolute;
	width: 10em;
	left: -999em;
	border: 4px solid #5C0000;
	background-color: #900000;
}


#nav li:hover ul {
	left: auto;
}


sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);


#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}


</style>

Alles anzeigen

Buttons

Code

<ul id="nav">
	[*][url='#']ButtonX[/url]
		    <ul>
              [*][url='#']Sublink[/url]
              [*][url='#']Sublink[/url]
              [*][url='#']Sublink[/url]
              [*][url='#']Sublink[/url]
            [/list]

Tags