Menü gestalten (schlichtes Menü/Sidebarmenü) [Tutorial]

Hallo Leute!

Heute zeige ich euch mal, wie ich meine zwei Menüs gestaltet und gestylt habe. Vielleicht interessiert den ein oder anderen ja besonders das Menü in der Sidebar :) Und nein, das Grundgerüst dazu habe ich nicht selbst gebastelt - die Quellen werde ich natürlich verlinken!

Früher habe ich das "normale" Menü benutzt, das mit den Seitentabs von Blogger. Weil ich aber gerne selbst am Design herumexperimentiere, wurde mir das schnell zu langweilig und ich habe nach einem neuen gesucht - und hab eines auf CPL gefunden.

<center>
<div style="font-family: 'Handlee', cursive;  font-size:155%; margin-top:12px;">
<a href="http://pusteblumeasdf.blogspot.co.at/p/rezensionen.html">Rezensionen</a> |
<a href="http://pusteblumeasdf.blogspot.co.at/p/favourites.html">Favourites</a> |
<a href="http://pusteblumeasdf.blogspot.co.at/p/monatsstatistiken.html">Monatsstatistiken</a> |
<a href="http://pusteblumeasdf.blogspot.co.at/p/about.html">Hinter dem Blog</a>
</div>
</center>

<center>: Menü wird mittig angezeigt

font-family: Schriftart -ntweder 1) nehmt ihr eine der Standardschriftarten, die euch Blogger zur Verfügung stellt (Trebuchet, Verdana etc.) oder 2) ihr nehmt dieselbe Schriftart, die ihr für die Postüberschriften nehmt. Seht euch dazu auf jeden Fall ein Tutorial an, wie man Schriften von Google Webfonts einbindet.

font-size: Schriftgröße - einfach die Prozentzahl größer oder kleiner machen, bis es passt

margin-top: bestimmt, dass das Menü nicht am Header "klebt". Sprich, wenn man 0px einsetzt, ist die Schrift wirklich ganz nah am Header dran und das sieht einfach nicht wirklich schön aus. Einfach wieder die Zahl vergrößern oder verkleinern, bis es passt.

Diese Teile bestimmen, zu welcher Seite der Link führen soll und

diese Teile bestimmen, welcher Text dafür angezeigt werden soll.

Das sind einfach Platzhalter zwischen den Links. Man kann dafür auch andere Zeichen/Symbole einsetzen.

So könnte es danach aussehen. Wenn man mit der Maus drüberfährt, werden die Felder hellgrau.

Das Gerüst stammt von care about what?, und ich erkläre euch hier nochmal, was die einzelnen Abschnitte bedeuten, damit man es selbst anpassen kann. Wäre ja doof, wenn alle Menüs gleich aussehen. 

Ich kann nicht garantieren, dass dieses Menü bei allen Vorlagen funktionieren wird. Im Grunde genommen sollte es schon, aber ich habe mich grün und blau geärgert, als ich es mit meiner früheren Vorlage einfach nicht geschafft habe. Also bitte nicht enttäuscht sein.

Ihr geht in eurem Dashboard auf Vorlage → Anpassen → Erweitert → CSS hinzufügen, kopiert diesen Code rein und speichert. 

/* Sidebar Menü
----------------------------------------------- */
a.navi {
 margin-bottom: 1.5px;
 display: block;
 border-bottom: 1px solid #ddd;
 font-family: sans-serif;
 font-size: 11.5px;
 color: #999;
 background-color: #fafafa;
 text-align: center;
 line-height: 17px;
-webkit-transition-duration:.4s; -moz-transition-duration:.4s;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
opacity:1;
}
a.navi:hover {
 margin-bottom: 1.5px;
 display: block;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
 border-bottom: 1px solid #ddd;
opacity:1;
 font-family: sans-serif;
 font-size: 11.5px;
 color: #b0b0b0;
 background:url(http://i48.tinypic.com/34nf78n.jpg) #f5f5f5;
-webkit-transition-duration:.4s; -moz-transition-duration:.4s;
 text-align: center;
 line-height: 17px;
}

a.navi und a.navi:hover sind die zwei Hauptbestimmungsteile. Der erste für den Link, wenn man gar nichts macht und das zweite mit dem Hover (wie der Name schon sagt) bestimmt, wie es aussehen soll wenn man mit der Maus drüberfährt.
margin-bottom ist dafür zuständig, wie weit die verschiedenen Linkboxen auseinander sein sollen. Vergrößert man die Zahl, wird der Abstand größer. Achtet darauf, dass margin beide Male, wo es vorkommt, denselben Wert hat, um hässliche Verschiebungen zu vermeiden!
border-bottom ist die Linie am unteren Rand eines jeden Kästchens. Man bemerkt sie kaum, aber es sieht optisch ein wenig besser aus. Die px ist die Dicke der Linie. Solid (durchgezogen) könnt ihr durch dottet (gepunktet) oder dashed (gestrichelt) ersetzen. Die Kombination danach ist die Farbe.
font-family bestimmt die Schriftart, näher habe ich das schon beim schlichten Menü erklärt.
font-size bestimmt die Größe. Mit größerer Zahl wird die Schrift größer, Kommazahlen trennt man mit einem Punkt.
color bestimmt die Schriftfarbe, eine Auswahl findet ihr hier oder bei colourpicker.com.
background-color bzw background bestimmt die Hintergrundfarbe. Ich habe beim Hover als Hintergrund ein Bild genommen, falls ihr ein anderes Bild haben wollt, schneidet ihr es am besten zu, ladet es irgendwo hoch und fügt dann die URL statt dieser ein. Wollt ihr eine normale Hintergrundfarbe, könnt ihr den Part mit der URL einfach löschen.
text-align bestimmt die Textausrichtung. center = mittig; right = rechts; left = links.
line-height bestimmt die Höhe des Linkkästchens. Vergrößert man die Zahl, wird das Kästchen größer.
4s bestimmt die Sekunden, die der Menü braucht, um von Linkschriftfarbe zu Hoverschriftfarbe und Linkhintergrund zu Hoverhintergrund zu wechseln. Vergrößert man die Zahl, geschieht der Vorgang langsamer.
Diese Teile bestimmen, wie abgerundet die Ecken sein sollen.

Die einzelnen Teile des Codes sind jetzt klar, oder? Falls noch etwas unklar ist, könnt ihr fragen, oder einfach selbst ausprobieren (vorher abspeichern nicht vergessen!). Wenn ihr diesen Code gespeichert habt, ist der Grundstein für das Menü gelegt. 

Nun geht ihr auf euer Layout und fügt ein neues HTML/Javascript-Gadget hinzu. Dort fügt ihr folgendes ein:

<div id="navi">
<a class="navi" href="LINK ZUR SEITE">ANZUZEIGENDER TEXT</a>
<a class="navi" href="LINK ZUR SEITE">ANZUZEIGENDER TEXT</a>
<a class="navi" href="LINK ZUR SEITE">ANZUZEIGENDER TEXT</a>
<a class="navi" href="LINK ZUR SEITE">ANZUZEIGENDER TEXT</a>
<a class="navi" href="LINK ZUR SEITE">ANZUZEIGENDER TEXT</a>
<a class="navi" href="LINK ZUR SEITE">ANZUZEIGENDER TEXT</a>
</div>

Das war's. Speichern und staunen. Nochmal, ich kann nicht garantieren, dass es bei allen Vorlagen funktionieren wird! Bei der Simple Vorlage und Minima Vorlage klappt es.

Vielleicht haben ja ein paar von euch was dazugelernt. Über eine Reaktion freue ich mich :)