MaX: relative Ausrichtung eines Menüs?

Beitrag lesen

Hi Struppi,

okay, so kommen wir nicht weiter. Hier also der Quelltext von der html-Datei und das komplette Javascript :).
Im Javascript sind zwei Variablen: var TopStartLinks = 20; und
var TopStartOben = 20; . Diese beiden Variablen bestimmen ganz offensichtlich die Lage des Menues. Und ich vermute, dass ich mit diesem Menue nicht das erreiche, was ich mir vorgestellt habe.
Aber ich lass mich gern überraschen.

Also schon mal vielen Dank und einen schönen Abend!

MaX

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Seite</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
#Navigationsersatz { position:absolute; top:20px; left:20px; }
#Seite { position:absolute; top:60px; left:20px; right:20px; z-index:1; }
</style>
<link rel="stylesheet" href="formate.css" type="text/css">
<script src="navigation.js" type="text/javascript"></script>
</head>
<body onLoad="Init()">
<div id="Navigationsersatz">
<noscript>
<a href="navigationsframe.htm" target="_blank"><b>Navigation</b></a>
</noscript>
</div>
<div id="Seite" onClick="Menue_zuruecksetzen()">
<h1>Ein berühmter Blindtext und sein Hintergrund</h1>

<p>Text</p>

</div>
</body>
</html>

Javascript

"top","Fotos","#",
 "down","Seite 01","http://........",
 "down","Seite 02","http://........",
 "down","Seite 03","http://........",,
 "down","Seite 04","http://........",
 "down","Seite 05","http://........",
 "down","Seite 06","http://........",
 "down","Seite 07","http://........",
 "down","Seite 08","http://........",
 "down","Seite 09","http://........",
 "down","Seite 10","http://........",
 "down","Seite 11","http://........",
 "down","Seite 12","http://........"
);
var MenueDivs = new Array();

var TopStartLinks = 20;
var TopStartOben = 20;
var TopBreite = 120;
var DownBreite = 220;
var DownLinksrand = 20;
var TopHoehe = 20;
var DownHoehe = 20;
var MenueHintergrundfarbe = "#CCCCCC";
var MenueText = "Tahoma,sans-serif";
var MenueTextfarbe = "#000000";
var MenueTextgewicht = "bold";
var MenueTextgroesse = "13px";
var MenueInnenabstand = "2px";
var MouseoverHintergrundfarbe = "#D00000";
var MouseoverTextfarbe = "#FFFFFF";
var Rechtsversatz = 0;
var Untenversatz = 0;

function Init() {
 if(document.getElementById)
  Menue_erzeugen();
 else
  if(! parent.Daten)
   window.location.href = "navigationsframe.htm";
}

function Menue_erzeugen() {
 var j = 0;
 for(var i = 0; i < Menue.length; i += 3) {
  MenueDivs[j] = document.createElement("div");
  MenueDivs[j].style.position = "absolute";
  MenueDivs[j].style.fontFamily = MenueText;
  MenueDivs[j].style.fontSize = MenueTextgroesse;
  MenueDivs[j].style.color = MenueTextfarbe;
  MenueDivs[j].style.fontWeight = MenueTextgewicht;
  MenueDivs[j].style.backgroundColor = MenueHintergrundfarbe;
  MenueDivs[j].style.padding = MenueInnenabstand;
  MenueDivs[j].style.zIndex = "2";
  if(Menue[i] == "top") {
   MenueDivs[j].innerHTML = "<a class="nav" href=""+ Menue[i+2] + "" onMouseover="MouseoverTopMenue(" + j + ")" onMouseout="MouseoutTopMenue(" + j + ")">" + Menue[i+1] + "</a>";
   Untenversatz = 0;
   if(i > 0) Rechtsversatz += TopBreite;
   MenueDivs[j].style.top = TopStartOben + "px";
   MenueDivs[j].style.left = TopStartLinks + Rechtsversatz + "px";
   MenueDivs[j].style.width = TopBreite + "px";
   MenueDivs[j].style.height = TopHoehe + "px";
   Untenversatz += TopHoehe;
  }
  else if(Menue[i] == "down") {
   MenueDivs[j].innerHTML = "<a class="nav" href=""+ Menue[i+2] + "" onMouseover="MouseoverDownMenue(" + j + ")" onMouseout="MouseoutDownMenue(" + j + ")">" + Menue[i+1] + "</a>";
   MenueDivs[j].style.top = TopStartOben + Untenversatz + "px";
   MenueDivs[j].style.left = TopStartLinks + Rechtsversatz + "px";
   MenueDivs[j].style.width = DownBreite + "px";
   MenueDivs[j].style.height = DownHoehe + "px";
   MenueDivs[j].style.paddingLeft = DownLinksrand + "px";
   MenueDivs[j].style.visibility = "hidden";
   Untenversatz += DownHoehe;
  }
  document.getElementsByTagName("body")[0].appendChild(MenueDivs[j]);
  j += 1;
 }
}

function MouseoverTopMenue(n) {
  MenueDivs[n].style.backgroundColor = MouseoverHintergrundfarbe;
  Menue_zuruecksetzen();
  for(var i = 0; i < Menue.length; i += 3)
   if(Menue[i] == "down")
    if(parseInt(MenueDivs[parseInt(i/3)].style.left) == parseInt(MenueDivs[n].style.left))
     MenueDivs[parseInt(i/3)].style.visibility = "visible";
}

function MouseoutTopMenue(n) {
  MenueDivs[n].style.backgroundColor = MenueHintergrundfarbe;
}

function MouseoverDownMenue(n) {
  MenueDivs[n].style.backgroundColor = MouseoverHintergrundfarbe;
}

function MouseoutDownMenue(n) {
  MenueDivs[n].style.backgroundColor = MenueHintergrundfarbe;
}

function Menue_zuruecksetzen() {
  for(var i = 0; i < Menue.length; i += 3)
   if(Menue[i] == "down")
    MenueDivs[parseInt(i/3)].style.visibility = "hidden";
}