CSS Textnavigation mit Ausklappleisten (vertikal) horizontale Version hier und guckt auch hier und hier

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 zu verwenden, die immer wieder Probleme durch Konflikte mit anderen Javascript-Dateien anderer Anwendungen, wie z.B. Fotogalerien, verursacht.

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

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 “klappnavivert.css” genannt habe, hier relativer Pfad von einer Unterseite 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 “Home” nur ein Punkt ./
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(){
   $('#cssdropdown li').hover(
      function() { $('ul', this).css('display', 'block'); },
      function() { $('ul', this).css('display', 'none'); });
   });
</script>

<link rel="stylesheet" type="text/css" href="../html/klappnavivert.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 “klappnavivert.css” in den Ordner “html”.

Unten CSS ohne Rahmen (Wertzuweisung = cssdropdown). Hier als “klappnavivert.css”

Unten CSS mit Rahmen (Wertzuweisung = cssborder). Hier als “klappnaviborder.css” im 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.

Damit Ich beide Navi’s (mit und ohne Rahmen) hier zeigen kann, habe ich die Wertzuweisung in der CSS für die Navi mit Rahmen auf “cssborder” geändert und diese als “klappnaviborder.css” abgespeichert.

Unten zeige ich den “DIV-Container” der Navigation ohne Rahmen mit der Wertzuweisung “cssdropdown”, die bei Bedarf dann eben in einen anderen Namen geändert werden kann, wie hier z.B. “cssborder” um die Navigationsleiste mit Rahmen anzuzeigen.

... 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#horizontal" title="Horizontal">Horizontal</A>
   </LI>
  
   <LI class=headlink>
      <A href="./vertikal.html" title="Vertikal"><span style="color: #094480">Vertikal</span></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.