• SydneyAustralien

Der lange Weg zur eigenen Webseite: Navigation

WebDesign3Meine WordPress-Präsentation ist – wie beschrieben – in eine frühere Fotogalerie-Webseite eingebettet. Um alles zu komplettieren, fehlt noch eine schicke, vertikale Navigationsleiste am linken Bildrand.

Die Menüs in einer solchen Navigation sollen eine Menge Links aufnehmen um immer alle mich interessierenden Webseiten im schnellen Zugriff zu haben. Das soll hier mit einer von WordPress vollkommen unabhängigen Navigation erreicht werden. Natürlich hat WordPress selbst auch eine eigene, Blogroll genannte Navigation und sicher auch ein attraktives Navigations Plugin NAVT.Navigation Ausprobiert habe ich NAVT aber nicht. Navigationen kann man durch HTML ul-Listen mit CSS-Stile erzeugen. Menue Generator Am besten mit Hintergrundbildern durch den CSS-Stil: background-image:url(/images/Bild.jpg) um dadurch den Menüpunkt als Button von der Umgebung abzusetzen. Mit etwas Übung und Probieren bekommt man das auch ganz gut hin. Schwieriger wird es, wenn man Menü Hierarchien aufbauen will wie in meiner Navigation. Dazu verwendet man am besten JavaScripte, die das Aufklappen der Unterstrukturen beim Überfahren der Menüs mit der Maus steuern. Will man sich aber nicht mit JavaScript Programmierung auseinandersetzen so verwendet man am Besten entweder gleich ein Web-Entwicklungstool wie z.Bsp. Adobe-Dreamweaver oder man geht auf die Suche nach Menü Generatoren im Internet. Ich habe mich für Easy Button & Menue Maker von Blumentals Software, zu sehen im rechten Bild. Diese Software kostet 19,85€ ist aber nach meiner Einschätzung ihr Geld wert. Verschiedene Vorlagen kann man ausprobieren und die Untermenüs, die ja z.Bsp. bei mir in den WordPress Inhalt hineinklappen, transparent schalten. Beachten sollte man, dass in den Untermenüs keine Sonderzeichen wie ä, ö, ü usw. vorkommen dürfen. Leerzeichen können zu ungewollten Zeilenumbrüchen im Untermenü führen.  Man muß die korrespondierenden HTML Sonderzeichen anwenden (steht im HTML Editor unter der Tafel mit dem Ω-Symbol). Beim Abspeichern der individuellen Navigation wählt man die Option ‚Insert into Webpage‘, Option ‚Just generate HTML Code and necessary Files‘ um dann alle gif-Bilder, die javascript- und CSS Datei in einen gemeinsamen Ordner – und das ist wichtig – mit absolutem Verzeichnispfad abzulegen. Damit ist gewährleistet, dass die Navigation in Dateien auf allen Verzeichnisebenen der Webpräsenz eingebaut werden kann. Den HTML Codes selbst fügt man mit ‚Copy‘ und ‚Paste‘ zum Schluß in seine eigene Webseite ein. Ausprobieren auf allen Browsern zum Abschluß ist dann selbstverständich.

  1. Teil: Der lange Weg zur eigenen Webseite: Einführung
  2. Teil: Der lange Weg zur eigenen Webseite: Fotogalerie
  3. Teil: Der lange Weg zur eigenen Webseite: WordPress
  4. Teil: Der lange Weg zur eigenen Webseite: Navigation

Schlagworte: ,

  1. Sandra’s Avatar

    Hallo Friedrich
    du hast ja eine sensationelle Seite, Gratulation. !!

    Ich muss mir mal alles druchlesen was du hier beschrieben hast.
    Auch die Slideshow, Haupt Fotogalerie, Anmeldeformular, die super Navigation in den Kategorien, ja beinaahe die halbe Sidebar würde ich am liebsten kopieren!

    Grüsschen Webmaster von eine Guggenmusik in der Schweiz

    Antworten

Antworten

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Fotos und Inhalt ©2009-2017. Impressum WebGalerie jAlbum Musik Harpish, Highland Webhost velogrid Weblog Wordpress