Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

7 kostenlose CSS-Navigationsmenüs in Reiteroptik

Posted by sura1 - 27. Januar 2009

jan27_128x1281
Bookmark and Share

Reiternavigation – 7 kostenlose CSS-Menüs in Reiteroptik

Navigationsmenüs in Reiteroptik erfreuen sich großer Beliebtheit. Wie man solche Menüs erstellt und welche Variationsmöglichkeiten es gibt, soll im Folgenden beschrieben werden. Im meinem Tutorial soll ein Registerkartenmenü ohne Grafiken, allein mit HTML und CSS, erstellt werden. Das  Menü wird oben auf der Seite platziert, der Inhalt schließt sich darunter an.

Fertiges Beispiel:

karteireiter4

[fertiges Navigationsmenü ansehen: Grafik anklicken!]

Aufbau des Navigationsmenüs:

Punkt 1:

Das HTML-Gerüst des Menüs besteht aus einer ungeordneten Liste, die sich in einem <div>-Element befindet.

<div id="box1">
<ul>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
</ul>
</div>
<div id="box2">
<p>Inhalt>/p>
</div>

Um die einzelnen Listenpunkte waagerecht anzuordnen, werden diese mit display:inline dazu gebracht, sich wie Inline-Elemente zu verhalten; es erfolgt kein Umbruch nach den <li>-Elementen. Die <a>-Elemente werden mit display:block als Blockelemente dargestellt. Damit sie sich auch waagerecht anordnen, wird die Eigenschaft float:left eingesetzt. Das <div>-Element wird ebenfalls mit float:left und der Breitenangabe 100% formatiert. Diese Formate sind nötig, um das <div>-Element aufzuspannen. Würden sie fehlen, lägen die Menüpunkte optisch unterhalb des <div>-Elements. Statt das Format float einzusetzen, könnte auch mit einer Höhenangabe für das <div>-Element gearbeitet werden. Die Grunddarstellung des Menüs ist somit hergestellt, jetzt müssen nur noch Hintergründe, Schriftfarben, Abstände etc. angepasst werden. Der  CSS-Code sieht bisher folgendermaßen aus:

body {
margin:0;
padding:0;
}
#box1 {
float:left;
width:100%;
background:#808080;
}
#box1 ul {
margin:0;
padding:50px 10px 0 50px;
list-style:none;
}
#box1 li {
display:inline;
margin:0;
padding:0;
}
#box1 a {
float:left;
display:block;
background:#bbbbbb;
color:#ffffff;
font-weight:bold;
margin:0 4px 0 0;
padding:10px 10px 5px 10px;
text-decoration:none;
}
#box1 a:hover {
color:#000000;
background:#e6e6e6;
}
#box2{
padding:10px 50px 10px 50px;
margin:0;
clear:left;
}

Zu beachten ist noch, dass das erste Element unterhalb des Menüs, in dem Fall <div id=“box2″>, mit dem Format clear:left versehen wird, um den Umfluss des Menüs zu stoppen.

Navigation Punkt 1:

karteireiter1

[Navigationsmenü Punkt 1 ansehen: Grafik anklicken!]

Punkt 2:

Möchte man die aktuell aufgerufene Seite innerhalb des Menüs kennzeichnen, kann dafür eine zusätzliche Klasse angelegt werden. Diese Klasse wird im HTML-Code dem entsprechenden Link zugeordnet.

<div id="box1">
<ul>
<li><a href="#">Lorem ipsum</a></li>
<li><a class="aktiv" href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
</ul>
</div>

Im Beispiel heißt die Klasse aktiv. Im CSS-Code wird diese Klasse ebenfalls angelegt und mit den gewünschten Formaten versehen.

#box1 a.aktiv{
color:#000000;
background:#ffffff;
}

Navigation Punkt 2:

karteireiter2

[Navigationsmenü Punkt 2 ansehen: Grafik anklicken!]

Punkt 3:

Es ist auch möglich, neben einer farblichen Gestaltung des aktiven Links das räumliche Erscheinungsbild anzupassen. Um diesen Effekt zu erreichen, braucht lediglich die Klasse .aktiv um entsprechende Padding- und Margin-Werte ergänzt zu werden.

