Tutorial CSS3 Menü Generator

Tutorials von Thomas Frei-Herrmann

Startseite
Beispiel 2
Tutorial
- CSS3 Menü
Themen
- Navigation
- Login
- Neue Seiten
Gästebuch
Impressum
- Kontakt

CSS Code For Menu Css3Menu.com

Tutorial CSS Textnavigation mittels CSS Generator

Ich beschreibe hier die Version CSS3 Menu v2.3 vom 02. Februar 2012.

Bitte ladet Euch zunächst diese Software auf der Seite von CSS3Menu.com herunter: Download

Hier eine Ansicht von diesem kleinen Programm.

Wie Ihr im Screenshot oben schon erkennen könnt, kann man die Software auch über “Optionen” auf deutsch stellen.

Die Handhabung ist eigentlich selbsterklärend und sehr einfach. Mit dem großen “+” Zeichen fügt man Navi-Buttons hinzu, mit dem “-” Zeichen kann man diese wieder entfernen. Mit dem kleinen “+” Zeichen fügt man Untermenüs hinzu. Alles kann man beliebig verschieben und natürlich auch vertikale Navis erzeugen. Ihr könnt der Navi auch eine bestimmte Menü-Höhe und Menü-Breite geben oder auch die Untermenüs unter “RTL mode” (Right-To-Left) nach links aufgehen lassen.

Auf der rechten Seite gibt es einige Vorlagen (Templates) und in der gekauften Version eine sehr große Anzahl an Templates.

Unter “Icons” kann man der Navi auch noch jede Menge verschiedener Icons in unterschiedlichen Größen hinzufügen. Man kann Ausklappleisten transparent gestalten oder auch unter “Item effect” verschiedene Flash-Effekte hinzufügen und vieles mehr.

Das erstellte Projekt könnt Ihr speichern und jederzeit weiter bearbeiten, also erweitern oder ändern oder was auch immer.

Es handelt sich hier um einen WYSIWYG Editor und alle Änderungen werden sogleich sichtbar. Alles geht fast von alleine.

Wenn Ihr Eure Navi fertig erstellt habt, dann klickt Ihr einfach auf “Publizieren” und die Software generiert sogleich eine HTML-Seite, die Ihr schon mal testen und Eure Navi damit überprüfen könnt.

Öffnet diese HTML Datei mit Eurem Windows-Editor und kopiert Euch den Teil, der mit “HEAD section” markiert ist, heraus und fügt diesen Teil in den HEAD Eurer NOF-Startseite (Home) in die HTML des “Master-Rahmens” ein.

> Master-Rahmen markieren > Fenster “Master-Rahmen-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen

Also den Code unten:

<link rel="stylesheet" href="CSS3 Menu_files/css3menu1/style.css" type="text/css" /><style>._css3m{display:none}</style>

... weiterhin generiert das Programm nicht nur diese HTML-Seite, sondern auch einen Ordner:

CSS3 Menu_files

in dem sich einige Bildchen und eine CSS-Datei befindet.

Wie Ihr in dem Code der “HEAD section” (oben) erkennen könnt, wird dort auf diese CSS-Datei “style.css” verwiesen. Ihr kopiert also diesen gesamten Ordner, so wie er ist, in das Stammverzeichnis Eures Projektes, dort wo sich auch die Startseite (index.html) befindet.
Das macht Ihr im Ordner Eurer lokalen Publizierung und natürlich auch auf dem Server.

Da die relativen Verlinkungen von der Startseite (index.html) anders sind als von Unterseiten, die sich ja bei NOF (normalerweise) im Ordner “html” befinden, müsst Ihr zwei “Master-Rahmen” haben.

Gebt also dem Master-Rahmen der “Home” (Startseite) einen anderen Master-Rahmen-Namen.

Jetzt ändert Ihr den Code der “HEAD section” in der Master-Rahmen-HTML einer Unterseite in ../ (2 Punkte = gehe 1 Verzeichnis höher) ab, damit die Verlinkungen auch von den Unterseiten stimmen:

<link rel="stylesheet" href="../CSS3 Menu_files/css3menu1/style.css" type="text/css" /><style>._css3m{display:none}</style>

Zum Anzeigen der Navi zieht Ihr Euch ein Textfeld auf und kopiert den Code, der mit “BODY section” gekennzeichnet ist, aus der vom Programm generierten HTML-Seite in den HTML-Code Editor des Textfeldes. Beispiel:

> Textfeld aufziehen (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button “Text” > Button “HTML” > Euren BODY-Code einfügen

<ul id="css3menu1" class="topmenu">
      <li class="topfirst"><a href="../index.html" title="CSS 3 Menü" style="height:14px;line-height:14px;">Home</a></li>
      <li class="topmenu"><a class="pressed" href="../html/tutorial.html" title="Tutorial CSS3 Menü" style="height:14px;line-height:14px;"><span>Tutorial</span></a>
      <ul>
         <li><a href="http://css3menu.com/index.html" target="_blank" title="CSS3 Menü">CSS3 Menü</a></li>
      </ul></li>
      <li class="toplast"><a href="http://www.tommyherrmanndesign.com/nof/html/themen-liste.php" title="Themen" style="height:14px;line-height:14px;"><span>Themen</span></a>
      <ul>
         <li><a href="http://www.tommyherrmanndesign.com/nof/html/nof-gast.php" title="Gästebuch">Gästebuch</a></li>
         <li><a href="http://www.tommyherrmanndesign.com/nof/html/kontakt.php" title="Kontakt">Kontakt</a></li>
         <li><a href="http://www.tommyherrmanndesign.com/nof/html/go-neue-seiten.php" title="Neue Seiten">Neue Seiten</a></li>
      </ul></li>
   </ul><p class="_css3m"><a href="http://css3menu.com/">CSS Code For Menu Css3Menu.com</a></p>

Natürlich verwendet Ihr Euren Code, der vom Programm generiert wurde und dann stehen dort Eure Links, die Ihr ja bereits in dem Programm eingetragen hattet. Bei den relative Pfadangaben müsst Ihr auch wieder darauf achten, ob mit einem oder zwei Punkten. Oben im Code auf einer “Unterseite” also mit zwei ../ Punkten, von der “Home” dann nur mit einem ./ Punkt. Ihr könntet natürlich auch nur absolute Pfadangaben eintragen, die alle mit http: beginnen. Die class=”pressed” hebt den so markierten Link jeweils in der Mouseover-Farbe hervor.

Fertig!

Bemerkungen:

Im Internet Explorer 8 (oder älter) werden die runden Ecken der Navi nicht dargestellt. In allen anderen Browsern schon
Diese Navi funktioniert immer - auch wenn Javascript deaktiviert sein sollte
Diese Navi funktioniert mit allen HTML-Ausgaben von NOF, also mit jedem DOCTYPE. Nur der “Standard-DOCTYPE” von NOF macht im IE8 Probleme, da der IE8 dann in den sogenannten Quirks-Modus schaltet.
Diese Navi wird keinerlei Probleme mit anderen Skripten oder jQuery-Dateien verursachen, so wie es die NOF-Navi gerne mal macht

nach oben

Viel Erfolg !

diese Seite weiter empfehlen