Durchsichtiges Menü

Auf dieser Homepage wird ein durchsichtiges Menü verwendet, welches durch den Benutzer frei positioniert werden kann. Es behält seine Position, selbst wenn die Seite gescollt wird. Eigentlich gibt es dafür den CSS-Befehl POSITION:fixed. Dieser Befehl wird von keinem aktuellen Browser unterstützt.
Es gibt aber eine Möglichkeit diesen Effekt bei allen aktuellen Browsern zu erzwingen, ohne Browserfehler o.Ä. auszunutzen.

Der Vorteil dieses Menüs besteht darin, dass ich den gesamten Bildschirm für die Darstellung meiner Inhalte nutzen kann. Ich werde nicht durch den Navigationsframe eingeengt. Da ich nicht durch Frames begrenzt bin, kann sich das Menü in alle Richtungen verändern.
Dieses Menü hat aber auch einen Nachteil. Sie müssen die gesamte Menüstruktur und -verarbeitung in jeder Seite haben. Dadurch verbrauchen ihre Seiten mehr Speicher.

Obwohl diese Homepage keinen Navigationsframe besitzt, wird trotzdem ein Frameset verwendet. Neben dem Hauptfenster gibt es noch einen 0 Pixel breiten Datenframe.
In dem Datenframe befinden sich die meisten Verarbeitungsroutinen. Dies hat den Vorteil, diese Routinen nur einmal in den Datenframe geladen werden und nicht in jeder Seite neu geladen werden müssen.

Zusätzlich kann ich den Datenframe nutzen um Informationen seitenübergreifend zu speichern.
Dazu ist es aber notwendig, dass man mit der Ausführung von Befehlen in anderen Frames vertraut ist.
Ein weiterer Vorteil besteht darin, dass beim Internet Explorer der inaktive Scrollbalken vom BODY verschwindet.

Die Verarbeitungsroutinen für das Verschieben des Menüs können nicht in den Datenframe ausgelagert werden. Im Datenframe sollte man aber die Position des Menüs speichern, damit bei der nächsten Seite das Menü an der gleichen Stelle erscheint. Die restlichen Verarbeitungsroutinen können ausgelagert werden.

Um ein fixiertes Menü zu erstellen gehen Sie wie folgt vor:

Erstellen Sie 2 Abschnitte mit jeweils mit dem HTML-Befehl DIV
Der erste Abschnitt ist für ihr Menü und wird absolut an der gewünschten Postion positioniert.
Der zweite Abschnitt wird ebenfalls absolut positioniert und auf eine Größe von 100 Prozent des Bildschirms festgelegt. Zusätzlich müssen Sie das Scrollen erlauben. Den gewünschten Inhalt der Seite schreiben Sie dann IN den zweiten Abschnitt. Das war's.

Wenn der Benutzer das Menü bewegen soll, müssen folgende Punkte beachtet werden.

Damit der Benutzer nicht auf jeder Seite das Menü neu positionieren muss, ist es notwendig dass die Koordinaten des Menüs im Datenframe gespeichert werden und beim Laden der Seite die Position angepasst wird. Dafür gibt es die function Init();
Sie sollten dem Besucher einen Hinweis darauf geben, dass das Menü beweglich ist, z.B. durch Veränderung des Cursors mit CSS: CURSOR:move;
Als letztes benötigen Sie noch die Routine, die das Menü bewegt.

Diese Bewegungroutine funktioniert folgendermaßen:
Immer wenn der Benutzer die Maus bewegt, wird die function drag ausgeführt. Diese function ermittelt zuerst die Position des Mauszeigers. Wenn in der Variable dragobjekt etwas gespeichert ist, wird die Position von dragobjekt an die Mausposition angepasst und zusätzlich im Datenframe gespeichert.
Wenn der Benutzer über dem Menü eine Maustaste drückt wird die function dragstart mit dem Parameter this (für das Menü) aufgerufen. Diese function speichert this (das Menü) in der Variable dragobjekt und merkt sich die relative Position des Mauszeigers im Menü.
Wenn der Benutzer die Maustaste los lässt, wird die function dragstop ausgeführt. Diese function löscht das Menü aus Variablen dragobjekt. Nun wird nichts mehr bewegt, wenn der Benutzer die Mauspostion verändert.

Nun noch die Quelltexte mit Kommentaren.

index.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