#box1 a.aktiv{
color:#000000;
background:#ffffff;
margin-top:-10px;
padding-bottom:15px;
}

Navigation Punkt 3:

karteireiter3

[Navigationsmenü Punkt 3 ansehen: Grafik anklicken!]

Der negative Wert in der Eigenschaft margin-top sorgt dafür, dass der Menüpunkt 10 px nach oben versetzt wird. Der Wert für padding-bottom errechnet sich aus dem positiven Wert von margin-top und dem padding-bottom-Wert, den das <a>-Element im Selektor #box1 a zugeordnet bekommen hat (5 px). Das Format padding-bottom sorgt nun dafür, dass sich der Menübutton bis zur Grundlinie des Menüs erstreckt.

Punkt 4 = fertiges Beispiel:

karteireiter4

[Navigationsmenü Punkt 4 ansehen: Grafik anklicken!]

Wie der letzte Screenshot zeigt, wurde ein ähnliches Format auch auf das Pseudoformat :hover angewandt. Bei Mausberührung hüpft der Menüpunkt 5 px nach oben.

#box1 a:hover {
color:#000000;
background:#e6e6e6;
margin-top:-5px;
padding-bottom:10px;
}

Punkt 5 :

Das fertige Navigationsmenü im Beispiel ist so angelegt, dass es bei einem zu kleinen Fenster umbricht, das Menü erzwingt keinen Scrollbalken im Browserfenster. grey_biografie_html

Möchte man das Umbrechen verhindern, muss man das <a>-Element mit einer festen Breite versehen. Der Wert für die Breite sollte in der Einheit em angegeben werden, damit das Element in der Breite mit dem im Browser eingestellten Schriftgrad skaliert werden kann. Da die <a>-Elemente in der Breite nicht formatiert werden, richtet sich die angezeigte Breite nach der Länge des darin enthaltenen Textes. Sollen alle Buttons in der gleichen Breite dargestellt werden, kann diese im Selektor #box1 a festgelegt werden, und auch hier sollte die Einheit em genutzt werden, um Skalierbarkeit sicherzustellen.

Abschließende Bemerkung:

Um Ihnen die Funktionsweise der Pseudo-Klasse .aktiv anschaulich vor Augen zu führen, habe ich das fertige Beispiel als kleine Webseite (7 verschiedene Farben) mit 6 einzelnen Unterseiten ausgeführt und diese miteinander verlinkt.

7 Farbvarianten

Jedes einzelne Navigationsmenü kann einzeln herunter geladen werden und wird in Form einer *zip-Datei ( 6,50 KB) kostenlos zur Verfügung gestellt. Meine Texte und Grafiken sind Copyright © Sura 1 Artworks und unterliegen einer Creative-Commons-Lizenz (Österreichische Version).

1. Grau / Grey

karteireiter_grey

   Beispiel Grau/Grey: Zip_Datei (6,50 KB)
demo2 button1

2. Blau / Blue

karteireiter_blue

   Beispiel Blau/Blue: Zip_Datei (6,50 KB)
demo2 button1

3. Grün / Green

karteireiter_green1

   Beispiel Grün/Green: Zip_Datei (6,50 KB)
demo2 button1

4. Orange / Orange

karteireiter_orange

   Beispiel Orange/Orange: Zip_Datei (6,50 KB)
demo2 button1

5. Rot / Red

karteireiter_red

   Beispiel Rot/Red: Zip_Datei (6,50 KB)
demo2 button1

6. Violett / Pink

karteireiter_violett

   Beispiel Violett/Pink: Zip_Datei (6,50 KB)
demo2 button1

7. Gelb / Yellow

karteireiter_yellow

   Beispiel Gelb/Yellow: Zip_Datei (6,50 KB)
demo2 button1

Ähnliche Artikel:

29 Free CSS Menus – 29 kostenlose CSS Menüs auf www.13styles.com
Navigations-Menü mit Button-Effekt
Formatierung von horizontalen Navigationsleisten mit CSS
CSS-Menüs ohne Einsatz von Listenelementen
9 Free CSS Menues – 9 kostenlose CSS-Menüs zum Mitnehmen
Free CSS Menüs – www13stylesscss
Free CSS Menus: gratis CSS Menüs

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: