Scrollendes Menü

Die Idee hinter diesem scrollenden Menü ist es, das Menü dem User auch bei längerem scrollen immer zur Verfügung stellen zu können.

Entwickelt:

2003

Code:

HTML, CSS, Javascript/DHTML

Entwicklung:

Da Browser wie der MSIE 6 und andere ältere Browser die CSS-Eigenschaft "position:fixed" nicht unterstützen, habe ich damals dieses Menü entwickelt.
Da zur Zeit wahrscheinlich nur noch die britische Regierung dumm genug ist, nicht auf MSIE 8 oder zumindest 7 zu aktualisieren oder einen alternativen Browser zu benutzen, hat sich dieses Menü wohl erledigt.

Status:

Veraltet. Eine Weiterentwicklung oder Anpassung an moderne Standards wie DOM lohnt nicht und ist daher nicht vorgesehen.

Erklärung:

Per DHTML wird die Position des Inhaltes auf dem Bildschirm ermittelt und das Menü dem folgend verschoben.

Der Nutzer kann per Checkbox wählen, ob das Menü mitscrollen soll oder nicht. Diese Abfrage wird per document.write geschrieben und daher bei deaktiviertem Javascript nicht angezeigt.

Hinweise:

Dieses Menü funktioniert tadellos, ist aber ein CPU- und Speicherfresser.
Wie oben erwähnt sollte man heute die Möglichkeit von CSS nutzen, das Menü mit position:fixed zu fixieren.

Außerdem kann das Menü so nicht in eine XHTML-Seite eingebunden werden, da XHTML die JavaScript-Funktion document.write() nicht unterstützt!

Der Quellcode:

 und so siehts aus...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <meta http-equiv="Content-Type" 
       content="text/html; charset=utf-8">
 <meta name="robots" content="index,follow">
 <meta name="author" content="Jörg Ahrens">
 <meta name="publisher" content="Jörg Ahrens">
 <meta name="copyright" content="Jörg Ahrens">
 <meta name="date" content="2003-12-01T10:00:00+02:00">

 <title>[Gueldensterns scrollendes Menü]</title>

 <style type="text/css">
 <!--
 #menuhaupt {
  background-color:#CCCCCC;
  position:absolute;
  top:80px;
  left:60px;
  width:180px;
  border:1px solid #000000;
 }
 //-->
 </style>
</head>
<body onload="init()">

 <div id="menuhaupt">
  <a href="htmlscroll.html">Link 1</a><br>
  <a href="htmlscroll.html">Link 2</a><br>

  <script type="text/javascript">
  <!--
   if(window.top.name=='false') {
    with(document) {
     write('<form>');
     write('Menü scrollt mit&nbsp;');
     write('<input ');
     write('type=checkbox ');
     write('onClick="Scroll = !Scroll; ');
     write('window.top.name = Scroll;">');
     write('<\/form>');
    }
   } else {
    window.top.name='true';
    with(document) {
     write('<form>');
     write('Menü scrollt mit&nbsp;');
     write('<input ');
     write('type=checkbox ');
     write('onClick="Scroll = !Scroll; ');
     write('window.top.name = Scroll;" ');
     write('checked>');
     write('<\/form>');
    }
   }
  //-->
  </script>

 </div>

 <script type="text/javascript">
 <!--

  /*************************************
   Script von Joerg Ahrens
   www.gueldenstern-webdesign.de
   Fragen an:
   info@gueldenstern-webdesign.de
  *************************************/

  var DHTML=(document.getElementById ||
             document.all ||
             document.layers);
  var menuhaupt;
  var Scroll=true;
  var lastScrollY=0;
  var percent;
  var winpos=10;

  function init() {
   if(!DHTML) return;
   menuhaupt = new nimmObj('menuhaupt');
   Scroll=(document.layers) ?
    document.menuhaupt.document.forms[0].elements[0].checked :
    document.forms[0].elements[0].checked;
   LaufDuSau();
  }

  function LaufDuSau() {
   if(window.top.name=='true') {
    if(window.innerHeight) {
     pos=window.pageYOffset;
    } else if(document.documentElement &&
              document.documentElement.scrollTop) {
     pos=document.documentElement.scrollTop;
    } else if(document.body) {
     pos=document.body.scrollTop;
    }

    // Falls die Position auf der Seite
    // immer die gleiche sein soll,
    // einfach die naechsten drei Zeilen
    // weglassen und ersetzen durch:
    // pos += X # X = Abstand vom oberen
    // Fensterrand

    pos+=0;
    // urspruengliche Position
    if(pos<=70) pos=70;
    // Abstand vom oberen Fensterrand
    if(pos>70) pos+=10;
    if(pos!=lastScrollY) {
     percent=.03*(pos-lastScrollY);
     if(percent>0) {
      percent=Math.ceil(percent);
     } else {
      percent=Math.floor(percent);
     }
     winpos=winpos+percent;
     menuhaupt.style.top=winpos;
     lastScrollY=lastScrollY+percent;
    }
   }
   temp=window.setTimeout('LaufDuSau()',1);
  }

  function nimmObj(name) {
   if(document.getElementById) {
    this.style=document.getElementById(name).style;
   } else if(document.all) {
    this.style=document.all[name].style;
   } else if(document.layers) {
    this.style=document.layers[name];
   }
  }
 //-->
 </script>



 <!-- Das Folgende täuscht Inhalt vor -->

 <script type="text/javascript">
 <!--
 for(i=1;i<=50;i++) {
  document.write('<p>&nbsp;<\/p>');
 }
 //-->
 </script>
</body>
</html>

Gueldenstern Webdesign ist Jörg Ahrens · 24, bd Robert Schuman · L-8340 Olm
Sitemap · Impressum · © 2002-2024

GUELDENSTERN WEBDESIGN

Gueldenstern Webdesign

JÖRG AHRENS · OLM · LUXEMBURG ::  GESTALTUNG  ·  PROGRAMMIERUNG  ·  SERVICES