<HTML>
  <HEAD>
  </HEAD>

  <FRAMESET COLS="*, 0" BORDER="0" FRAMEBORDER="0" FRAMESPACING="0">
    <FRAME NAME="Haupt" NORESIZE SCROLLING="no" SRC="start.htm">
    <FRAME NAME="Daten" NORESIZE SCROLLING="no" SRC="daten.htm">
  </FRAMESET>
</HTML>

daten.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<HTML>

<HEAD>
  <SCRIPT TYPE="text/javascript">
    var MenueX = 10;  //Startposition des Menüs. x-Achse.
    var MenueY = 10;  //Startposition des Menüs. y-Achse
  //-->
  </SCRIPT>
</HEAD>

<BODY>
</BODY>

</HTML>

start.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<HTML>

<HEAD>
  <TITLE>Durchsichtiges Menü</TITLE>
  <META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=ISO-8859-1">

  <SCRIPT TYPE="text/javascript">

    var dragobjekt = null;  //Speichert das zu bewegende Objekt? Am Anfang wird kein Objekt bewegt.
    var dragx = 0;          //Speichert die relative Position des Mauszeigers im Objekt. X-Achse
    var dragy = 0;          //Speichert die relative Position des Mauszeigers im Objekt. Y-Achse
    var posx = 0;           //Speichert die absolute Position des Mauszeigers. X-Achse
    var posy = 0;           //Speichert die absolute Position des Mauszeigers. Y-Achse

    function Init() {       //Diese Funktion wird nach dem Laden der Seite ausgeführt.
      document.onmousemove = drag;   //Bei Bewegung der Maus soll die function drag ausgeführt werden.
      document.onmouseup = dragstop; //Beim Loslassen der Maustaste führe die function dragstop aus.
      document.getElementById("iMenue").style.left = parent.Daten.MenueX+"px"; 
      document.getElementById("iMenue").style.top = parent.Daten.MenueY+"px";
          //Die beiden oberen Befehle lesen aus dem Datenframe die letzte Position des Menüs aus und
          //setzen das Menü auf die gespeicherte Position.
    }

    function drag(ereignis) {               //Funktion für die Bewegung des Objekts
      posx = document.all ? window.event.clientX : ereignis.pageX;  //Ermittle die Position des Maus-
      posy = document.all ? window.event.clientY : ereignis.pageY;  //zeigers.
      if(dragobjekt != null) {                                      //Wenn etwas in dragobjekt ist
        dragobjekt.style.left = (posx - dragx) + "px";              //Verändere die Position von
        dragobjekt.style.top = (posy - dragy) + "px";               //dragobjekt.
        parent.Daten.MenueX = (posx - dragx);                       //Speichere die Position im
        parent.Daten.MenueY = (posy - dragy);                       //Datenframe
      }
    }

    function dragstart(element) {           //Funktion für die Einleitung der Bewegung.
      dragobjekt = element;                 //Speichere das übergebene Objekt in der Variable dragobjekt.
      dragx = posx - dragobjekt.offsetLeft; //Errechne die relative Position des Mauszeigers im Objekt
      dragy = posy - dragobjekt.offsetTop;  //für x und y-Achse.
    } 

    function dragstop() {                   //Funktion für die Beendigung der Bewegung.
      dragobjekt=null;                      //Leere die Varible dragobjekt. 
    }

  //-->
  </SCRIPT>
</HEADT>

<BODY STYLE="MARGIN:0px" onLoad="javascript:Init()">
  <DIV ID="iMenue" onMouseDown="dragstart(this)" 
      STYLE="BORDER:2px solid red; POSITION:absolute; LEFT:10px; TOP:10px; Z-INDEX:9">
    <TABLE STYLE="CURSOR:move; PADDING:2px;">
      <TR><TD> </TD></TR>
      <TR><TD STYLE="BACKGROUND-COLOR:yellow">
        <A HREF="link1.htm">Link 1</A> 
        <A HREF="link2.htm">Link 2</A>
        <A HREF="link3.htm">Link 3</A>
      </TD></TR>
    </TABLE>
  </DIV>
  <DIV STYLE="POSITION:absolute; LEFT:0px; TOP:0px; HEIGHT:100%; WIDTH:100%; OVERFLOW:auto"> 
    Hier kommt der Text, die Bilder und der ganze Rest rein.<BR>
    ...
    Und noch mehr Text. (Startseite)<BR>
    ...
    ...
  </DIV>
</BODY>

</HTML>

Quellcode als Seite zeigen