homepage-buttons.de
Templates, Buttons und mehr
 

Online-Navigationsleisten-Generator

Ein praktisches Tool, mit dem Sie online ansprechende, moderne horizontale Navigationsleisten erzeugen können, finden Sie bei Onlinehtmltools.com. Leider nur in englisch, aber es ist größtenteils intuitiv anwendbar.

Nachfolgend ein paar Screenshots des Tools mit weiterführenden Erklärungen:

Zuerst wählen Sie eine gewünschte Farbe aus, in der Ihre Navigationsleiste später ausgegeben werden soll. Dazu klicken Sie einfach auf die gewünschte Farbe.

In den nächsten Schritten wählen Sie aus, ob die Leiste über die gesamte Breite Ihrer Website angezeigt werden soll (width 100%: Haken ja oder nein), oder ob sie eine feste Breite (width) haben soll. Anschließend können Sie noch die Höhe (height) variieren. Danach wählen Sie aus, wie stark die Ecken der Navigationsleisten abgerundet sein sollen (rounded corner) bevor Sie die gewünschten Schriftfamilien auswählen, mit denen die Texte erscheinen. Außerdem wählen Sie die Schriftgröße (Font size) aus.

Die Funktion des Feldes "shrinking size" hat sich mir bisher leider nicht erschlossen...

Nun wählen Sie aus, ob Sie ein Suchfeld in Ihrer Navigationsleiste haben möchten oder nicht. Standardmäßig gibt es ein Suchfeld, welches Sie aber dadurch deaktivieren können, indem Sie einen Haken im Kästchen hinter "Disable search input box" setzen. Nun können sie noch die Höhe, Breite sowie den Grad der abgerundeten Ecken des Suchfeldes bestimmen. Ich sage es an dieser Stelle klar: für ungeübte Anwender möchte ich davon abraten, ein Suchfeld einzufügen, denn sie erhalten nach Abschluss der Voreingaben zwar einen Code, aber dieser muss noch angepasst werden und auch hier muss ich zugeben, dass ich es zwar geschafft habe, von der suchbox aus auf die gewünschte Suchmaschine weiterzuleiten, aber den eingegebenen Suchtext wusste ich dort dann wiederholen.

Wie auch immer, im nächsten Schritt geben Sie dann die Texte der gewünschten Navigationspunkte ein. Mit x neben der Aufzählung entfernen Sie einen Punkt, mit "Add new Tab" gleich über den Navigationspunkten fügen Sie Menüpunkte hinzu. Das Schöne ist, dass oben in der Beispielnavigation die Änderungen gleich ausgegeben werden und man so genau einstellen kann, wie man die Leiste haben möchte.

Wenn Sie nun mit Ihrem Ergebnis zufrieden sind, klicken Sie oben rechts auf "Grab the Menu Code" und es öffnet sich ein Fenster mit mehreren Codes und den folgenden Überschriften: "CSS", "HTML (inside body)" und falls das Suchfeld aktiviert ist noch "Javascript". Sie fahren nun mit der Mouse zuerst über den Code im Fenster unterhalb von "CSS" und speichern den Code in die Zwischenablage, entweder durch drücken der Tastenkombination Strg C oder durch Rechtsklick mit der Mouse und der Auswahl "kopieren". Diesen Code müssen Sie nun entweder in den Header-Bereich jeder Ihrer HTML-Dateien einfügen oder aber in einer externen CSS-Datei. Achtung: wenn Sie den Code in den Bereich zwischen <head> ... </head> an beliebiger Stelle einfügen, denken Sie bitte daran, dass dieser Code durch eine Style-Angabe begrenzt werden muss, sonst sehen Sie diesen Text hinterher in der fertigen Datei. Sie fügen also vor diesen Code folgendes ein:
<style type="text/css">
<!--

dann folgt der Code und anschließend wird dieser Code wie folgt abgeschlossen:

-->
<style>

Ein wenig Vorsicht ist eventuell geboten, wenn Sie selber noch Stylesheets in Ihrer Website verwenden, was heutzutage ja durchaus normal ist. Es kann evtl. vorkommen, dass Ihr eigener Code mit dem Code dieses Tools kollidiert, aber das ist leider bei allgemein verwendbaren Tools nicht auszuschließen. Sie müssten dann die beiden Codes überprüfen und ggf. anpassen.

Den HTML-Code kopieren Sie ebenfalls und fügen ihn gleich an der gewünschten Stelle im Text ein.

Leider können mit diesem Tool nur horizontale Navigationsleisten erstellt werden, aber diese finde ich schon recht ansprechend.