Daniel : Wie erstelle ich ein "gutes" Aufklappmenü?

Beitrag lesen

Jo Tach auch! Ich hab da ein Problem! Ich hab ein Aufklappmenü abba noch ein Problem damit! Und zwar sieht man das Menü nicht solange es nicht aufgeklappt ist! Ich das gerne wie auf der Seite http://www.futurezone.tv Da Links ist ist son eni Menü abba da sieht man noch ein bild auch wenn es nicht aufgeklappt ist! Wie schaffe ich das es so aussieht? DAs steht in der html:

<html><head><title>Test</title> <script type="text/javascript" src="dhtml.js"></script> <script type="text/javascript"> <!-- function Menue() {  if(DOM) {    if(MS)      getElem("id","Nav",null).style.top = document.body.scrollTop + 50;    else      getElem("id","Nav",null).style.top = window.pageYOffset + 50;  }  if(DOM || MS) {    if (!DOM) getElem("id","Nav",null).style.top = document.body.scrollTop + 50;    if (OP) getElem("id","NavLinks",null).style.pixelTop = NavLinksPos;    getElem("id","Nav",null).style.visibility = "visible";  }  else if(NS) {   getElem("id","Nav",null).visibility = "show";   getElem("id","Nav",null).top = window.pageYOffset + 50;  } }

function noMenue() {  if(DOM || MS)   getElem("id","Nav",null).style.visibility = "hidden";  if(NS)   getElem("id","Nav",null).visibility = "hide"; }

function handleMove(ev) {  if(!MS) {    Event = ev;    if(Event.screenX < 270)      Menue();    else if(Event.screenX > 420)      noMenue();  } }

function MShandleMove() {  if(MS) {   if(window.event.clientX < 270)     Menue();   else if(window.event.clientX > 420)     noMenue();   } }

function Event_init() {  if(DOM && !MS && !OP) {   getElem("tagname","body",0).addEventListener("mousemove", handleMove, true);  }  if(NS) {   document.captureEvents(Event.MOUSEMOVE);   document.onmousemove=handleMove;  }  if (DOM && OP) {     document.onmousemove=handleMove;     NavLinksPos=42; //Position des Bereiches NavLinks     getElem("id","NavLinks",null).style.pixelTop=NavLinksPos;

}  if (MS) getElem("tagname","body",0).onmousemove=MShandleMove; } //--> </script> <style type="text/css"> <!-- body { margin-left:50px; margin-top:20px; margin-right:50px; } #Nav { position:absolute; top:50px; left:0px; padding:0px; visibility:hidden; margin:0px; } #NavLinks { position:absolute; top:42px; left:42px; padding:0px; } a.nav:link    { color:#000080;       font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; } a.nav:visited { color:#000080;       font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; } a.nav:hover   { color:#FFFFFF; background-color:#000080;       font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; } a.nav:active  { color:#000080;       font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; } --> </style> </head> <body onLoad="Event_init()" background="navigation_back.gif" bgcolor="#FFFFFF">

<div id="Nav">  <img src="navigation.gif" width="250" height="450" border="0" alt="">  <div id="NavLinks">  <style type="text/css">   <!--    a.nav:link    { color:#000080;       font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }    a.nav:visited { color:#000080;       font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }    a.nav:hover   { color:#FFFFFF; background-color:#000080;       font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }    a.nav:active  { color:#000080;       font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }    -->   </style>   <a class="nav" href="http://selfhtml.teamone.de/"><b>SELFHTML</b></a><br>   <a class="nav" href="http://selfaktuell.teamone.de/"><b>SELFHTML aktuell</b></a><br>   <a class="nav" href="http://forum.de.selfhtml.org/"><b>SELFHTML Forum</b></a><br>   <a class="nav" href="http://selfaktuell.teamone.de/artikel/"><b>Feature Artikel</b></a><br>  </div> </div>

<h1>Die Seite mit der pfiffigen Navigation</h1>

<p>Einfach mit die Maus Richtung linken Fensterrand bewegen. Um das Menü wieder wegzubekommen, Maus wieder zum rechten Fensterrand bewegen.</p>

<p>Und jetzt kommen noch etliche leere Absätze, damit auch sichtbar wird, daß das Menü immer an der gleichen Stelle angezeigt wird, egal wie weit man scrollt.</p>

<p> </p><p> </p><p> </p><p> </p> <p> </p><p> </p><p> </p><p> </p> <p> </p><p> </p><p> </p><p> </p> <p> </p><p> </p><p> </p><p> </p> <p> </p><p> </p><p> </p><p> </p> <p> </p><p> </p><p> </p><p> </p> <p> </p><p> </p><p> </p><p> </p> <p> </p><p> </p><p> </p><p> </p>

<p>Na, das dürfte reichen :-)</p>

