CSS Textnavigation mit Ausklappleisten (horizontal) vertikale Version hier und guckt auch hier und hier


Unten mein Beispiel dieser CSS-Textnavigation, die ich meiner grafischen Navigationsleiste von
NOF (oben) ganz bewusst nachempfunden habe (lediglich den Hover - Effekt habe ich hier weiß erstellt).

Zunächst ein ganz dickes Dankeschön an “DerUnbekannte” der mir dieses Turorial, mit seiner großen Hilfe überhaupt erst möglich gemacht hat.

Der Sinn dieser Navi ist eine CSS-Textnavigation zu erhalten, die aber ebenso, wie die grafische Navigation von NOF, Ausklappleisten hat ohne dafür die “rollover.js” von NOF 11 und älter zu verwenden, die immer wieder Probleme durch Konflikte mit anderen Javascript-Dateien anderer Anwendungen, wie z.B. Fotogalerien, verursacht.

Es wird eine gewisse Kenntnis von CSS vorausgesetzt.

Ich fasse hier kurz zusammen, was ich getan habe.


1.) Den Code unten in die HTML “Zwischen Head Tags”. Oben den Link zur jquery-Datei, dann das Skript für den IE 6 Fix und dann noch den Link zu einer für diese Navi benötigten CSS-Datei, die ich hier mal “klappnavi.css” genannt habe, hier relativer Pfad von der Startseite dieses Projektes mit ./ Denkt also bitte daran, Eurer “Home” (Startseite) einen anderen “Master-Rahmen” als den Unterseiten zu geben, damit diese relative Pfadangabe auf allen Seiten stimmt - auf Unterseiten 2 Punkte ../
Diese CSS-Datei gehört in den lokalen und entfernten Ordner html des Projektes.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript">
   $(document).ready(function(){
   $('li.headlink').hover(
      function() { $('ul', this).css('display', 'block'); },
      function() { $('ul', this).css('display', 'none'); });
   });
</script>

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

2.) dann habe ich mir meine CSS-Datei zurecht gebastelt. Natürlich dürft Ihr nicht vergessen, die Buttons händisch, mittels FTP-Programm, in den im Skript angegebenen Ordner zu kopieren.

Unten der Inhalt meiner CSS-Datei, die Ihr für Eure Zwecke natürlich anpassen müsstet, jedoch hilft das eventuell zum besseren Verständnis, diese Datei zu sehen.

Im Windows Editor erstell und dann abgespeichert als “klappnavi.css” in den Ordner “html”.

3.) Einen extra “Layout-Bereich” aufziehen und diesen auf “Festes Seitenlayout” stellen, da sonst beim Ausklappen der Navi der Inhalt der Seite nach unten geschoben werden würde.

4.) Ein Textfeld in diesem neuen “Layout-Bereich” in der Breite Eurer späteren Navi aufziehen und den Code unten in die HTML des Textfeldes kopieren “Vor dem Tag” (NOF 11 “vorher”) oder auch in den
“HTML-Code-Editor” des Textfeldes. Ich habe hier mal zum besseren Verständnis alle meine absoluten Links drinnen gelassen, die Ihr dann natürlich in Eure eigenen Links ändern müsst.

Ich habe hier “absolute” URL’s verwendet, da es sich bei dieser Seite um ein “externes” Projekt meiner
“Hilfe-Seite” handelt. Ihr könnt natürlich ebenso gut “relative” URL’s verwenden, wenn diese auf Seiten des gleichen Projektes verlinken.

... und hier noch mit Hervorhebung der gerade aktiven Seite. Guckt dazu bitte auch dieses Beispiel an.

<UL style="DISPLAY: block" id=cssdropdown>
  
   <LI class=headlink>
      <A href="./index.html" title="Horizontal"><span style="color: #0000FF">Horizontal</span></A>
   </LI>
  
   <LI class=headlink>
      <A href="./html/vertikal.html#horizontal" title="Vertikal">Vertikal</A>
   </LI>
  
</UL>

nach oben

Guckt auch mal hier:

http://de.selfhtml.org/css/layouts/navigationsleisten.htm

... und wenn Ihr das alles über einen Generator erledigen lassen wollt, dann guckt auch hier.