Navigation-Problem!

[Doppelwhopper55]

Es wird......aber ne Mörderarbeit.....
Komme bis jetzt klar, nur blöd das die Navigation ja in jede Seite eingebaut werden muss

Gibts da nicht ne einfachere Variante.
Bei Npage habe ich ein Style in dem Das Menü implementiert ist. Eine neue Seite wird dann dem Style zu gewiesen und ich brauch mich nur um den Inhalt der neuen Seite zu kümmern.

Wenn ich mir so überlege das da vioelleicht mal ein Menüpunkt hinzukommt, dann muss ich das auf jeder Seite machen.....*amkopfkrart*

[Lighty]

... du kannst das Script auch "auslagern" !
Dann reicht ein Link auf die *.js - genau wie bei der dhtml.js !

[Doppelwhopper55]

Guten Morgen Jürgen
auch auf die Gefahr hin das ich gevierteilt werde muss ich doch noch mal nachfragen ob ich das richtig verstehe

Um beim Eingangsbeispiel zu bleiben:

Mit Script auslagern meinst du die Zeilen 1-97 (dem 2.geschlossenen Div) diese bspw. als menue.js speichern und auf den Server laden.

Bei neuen Seiten brauch ich dann lediglich einen Verweis auf diese Datei und ggf. einmal die menue.js um diese Seite erweitern.

Wenn das so einfach ist hört dich das gut an

[Lighty]

Moin Franz !

Fast korrekt !
Es sollte aber Zeile 16 - 72 reichen !?

[Doppelwhopper55]

Hmmm, jetzt gehts wieder mit meinem Verständnisproblem los

Es sollte aber Zeile 16 - 72 reichen !?

Das ist doch das reine Javascript?!? Woher bezieht denn eine neue Seite die Menüverweise?? Diese müssen dann doch eingefügt werden. Oder bezieht die neue Seite ihre Info aus der Index.html (Haupt/Startseite)?

[Lighty]

... du meinst Home, leer, leer, ... etc !?
Das wirst du, da du keine *.php-Seiten verwendest jedes mal angeben müssen !
( mit php könntest du die Seiten einmal erstellen und per include einbinden )

... auch könntest du das css auslagern - ist übersichtlicher !

[Doppelwhopper55]

Hmm.....dann muss ich mir die Arbeit wohl machen.

PHP hab ich absolut null Ahnung. Mir graut es schon davor weil da auch ein GB eingebunden werden soll.....und die sind ja in PHP gemacht.
Alfahosting bietet eins an das muss ich mir mal anschauen.

[Lighty]

... wenns wo klemmt, einfach melden !

[Doppelwhopper55]

... wenns wo klemmt, einfach melden !

Aber klar doch
Weiß ja wo mein Profi sitzt

[Lighty]

... ok, schau dir das mal an !
( beide Scripte ausgelagert, css ausgelagert - ist der Quelltext doch wesentlich übersichtlicher )
http://www.j-remmer.de/doppelwhopper/

[Doppelwhopper55]

Jo, so würde mir das schon gefallen
Da hast du das ccs ausgelagert oder?
Muss ich gleich mal versuchen......

[Doppelwhopper55]

Hmm.....dat klappt nicht so wie du das da hast.

Mein Quelltext schaut jetzt exakt wie deiner aus.

Hatte zuvor das Javascript und das css in einer menue.js gespeichert und hoch geladen.
Aber irgendwie will es mal wieder nicht
Was hat es mit dieser Zeile auf sich?

Code: Alles auswählen

<link rel="stylesheet" type="text/css" href="css/css_1.css" />

Vermute mal dass das css ganz separat gelagert werden muss? Aber in welcher Dateiform und wo?

Und was genau muss in die menue.js rein??

[Lighty]

Wenn du es genau so hast, musst du noch ein paar Ordner erstellen !
( css, scripts )

Diese Zeile ...
<link rel="stylesheet" type="text/css" href="css/css_1.css" />
... ist für das css ( Ordner css, Datei css_1.css )
( allerdings muss das / am Ende noch weg, das ist für xhtml )
... korrekt muss es also so aussehen !
<link rel="stylesheet" type="text/css" href="css/css_1.css">

Und was genau muss in die menue.js rein??

... Zeile 16 - 72 !

... guckst du hier:
http://www.j-remmer.de/doppelwhopper/scripts/menue.js
[FONT="arial"][/FONT]

[Doppelwhopper55]

Anscheinend bin ich zu blöd das zu kapieren

Die menue.js Datei:

Code: Alles auswählen

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;
  }
}

Die css_1.css Datei:

Code: Alles auswählen

body { color:black; background-color:red; background-image:url(http://www.amazonencorps-frechen.de/bilder/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; }

Im CSS-Ordner des Html Verzeichnis auf dem Server!

Die nicht funktionierende index.html (Testversion)

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Amazonencorps-Frechen Home</title>
<meta name="description" content="Tanzen Spass und Karneval">
<meta name="author" content="Amazonencorps">
<meta name="keywords" content="Amazonencorps Frechen">
<meta name="keywords" content="Tanzengruppen Frechen">
<meta name="robots" content="index, follow">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/css_1.css">

<script type="text/javascript" src="http://www.amazonencorps-frechen.de/scripte/dhtml.js"></script>
<script type="text/javascript" src="http://www.amazonencorps-frechen.de/scripte/menue.js"></script>

</head>
<body onload="Event_init()">

<div id="Nav">
 <img src="http://www.amazonencorps-frechen.de/bilder/navigation.gif" width="250" height="450" border="0" alt="">
 <div id="NavLinks">
  <a href="http://www.amazonencorps-frechen.de">Home</a><br>
  <a href="http://www.amazonencorps-frechen.de/chronik.html">Chronik</a><br>
  <a href="http://www.amazonencorps-frechen.de/vorstand.html">Vorstand</a><br>
  <a href="http://www.amazonencorps-frechen.de/wagenverleih.html">Wagenverleih</a><br>
  
 </div>
</div>

<h3>« Navigation </h3> 

<noscript>
  <a href="http://www.amazonencorps-frechen.de">Home</a><br>
  <a href="http://www.amazonencorps-frechen.de/chronik.html">Chronik</a><br>
  <a href="http://www.amazonencorps-frechen.de/vorstand.html">Vorstand</a><br>
  <a href="http://www.amazonencorps-frechen.de/wagenverleih.html">Wagenverleih</a><br>
</noscript>

<center><img src="http://www.amazonencorps-frechen.de/bilder/plakat.jpg" /></center>

</body>
</html>

Verstehe es nicht

[Lighty]

... ist die Seite denn aktuell aktiv !?
Weil hier http://amazonen-corps.de/ wird mir nichts dergleichen angezeigt !?