Wie erstelle ich ein Menü (Teil 6) ♥♥♥♥

Es gibt viele verschiedene Wege ein Menü zu erstellen und ebenso viele verschiedene Arten es zu gestalten. Eine eigentlich relativ einfache Art werde ich euch im Folgenden zeigen.Wie das ganze fertig aussieht könnt ihr euch auf meinem Blog anschauen.

SCHRITT 1: DER CODE

Ersteinmal brauchen wir natürlich den CSS-Code, sprich die Basis für unsere Leiste.

/* Link-Balken
----------------------------------------------- */
#Line {
width: 100%;
height: 21px;
background: #eee;
position: fixed;
color: #ccc;
margin-top: 0px;
text-align: center;
word-spacing: 20px;
font-family: arial;
font-size: 12px;
line-height: 1.9em;
letter-spacing: 1px;
z-index: 100000;
}

Für die Leute, die sich damit nicht so gut auskennen werde ich euch den Code einmal übersetzen.

• Width steht für die Position der Leiste. Bei 100% befindet sie sich zentriert. Mit 50% beispielweise links von eurem blog
• Height zeigt die Größe eures Balkens
• Background die Farbe des Hintergrundes. Andere Codefarben findest du beispielweise auf dieser Seite
• Position sagt nur, dass die leiste fest oben auf eurem Blog bleibt und nicht mitscrollt
• Margin-top bestimmt wie weit die Tabs von der oberen Kante eures Blogs entfernt ist
• Text-align sagt wohin sich die einzelnen Tabs eures Menüs ausrichten sollen
• Word-spacing zeigt, wie man schwer am Wort erkennt, was für ein Abstand zwischen den Tabs liegt.
• Font-family bestimmt die Schrift
• Font-size die Schriftgröße
• Line-height sagt uns die Höhe der Leiste
• und Letter-spacing wie weit die einzelnen Buchstaben voneinander entfernt sind.

Da könnt ihr einfach etwas herumprobieren, wie es euch am besten gefällt.

SCHRITT 2: EINSETZEN DES CODES

Zum Einsetzen gehen wir erstmal natürlich auf Vorlage und HTML bearbeiten. Sucht mit STRG+F nach /head fügt über ]]></b:skin>  unseren Code ein. Das sieht bei mir dann so aus:

(wundert euch nicht, ich habe meine Leiste natürlich so angepasst genau wie sie mir gefällt)

SCHRITT 3: LINKS EINFÜGEN

Wenn ihr jetzt auf Vorschau klickt, werdet ihr feststellen, dass euer Menü noch nicht angezeigt wird. Das liegt daran, dass ein CSS-Code nur angibt, wie was auszusehen hat. Aber das "was" ist noch nicht eingefügt. Das macht ihr dann mit HTML. Dies macht ihr wie folgt.

Gebt in der Strg+F Suchzeile ''</head>''. Und direkt darunter fügst du folgenden Code ein.

<div id='Line'>
<a href='LINK'>TEXT</a>
<a href='LINK'>TEXT</a>
<a href='LINK'>TEXT</a>
<a href='LINK'>TEXT</a>
<a href='LINK'>TEXT</a>
</div>

Das ist dann natürlich eure Entscheidung wie viele Links ihr dort angezeigt haben möchtet.

Für ''LINK'' setzt ihr nun den Link ein, zu dem euch der Klick darauf führen soll, und statt ''TEXT'' schreibt ihr dort hin, was euch dafür angezeigt werden soll.

Bei mir sieht das dann beispielweise so aus:

SCHRITT 4: VOLLENDUNG

Nun gehst du auf Vorschau, und schaust ob dir dein Menü so gefällt. Sollte das nicht der Fall sein, kannst du die oben genannten Teile des Codes verändern.

Sollte bei dir keine Leiste erscheinen, suchst du mit Strg+F noch einmal nach ''#Line'' und veränderst dort die Zahl bei ''margin-top''. Welche Zahl du dann dafür einsetzt musst du selbst ausprobieren, denn das hängt von deinem Design ab. Meistens ist es aber eine negative Zahl, beispielweise -25px. Gehe dann einfach immer wieder auf Vorschau, bis deine Leiste so sitzt wie du sie haben möchtest.