Ergebnis 1 bis 3 von 3

Thema: [CSS/DHTML] Dynamische Navigationsleiste

Baum-Darstellung

Vorheriger Beitrag Vorheriger Beitrag   Nächster Beitrag Nächster Beitrag
  1. 19.04.2007 07:26 #1

    Avatar von Wolfsrudel
    Wolfsrudel
    Drachentöter
    stars4

    [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&uuml; wieder wegzubekommen, Maus wieder zum rechten Fensterrand bewegen.</p>

<p>Und jetzt kommen noch etliche leere Abs&auml;tze, damit auch sichtbar wird,
dass das Men&uuml; immer an der gleichen Stelle angezeigt wird, egal wie weit man scrollt.</p>

<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

<p>Na, das d&uuml;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&uuml;
</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

    Danke im Voraus!

    --

    Don't mess with the puppet master!
    Geändert von Wolfsrudel (19.04.2007 um 08:48 Uhr)
    ZitierenZitieren
« Vorheriges Thema | Nächstes Thema »

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  

Foren-Regeln