Die etwas andere Navigation...

**Bitnets** · 16-11-2005 23:32

Grüßt euch,

ich bin zur Zeit dabei eine größere Webpräsenz zu entwickeln und will dazu ein interessantes Navigationsmenü einbauen. Nun weiß ich zwar wie es aussehen soll, kenne mich aber in JavaScript nur sehr oberflächlich aus, da ich bisher nur mit Php / MySql gearbeitet habe.

Soweit bin ich bisher gekommen - dass ist jedoch nur ein vorgefertiges Script, dass wenigstens in die Richtung meiner Vorstellungen geht: Bisheriger Stand

Also folgendes muss nun noch verändert werden: Ich will, dass beim Klicken auf einen Menüpunkt (Verweis)
die Scrollbar zur entsprechenden Rubrik rollt (aber nicht springt) und dort bleibt. Wenn ich dann einen anderen Menüpunkt auswähle soll es nur nächsten Rubrik rollen. D.H. das Script muss in der Lage sein, vor und zurück rollen zu können, da die Rubriken, ja auch links oder rechts von der aktuellen Position liegen können.

Das Script dass ich bis jetzt eingebaut habe, erfüllt quasi noch keine Bedingung - dient aber evtl dazu es sich besser vorstellen zu können. Außerdem könnte man ja evtl ein Script darauf aufbauen.

Im nachfolgenden hab ich mal den bisheringen Stand der Dinge gepostet:

index.php

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="175" bgcolor="#000000"><table width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
      <tr>
        <td><a href="home.php" target="home">Verweis1</a></td>
      </tr>
      <tr>
        <td><a href="home.php" target="home">Verweis2</a></td>
      </tr>
      <tr>
        <td><a href="home.php" target="home">Verweis3</a></td>
      </tr>
    </table></td>
  </tr>
</table>
<iframe src="home.php" name="home" width="100%" height="400" align="left"
 scrolling="no" marginheight="0" marginwidth="0" frameborder="0"><br />

Ihr Browser kann leider keine eingebetteten Frames anzeigen.

</iframe>
</body>
</html>

home.php

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="medien/default.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style>
<body>
<div id="datacontainer" style="position:absolute;left:1px;top:10px;width:2400" onMouseover="scrollspeed=0" onMouseout="scrollspeed=cache">

<!-- ADD YOUR SCROLLER CONTENT INSIDE HERE -->

<table>
<tr>
  <td width="800" valign="top">
    <p><b>Rubrik 1 </b><font face="Verdana" size="2"></font></p>
    <p>Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, </p></td>
  <td width="800" valign="top">
<p align="left"><strong><font face="Verdana"><small>Rubrik 2</small></font></strong></p>
<p align="left">Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, </p></td><td width="800" valign="top">
<p align="left"><small><strong><font face="Verdana">Rubrik 3 <a href="http://www.dynamicdrive.com/dynamicindex13/roamcursor.htm" target="_top"></a></font></strong></small></p>
  <p align="left">Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, Inhalt, </td></tr>
</table>


<!-- END SCROLLER CONTENT -->

</div>

<script type="text/javascript">


//Specify speed of scroll. Larger=faster
var scrollspeed=cache=20

//Specify intial delay before scroller starts scrolling (in miliseconds):
var initialdelay=500

function initializeScroller(){
dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer")
dataobj.style.left="5px"
setTimeout("getdataheight()", initialdelay)
}

function getdataheight(){
thelength=dataobj.offsetWidth
if (thelength==0)
setTimeout("getdataheight()",10)
else
scrollDiv()
}

function scrollDiv(){
dataobj.style.left=parseInt(dataobj.style.left)-scrollspeed+"px"
if (parseInt(dataobj.style.left)<thelength*(-1))
dataobj.style.left="5px"
setTimeout("scrollDiv()",40)
}

if (window.addEventListener)
window.addEventListener("load", initializeScroller, false)
else if (window.attachEvent)
window.attachEvent("onload", initializeScroller)
else
window.onload=initializeScroller

</script>

</body>

</html>

Ich danke schonmal im vorraus für eure Hilfe !

Mit freundlichen Grüßen

Bitnets

**bine** · 11-02-2007 22:58

ja, das ist ne schöne Idee.

Hier wurde diese in Zusammenhang mit Ankern umgesetzt
mediastyles, Industrial Design Engineering, Köln, Deutschland

und hier erklärt
Unaufdringliches Scrollen in groÃŸen Webseiten » Hasematzel.de, ein Blog von Oliver Schwarz

Thema: Die etwas andere Navigation...

LinkBack

Themen-Optionen

Anzeige

Die etwas andere Navigation...

Empfehlenswerte Literatur von unserem Partner Terrashop

AW: Die etwas andere Navigation...

Ähnliche Themen

Navigation mit PHP

Problem mit der Navigation

Suche Navigation

navigation

Navigation frames problem (target)

Lesezeichen

Lesezeichen

Berechtigungen