Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Navigationsmenüs in Registeroptik

Posted by sura1 - 6. Juli 2008

Bookmark and Share

Navigationsmenü im Stil von Registern

Navigationsmenüs in Registeroptik erfreuen sich großer Beliebtheit. Wie man solche Menüs erstellt und welche Variationsmöglichkeiten es gibt, soll im Folgenden beschrieben werden.

alle Beispieldateien : 4,5KB-zip (karteireiter.-html + 7 css-dateien)

(bitte Download-Button oder Link anklicken!)

Achtung: Im Tutorial selbst finden Sie das Styleheet im html-Kopf eingebunden, in den fertigen Navigationsmenüs sind die CSS-Dateien dann mittels link-Element in die HTML-Datei eingebunden!

Sie haben auch die Möglichkeit, den kompletten Artikel als pfd-Datei (148 KB) herunterzuladen.

Download hier: navigationsmenu-im-stil-von-registern

Register ohne Grafikelemente

In diesem Beispiel soll ein Registerkartenmenü ohne Grafiken, allein mit HTML und CSS, erstellt werden. 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=“#“>Startseite</a></li>
<li><a href=“#“>Biografie</a></li>
<li><a href=“#“>Bildergalerie</a></li>
<li><a href=“#“>Kontaktseite</a></li>
<li><a href=“#“>Linkliste</a></li>
<li><a href=“#“>Impressum</a></li>
</ul>
</div>

Code: ( div id „box1“ )

Das Menü wird oben auf der Seite platziert, der Inhalt schließt sich darunter an.
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 komplette Code für dieses Beispiel sieht folgendermaßen aus:

HTML: karteireiter.html

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN“
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“&gt;
<html xmlns=“http://www.w3.org/1999/xhtml&#8220; xml:lang=“de“ lang=“de“>
<head>
<title>karteireiter 1</title>
<meta http-equiv=“content-type“ content=“text/html; charset=ISO-8859-1″ />
<style type=“text/css“>
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;
}
</style>
</head>
<body>
<div id=“box1″>
<ul>
<li><a href=“#“>Startseite</a></li>
<li><a href=“#“>Biografie</a></li>
<li><a href=“#“>Bildergalerie</a></li>
<li><a href=“#“>Kontaktseite</a></li>
<li><a href=“#“>Linkliste</a></li>
<li><a href=“#“>Impressum</a></li>
</ul>
</div>
<div id=“box2″>
<p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht,
nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen,
in denen Mühen und Schmerz ihm große Freude bereiten können.</p>
<p>Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender
körperlicher Betätigung, außer um Vorteile daraus zu ziehen? Aber wer hat irgend
ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude zu
genießen, die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet,
welcher keine daraus resultierende Freude nach sich zieht? Auch gibt es niemanden,
der den Schmerz </p>
</div>
</body>
</html>

Code: ( karteireiter.html )

Das Beispiel sieht jetzt so aus: ( Vorschau )

Screenshot:

Zu beachten ist noch, dass das erste Element unterhalb des Menüs, in dem Fall <div id=“box2″></div>, mit dem Format clear:left versehen wird, um den Umfluss des Menüs zu stoppen. Ohne dieses Format würde in Firefox und Opera das Menü einen Teil des Inhaltsbereichs verdecken.

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=“#“>Startseite</a></li>
<li><a class=“aktiv“ href=“#“>Biografie</a></li>
<li><a href=“#“>Bildergalerie</a></li>
<li><a href=“#“>Kontaktseite</a></li>
<li><a href=“#“>Linkliste</a></li>
<li><a href=“#“>Impressum</a></li>
</ul>
</div>

Code: ( div-box1_aktiv )

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;
}

Code: ( css_box1a-aktiv )

Unser Beispiel sieht danach so ausVorschau )

Screenshot:

Es ist auch möglich, neben einer farblichen Gestaltung des aktiven Links das räumliche
Erscheinungsbild anzupassen.

Danach sieht unser Navigationsmenü so aus: ( Vorschau )

Screenshot:

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;
}

Code: ( box1_1a-aktiv )

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.
Ein ähnliches Format wurde 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;
}

Code: ( box1a_hover )

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

Das Navigationsmenü sieht in diesem Falle so aus:

Möchte man das Umbrechen verhindern, muss man das <ul>-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.

Der fertige Quell-Code sieht dann wie folgt aus (karteireiter.html., karteireiter_grey.css):

karteireiter.html

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN“
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“&gt;
<html xmlns=“http://www.w3.org/1999/xhtml&#8220; xml:lang=“de“ lang=“de“>
<head>
<title>karteireiter</title>
<meta http-equiv=“Content-Type“ content=“text/html; charset=iso-8859-1″ />

<link href=“karteireiter_grey.css“ rel=“stylesheet“ type=“text/css“ media=“screen“ />
</head>
<body>
<div id=“box1″>
<ul>
<li><a href=“#“>Startseite</a></li>
<li><a class=“aktiv“ href=“#“>Biografie</a></li>
<li><a href=“#“>Bildergalerie</a></li>
<li><a href=“#“>Kontaktseite</a></li>
<li><a href=“#“>Linkliste</a></li>
<li><a href=“#“>Impressum</a></li>
</ul>
</div>
<div id=“box2″>
<p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht,
nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen,
in denen Mühen und Schmerz ihm große Freude bereiten können.</p>
<p>Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender
körperlicher Betätigung, außer um Vorteile daraus zu ziehen? Aber wer hat irgend
ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude zu
genießen, die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet,
welcher keine daraus resultierende Freude nach sich zieht? Auch gibt es niemanden,
der den Schmerz </p>
</div>
</body>
</html>

karteireiter_grey.css

/* =========================
Stylesheet für die Übung:
Navigationsmenü im Stil
von Registern
========================= */
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;
margin-top:-5px;
padding-bottom:10px;
}
#box2{
padding:10px 50px 10px 50px;
margin:0;
clear:left;
}
#box1 a.aktiv{
color:#000000;
background:#ffffff;
margin-top:-10px;
padding-bottom:15px;
}

Fertiges Navigationsmenü:Vorschau )

Screenshot:

Farbvariationen:

Bitte ersetzen Sie im HTML-Quellcode im <head>-Element <link href=“karteireiter.css“ rel=“stylesheet“ type=“text/css“ media=“screen“ /> die CSS-Datei durch die jeweilige Farbvariante.

karteireiter_green.css ( Vorschau )

Screenshot:

karteireiter_orange.css ( Vorschau )

Screenshot:

karteireiter_blue.css ( Vorschau )

Screenshot:

karteireiter_red.css ( Vorschau )

Screenshot:

karteireiter_yellow.css ( Vorschau )

Screenshot:

karteireiter_violett.css ( Vorschau )

Screenshot:

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: