Auf dieser Seite finden Sie einige Beispiel-Navigationen (horizontale und vertikale Menüs & Schaltflächen), die mit Hilfe der modernen CSS-Technik (ohne Javascript) erstellt wurden. Diese Menüs können Sie zur Einbindung in die Homepagevorlagen oder auch für Ihre bereits vorhandene Webseite nutzen.

Horizontale CSS-Menüs

Bitte klicken Sie unterhalb der Beispiele auf "weiter", um auch die nachfolgenden Menüs anzuschauen! Über den Link "Download" können die Beispiele jeweils einzeln heruntergeladen werden.

Vertikale CSS-Menüs

Weitere grafische Rollover-Menüs

Menü 101
Menü 102
Menü 103
Menü 104
Menü 105
Menü 106
Menü 107
Menü 108

Die Anpassung der Menüs

Das Design der Menüs kann über die extern ausgelagerte CSS-Datei vollständig verändert oder angepasst werden. Das funktioniert ebenfalls auch mit den Menüs mit grafischem Hintergrund, wie z. B. durch Austausch der Hintergrundgrafik. Dazu ändern Sie bitte den entsprechenden Eintrag in der CSS-Datei "background-image: url('../images/button.jpg')", indem Sie die auszutauschende Grafikdatei in den Ordner [ images ] verschieben und "button.jpg" durch den Dateinamen Ihrer Grafik ersetzen. Ggf. passen Sie noch den Eintrag "width" und "line-height" in der CSS-Datei an, welcher der Größe Ihrer Grafik entsprechen muss. Die Grafik ist beispielsweise 150px breit und 45px hoch, dann sind die Einträge abzuändern, wie folgt:

background-image: url('../images/button.jpg');
width: 150px;
line-height: 45px

Die Verweise (Urls, Zieladressen) sind stets im Html-Dokument zu notieren. Das Hinzufügen weiterer Links (auch bei den grafischen Menüs) ist möglich, die ebenfalls über den Html-Text notiert werden.

Selbstverständlich können Sie für Ihre Navigation auch die Buttons aus unserem Sortiment wählen [ ... ]

... und falls Sie Lust dazu bekommen, formatieren Sie doch einfach einmal ein Menü ganz nach Ihrem Geschmack!

Inhalt eines Download-Pakets:

- Html-Dokument "index.htm"
- CSS-Datei "menue.css" (zwecks Formatierung)
- Grafiken (nur bei Menüs mit grafischem Hintergrund)

Viel Spaß beim Tüfteln!

Das könnte Sie vielleicht auch interessieren:
[ Buttons für die Navigation ]
[ Mit Adobe Photoshop Elements 8.0 eigene Grafiken herstellen ]
[ Photoshop PSD-Tutorial mit DVD ]