JavaScripts -> Menüs -> Verschiebbares Navigationsmenü

<script type="text/javascript">
<!--
// = = ========================================================================= = =
// = = Draggable Navigation v1.0 (c) 2004 Triple-M / http://www.htmlarsenal.de = =
// = = ========================================================================= = =

// ---------------------------------------------------------------------------------
// -- Dieses Script und viele andere im --
// -- This script and many more in the --
// ---------------------------------------------------------------------------------
// -- HTML ARSENAL - Die Quelle für HTML, JavaScript, PHP --
// -- HTML ARSENAL - Your Source for HTML, JavaScript, PHP --
// ---------------------------------------------------------------------------------
// -- -= http://www.htmlarsenal.de =- --
// ---------------------------------------------------------------------------------

// Sie dürfen dieses Script für nicht-kommerzielle Zwecke nutzen, wenn diese Urheber-Notiz erhalten bleibt.
// You may use this Script for non-commercial causes as long as you include this copyright notice.

// Benutzung:
// ==========

// Fügen Sie an irgendeiner Stelle im Body-Tag ein Script mit dem Inhalt
// dragnavi('Überschrift',breite,höhe,'Titel','Link','Titel','Link','-','Titel','Link',... );
// ein.
// Überschrift -> Überschrift des Navigationsmenüs
// Breite -> Breite des Navigationsmenüs
// Höhe -> Höhe des Navigationsmenüs
// Titel, Link -> Erstellen einen Link im Navigationsmenü
// '-' -> Erstellt ein Trennzeichen
//
// Beispiel:
// ---------
// dragnavi('Navigation',100,75,'HTML Arsenal','http://www.htmlarsenal.de','-','Piranho','http://www.piranho.com');
// erstellt so ein Menü:
// +--------------------+
// | Navigation |
// | |
// | HTML Arsenal |
// | --- |
// | Piranho |
// +--------------------+

// Usage:
// ======

// Include a script with the content
// dragnavi('heading',width,height,'Title','Link','Title','Link','-','Title','Link',... );
// anywhere inside the body tag.
// Heading -> Heading of the navigational menu
// Width -> Width of the navigational menu
// Height -> Height of the navigational menu
// Title, Link -> Create a link in the menu
// '-' -> Creates a seperator
//
// Example:
// --------
// dragnavi('Navigation',100,75,'HTML Arsenal','http://www.htmlarsenal.de','-','Piranho','http://www.piranho.com');
// creates a menu looking like this:
// +--------------------+
// | Navigation |
// | |
// | HTML Arsenal |
// | --- |
// | Piranho |
// +--------------------+




// Veränderbare Einstellungen / Adjustable Settings
// ================================================

var startx=10; // Startposition X-Koordinate / x coordinate starting position
var starty=10; // Startposition Y-Koordinate / y coordinate starting position

var col_border=""; //#cc2020 // Rahmenfarbe (Leer lassen für keinen Rahmen) / border color (leave empty for no border)
var col_bg=""; //#ffffff // Hintergrundfarbe (Leer lassen für keinen Hintergrund) / background color (leave empty for no background)
var col_body="#000000"; // Textfarbe der Links / text color of the links
var col_head="#ffffff"; // Textfarbe der Überschrift / text color of the heading
var bg_img="/pics/examples/remote.gif"; // Hintergrundbild (Leer lassen für kein Hintergrundbild)
                              // background image (leave empty for no background image)

var seperator='<img src="/pics/examples/seperator.gif" alt="" style="margin:2px">'; // Trennzeichen / seperator

var align_body="center"; // Textausrichtung (left,right,justify,center) / text alignment (left,right,justify,center)

var size_body="12px"; // Schriftgröße der Links / font size of the links
var size_head="15px"; // Schriftgröße der Überschrift / font size of the heading

var margin_head="10px"; // Abstand unter der Überschrift / margin below the heading

var movecursor=true; // Soll der Mauszeiger zu einem Verschiebepfeil werden? / Shall the cursor become a moving arrow?
var underline_links=false; // Sollen die Links unterstrichen werden? / Shall the links be underlined?


// Script-Code
// ===========

// Ab hier bitte nichts mehr verändern
// Please do not change anything from here on

var mousex=0;
var mousey=0;

var offx,offy;
var dragging=0;

function capturemaus(nsevent) {
  if(window.event) {
    mousex=window.event.clientX;
    mousey=window.event.clientY;
  }
  else {
    mousex=nsevent.pageX;
    mousey=nsevent.pageY;
  }
  if(dragging) {
    document.getElementById("dragnavi").style.left=(mousex+offx)+"px";
    document.getElementById("dragnavi").style.top=(mousey+offy)+"px";
  }
}

document.onmousemove=capturemaus;


function startdrag() {
  offx=parseInt(document.getElementById("dragnavi").style.left)-mousex;
  offy=parseInt(document.getElementById("dragnavi").style.top)-mousey;
  dragging=1;
}

function stopdrag() {
  dragging=0;
}

function dragnavi() {
  if(dragnavi.arguments.length<5) {
    alert("Ung&uuml;ltiger Aufruf!");
    return;
  }
  document.writeln('<div id="dragnavi" style="position:absolute; padding:0px; left:'+startx+'px; top:'+starty+'px; width:'+dragnavi.arguments[1]+'px; height:'+dragnavi.arguments[2]+'px; '+(col_border?('border:1px solid '+col_border+';'):'')+' '+(col_bg?('background-color:'+col_bg+'; color:'+col_body+';'):'')+' font-size:'+size_body+'; '+(movecursor?'cursor:move':'cursor:default')+'; '+(bg_img?('background-image:url('+bg_img+');'):'')+' text-align:'+align_body+'" onMouseDown="startdrag()" onMouseUp="stopdrag()">');
  document.writeln('<h1 style="text-align:center; font-size:'+size_head+'; color:'+col_head+'; margin-bottom:'+margin_head+'; margin-top:2px">'+dragnavi.arguments[0]+'<\/h1>');
  for(i=3;i<dragnavi.arguments.length;i++) {
    if(dragnavi.arguments[i]=='-') {
      document.writeln(seperator+'<br />');
    }
    else {
      document.writeln('<a href="'+dragnavi.arguments[i+1]+'" style="color:'+col_body+'; text-decoration:'+(underline_links?'underline':'none')+';">'+dragnavi.arguments[i]+'<\/a><br />');
      i++;
    }
  }


  document.writeln('<\/div>');

  // ----------------------------
  // -- Ende / End Script-Code --
  // ----------------------------
  // -- Fading Page Menu --
  // -- Author: Triple-M --
  // -- www.htmlarsenal.de --
  // -- 06.Mar.2004 --
  // ----------------------------
}
//-->
</script>