Ergebnis 1 bis 2 von 2
  1. #1
    Bitnets ist offline Grünschnabel
    registriert
    16-11-2005
    Beiträge
    1

    Question Die etwas andere Navigation...

    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
    Geändert von pit-r (16-11-2005 um 23:39 Uhr) Grund: code-tags hinzugefügt...

  2. #2
    Avatar von bine
    bine ist offline Lounge-Member
    registriert
    06-07-2002
    Ort
    Schleswig-Holstein
    Beiträge
    5.900

    AW: Die etwas andere Navigation...

    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
    Geändert von bine (11-02-2007 um 23:00 Uhr)
    bine

Ähnliche Themen

  1. Navigation mit PHP
    Von torbenf im Forum Serverseitige Programmierung
    Antworten: 6
    Letzter Beitrag: 13-11-2005, 01:37
  2. Problem mit der Navigation
    Von thesecretboy im Forum JavaScript
    Antworten: 10
    Letzter Beitrag: 23-06-2005, 15:24
  3. Suche Navigation
    Von Scherbe im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 04-02-2005, 11:44
  4. navigation
    Von salogel im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 04-06-2004, 20:59
  5. Navigation frames problem (target)
    Von kingu im Forum JavaScript
    Antworten: 10
    Letzter Beitrag: 24-03-2004, 18:23

Lesezeichen

Berechtigungen

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