</body></html>

Und Das STEHT IN DER DHTML::::

/* DHTML-Bibliothek */

var DHTML = 0, DOM = 0, MS = 0, NS = 0, OP = 0;

function DHTML_init() {

if (window.opera) {      OP = 1;  }  if(document.getElementById) {    DHTML = 1;    DOM = 1;  }  if(document.all && !OP) {    DHTML = 1;    MS = 1;  } if(window.netscape && window.screen && !DOM && !OP) {    DHTML = 1;    NS = 1;  } }

function getElem(p1,p2,p3) {  var Elem;  if(DOM) {    if(p1.toLowerCase()=="id") {      if (typeof document.getElementById(p2) == "object")      Elem = document.getElementById(p2);      else Elem = void(0);      return(Elem);    }    else if(p1.toLowerCase()=="name") {      if (typeof document.getElementsByName(p2) == "object")      Elem = document.getElementsByName(p2)[p3];      else Elem = void(0);      return(Elem);    }    else if(p1.toLowerCase()=="tagname") {      if (typeof document.getElementsByTagName(p2) == "object" || (OP && typeof document.getElementsByTagName(p2) == "function"))      Elem = document.getElementsByTagName(p2)[p3];      else Elem = void(0);      return(Elem);    }    else return void(0);  }  else if(MS) {    if(p1.toLowerCase()=="id") {      if (typeof document.all[p2] == "object")      Elem = document.all[p2];      else Elem = void(0);      return(Elem);    }    else if(p1.toLowerCase()=="tagname") {      if (typeof document.all.tags(p2) == "object")      Elem = document.all.tags(p2)[p3];      else Elem = void(0);      return(Elem);    }    else if(p1.toLowerCase()=="name") {      if (typeof document[p2] == "object")      Elem = document[p2];      else Elem = void(0);      return(Elem);    }    else return void(0);  }  else if(NS) {    if(p1.toLowerCase()=="id" || p1.toLowerCase()=="name") {    if (typeof document[p2] == "object")      Elem = document[p2];      else Elem = void(0);      return(Elem);    }    else if(p1.toLowerCase()=="index") {     if (typeof document.layers[p2] == "object")      Elem = document.layers[p2];     else Elem = void(0);      return(Elem);    }    else return void(0);  } }

function getCont(p1,p2,p3) {    var Cont;    if(DOM && getElem(p1,p2,p3) && getElem(p1,p2,p3).firstChild) {      if(getElem(p1,p2,p3).firstChild.nodeType == 3)        Cont = getElem(p1,p2,p3).firstChild.nodeValue;      else        Cont = "";      return(Cont);    }    else if(MS && getElem(p1,p2,p3)) {      Cont = getElem(p1,p2,p3).innerText;      return(Cont);    }    else return void(0); }

function getAttr(p1,p2,p3,p4) {    var Attr;    if((DOM || MS) && getElem(p1,p2,p3)) {      Attr = getElem(p1,p2,p3).getAttribute(p4);      return(Attr);    }    else if (NS && getElem(p1,p2)) {        if (typeof getElem(p1,p2)[p3] == "object")         Attr=getElem(p1,p2)[p3][p4]        else         Attr=getElem(p1,p2)[p4]          return Attr;        }    else return void(0); }

function setCont(p1,p2,p3,p4) {    if(DOM && getElem(p1,p2,p3) && getElem(p1,p2,p3).firstChild)      getElem(p1,p2,p3).firstChild.nodeValue = p4;    else if(MS && getElem(p1,p2,p3))      getElem(p1,p2,p3).innerText = p4;    else if(NS && getElem(p1,p2,p3)) {      getElem(p1,p2,p3).document.open();      getElem(p1,p2,p3).document.write(p4);      getElem(p1,p2,p3).document.close();    } }

DHTML_init();