[CSS/DHTML] Dynamische Navigationsleiste
So, Fans und Fensterbretter... was'n doofiger Spruch ._.'
Ich habe gestern folgende Navigationsleiste -> Hier zu sehen - in mein Projekt eingebaut.
Hier nochmal der Original-Code
Code:
<html><head><title>Test</title>
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
function Menue () {
if (typeof window.pageYOffset == "number") {
if (NS4) {
getElement("id", "Nav").top = window.pageYOffset + 50;
} else {
getElement("id", "Nav").style.top = window.pageYOffset + 50;
}
} else {
if (typeof document.body.scrollTop == "number")
getElement("id", "Nav").style.top = document.body.scrollTop + 50;
}
if (OP)
getElement("id", "NavLinks").style.pixelTop = NavLinksPos;
if (NS4) {
getElement("id", "Nav").visibility = "show";
} else {
getElement("id", "Nav").style.visibility = "visible";
}
}
function noMenue () {
if (NS4) {
getElement("id", "Nav").visibility = "hide";
} else {
getElement("id", "Nav").style.visibility = "hidden";
}
}
function handleMove (ev) {
if (!ev)
ev = window.event;
var mausposition = ev.pageX ? ev.pageX : ev.clientX;
if (mausposition < 20) {
Menue();
} else {
if (mausposition > 250) {
noMenue();
}
}
}
function Event_init () {
if (document.addEventListener) {
document.addEventListener("mousemove", handleMove, true);
} else {
if (NS4) {
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = handleMove;
} else {
document.body.onmousemove = handleMove;
}
}
if (OP) {
NavLinksPos = 42; // Position des Bereiches NavLinks
getElement("id", "NavLinks").style.pixelTop = NavLinksPos;
}
}
</script>
<style type="text/css">
body { color:black; background-color:white; background-image:url(navigation_back.gif);
margin:0; padding:20px 50px; font-family:Tahoma,sans-serif; }
#Nav { position:absolute; top:50px; left:0; visibility:hidden; }
#NavLinks { position:absolute; top:42px; left:42px; }
#Nav a:link {color:#000080; font-weight:bold; font-size:13px; text-decoration:none; }
#Nav a:visited { color:#000080; font-weight:bold; font-size:13px; text-decoration:none; }
#Nav a:hover { color:#FFFFFF; background-color:#000080; font-weight:bold;
font-size:13px; text-decoration:none; }
#Nav a:active { color:#000080; font-weight:bold; font-size:13px; text-decoration:none; }
</style>
</head>
<body onload="Event_init()">
<div id="Nav">
<img src="navigation.gif" width="250" height="450" border="0" alt="">
<div id="NavLinks">
<a href="http://de.selfhtml.org/">SELFHTML</a><br>
<a href="http://aktuell.de.selfhtml.org/">SELFHTML aktuell</a><br>
<a href="http://forum.de.selfhtml.org/">SELFHTML-Forum</a><br>
<a href="http://aktuell.de.selfhtml.org/artikel/">Artikel</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,
dass 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>Na, das dürfte reichen :-)</p>
</body>
</html>
Ich habe' das ganze verändert und angepasst - zu erst habe ich die .gif auf meine Bedürfniss angepasst und dann die Leiste nicht links, sondern in der oberen rechten Ecke platziert, und von oben nach unten aufploppen lassen (wenn man an den oberen Rand kommt)
Soweit funktioniert das alles fein.
Mein Problem ist nun folgendes:
Beim "Original" ist die Position der Leiste ja fix, sprich, egal wie weit man scrollt, die Leiste bleibt links erhalten.
Das passt bei mir nun garnich. Ich scrolle, aber die Leiste klebt oben fest. Ich hätte auch gern die Variante, das ich scrolle, aber trotzdem immer Zugriff auf die Navigation habe. (halt am oberen Rand)
So sieht mein Code zur Zeit noch aus:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>SiDok - Siemens Dokumentations-Tool</title>
<link rel="stylesheet" type="text/css" href="layout\css\layout.css">
<script type="text/javascript" src="layout\dhtml.js"></script>
<script type="text/javascript">
function Menue () {
if (typeof window.pageYOffset == "number") {
if (NS4) {
getElement("id", "Nav").left = window.pageYOffset + 493;
} else {
getElement("id", "Nav").style.left = window.pageYOffset + 493;
}
} else {
if (typeof document.body.scrollLeft == "number")
getElement("id", "Nav").style.left = document.body.scrollLeft + 493;
}
if (OP)
getElement("id", "NavLinks").style.pixelLeft = NavLinksPos;
if (NS4) {
getElement("id", "Nav").visibility = "show";
} else {
getElement("id", "Nav").style.visibility = "visible";
}
}
function noMenue () {
if (NS4) {
getElement("id", "Nav").visibility = "hide";
} else {
getElement("id", "Nav").style.visibility = "hidden";
}
}
function handleMove (ev) {
if (!ev)
ev = window.event;
var mausposition = ev.pageY ? ev.pageY : ev.clientY;
if (mausposition < 70) {
Menue();
} else {
if (mausposition > 125) {
noMenue();
}
}
}
function Event_init () {
if (document.addEventListener) {
document.addEventListener("mousemove", handleMove, true);
} else {
if (NS4) {
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = handleMove;
} else {
document.body.onmousemove = handleMove;
}
}
if (OP) {
NavObenPos = 493; // Position des Bereiches NavOben
getElement("id", "NavOben").style.pixelLeft = NavObenPos;
}
}
</script>
<style type="text/css">
#Nav { position:absolute; top:0px; left:35px; visibility:hidden; }
#NavOben { position:absolute; top:0px; left:35px; }
#Nav a:link {color:#AFB4BE; font-weight:bold; font-size:17.5px; text-decoration:none; }
#Nav a:visited { color:#AFB4BE; font-weight:bold; font-size:17.5px; text-decoration:none; }
#Nav a:hover { color:#666666; background-color:#AFB4BE; font-weight:bold;
font-size:17.5px; text-decoration:none; }
#Nav a:active { color:#AFB4BE; font-weight:bold; font-size:17.5px; text-decoration:none; }
</style>
</head>
<body onload="Event_init()">
<blockquote id="rahmen" style="margin-left: 435px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
border: 1px solid #999999;
front-size: 15px;
font-weight:bold;
color: #AFB4BE;">Menü
</blockquote>
<div id="Nav">
<img src="layout\navigation.gif" width="510" height="100" border="0" alt="">
<div id="NavOben">
<table>
<colgroup width="150" span="3"></colgroup>
<tr>
<td><a href="http://de.selfhtml.org/">Button 1</a></td>
<td><a href="http://aktuell.de.selfhtml.org/">Button 2</a></td>
<td><a href="http://forum.de.selfhtml.org/">Button 3</a></td>
</tr>
<tr>
<td><a href="http://aktuell.de.selfhtml.org/artikel/">Button 5</a></td>
<td><a href="http://aktuell.de.selfhtml.org/artikel/">Button 6</a></td>
</tr>
<tr>
<td><a href="http://aktuell.de.selfhtml.org/artikel/">Button 8</a></td>
<td><a href="http://aktuell.de.selfhtml.org/artikel/">Button 9</a></td>
</tr>
<tr>
<td><a href="http://aktuell.de.selfhtml.org/artikel/">Button 8</a></td>
<td><a href="http://aktuell.de.selfhtml.org/artikel/">Button 9</a></td>
</tr>
</table>
</div>
</div>
<div align="right"><blockquote id="logo" style="margin-left: 5em;">SiDok - Siemens Dokumentations-Tool
<p class="fussnote">Copyright | Version 1.0</p></blockquote></div>
</body>
</html>
Welche Veränderungen sind von Nöten?!
Und ja, es ist kein Preety-Print und auch programmier-technisch nicht ausgereift, aber CSS ist komplett neu für mich und ich arbeite mich noch ein :p
Danke im Voraus!
