Verkaufsseiten-Menü

Nachdem Sie sich in den CSS-Einführungsartikeln einiges an CSS sich erarbeiten konnten, will ich Ihnen heute das fertige Menü darstellen. [Quelle:http://thestyleworks.de/tut-art/listnav3.shtml]

Diejenigen von Ihnen die nur das Menü wollen, können hier zugreifen. Dann am Ende gibt es eine zip-Datei zum Download, mit der Sie das Menü für Ihre Webseite kopieren können.

Das Menü soll folgendes Aussehen haben:

Menü Beispiel

Der Aufruf des Menüs ist eigentlich ganz einfach:

<body>
<div id=“header“>
<ul>
<li id=“current“>
<a href=“index.html“ title=“““>Startseite</a>
</li>
<li><a href=““ title=“ScreenShots“>ScreenShots</a></li>
<li><a href=““ title=“Bestellen „>Bestellen</a></li>
</ul>
</div>
Wir haben einen Bereich der Seite abgeteilt mit id=“header“. Für diesen müssen wir eine Formatierung später wählen. Danach kommt eine unnumerierte Liste mit dem <ul-Tag.

Bei den Listenelementen müssen wir Links auf die einzelnen Seiten schreiben. Eine Besonderheit ist dabei, dass wir eine id=“current“ haben, die für die eigentliche aktive Seite in die Liste eingetragen wird. Je nach Seite wechseln wir diese Angabe auf die aktuelle Seite, also bei der Bestellseite würden wir schreiben
<body>
<div id=“header“>
<ul>
<li ><a href=“index.html“ title=“““>Startseite</a></li>
<li ><a href=““ title=“ScreenShots“>ScreenShots</a></li>
<li id=“current“>
<a href=““ title=“Bestellen „>Bestellen</a>
</li>
</ul>
</div>

Die Seite sieht dann so aus:

Menü Beispiel

Somit wechselt der „helle“ Registerbutton auf die Bestellseite. Was optisch anzeigt, dass der Käufer nun auf der Bestellseite gelandet ist. Nett! Oder?

Sie können durch Hinzufügen einer neuen  <li>…</li> – Zeile auch neue Buttons erscheinen lassen, oder durch das Weglassen der <li>..</li> – Zeilen auch Menüpunkte verschwinden lassen.

Auf allen Seiten geben Sie die obige HTML-Strecke ein und erhalten ein dynamisches Menü! Den Rest übernimmt eine CSS-Datei, die Sie in Ihre Verkaufsseite einlinken.

Wie aber sieht diese CSS-Datei aus? Nun fast alle notwendigen Kenntnisse dazu wurden in den einzelnen Artikeln schon besprochen. Hier nochmal der link auf diese CSS-Einführungsartikelserie: CSS Syntax kleine Einführung Teil 1

Wir haben 2 Bilder, die schon im Teil 3 dargestellt wurden. Diese sind left.gif und right.gif. Diese stellen die nicht aktiven Elemente unseres Menüs dar ( also die dunkleren Bilder). Daneben müssen wir aber auch noch Bilder haben, die den hellen, den aufgeschlagenen Bereich unseres Menüs darstellen. Diese Bilder sind left_on.gif und right_on.gif. (Alle Bilder finden Sie auf der Download-Datei zu diesem Artikel). Für den obigen Hintergrund, wo die Menüpunkte erscheinen haben wir noch ein Bild mit Namen bg.gif, das einen vertikalen Verlauf unserer Hauptfarbe ins Weisse darstellt.

Das ist schon alles. Kommen wir nun um CSS!

Wir haben die Seite begonnen mit einer Anweisung <div id=“header“>, dann die  <ul und <li. Für alle diese Elemente müssen wir Formatierungen wählen.

Ich stelle diese CSS Anweisungen erstmal dar, um sie später dann zu beschreiben:


#header {
float:left;
width:55%;
background:#DAE0D2 url(„../images/bg.gif“) repeat-x bottom;
font-size:93%;
font-family: Verdana,Arial,Helvetica,sans-serif;
margin-left:250px;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li {
float:left;
background:url(„../images/left.gif“) no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a {
display:block;
background:url(„../images/right.gif“) no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
#header a:hover {
color:#333;
}
#header #current {
background-image:url(„../images/left_on.gif“);
}
#header #current a {
background-image:url(„../images/right_on.gif“);
color:#333;
padding-bottom:5px;
}

Alle Anweisungen beschreiben die ID header. Man kann in CSS durch #header ul die Formatierung des Tags ul nur auch den Bereich #header beschränken. Alle Formatierungen kommen dann nur zum Tragen, wenn das ul-Tag innerhalb des Bereiches mit <div id=“header“>….</div>liegt. Und genau das wird hier gemacht.

Header bezeichnet einen Float-Bereich, der von links aus flutet. In diesem Bereich werden nun die einzelnen Elemente formatiert. Also zuerst die unnumerierte Liste <ul>!

Bei ul setzen wir die Listenelementdarstellung auf  „none“, weil wir keine Numerierungszeichen benötigen.  Dann kommen die Listenelemente mit <li>. Diese müssen wir geschickt formatieren.

Wir brauchen einmal das linke Randbild left.gif als Hintergrundbild. Da ja das Listenelement einen Link auf die andere Seite darstellt, können wir den Link (<a>) noch formatieren. Dies tun wir mit dem rechten Randbild right.gif als Hintergrund. Da aber hier ein Linktext eingeschrieben werden soll, brauchen wir auch noch eine Textformatierung.

Zunächst wählen wir ein display:block, also ein Blockelement, das jeweils eine neue Zeile erstellt und einen grösseren Abstand enthält. Da wir ja float angegeben haben, setzen wir die Anordnung auf eine neue Zeile außer Kraft.

Somit haben wir mit den 2 Bildern den Text unseres Links sozusagen eingekesselt.  Man nennt diese Technik auch „Sliding Doors of CSS“ oder kurz Schiebetüren (entwickelt von Douglas Bowman) . Jetzt müssen wir nur noch mehrere dieser Schiebetüren definieren und unser Menü ist fast fertig.

Wenn das id=“current“ gegeben wird, änderen wir die Hintergrungdbilder auf unsere beiden hellen Bilder und schon haben wir auch das erledigt.  Wenn die Maus über unser Menü fährt, können wir dem aktuellen Link noch eine andere Textfarbe geben, das sieht schön aus!

Also schreiben wir

#header a:hover {
color:#333;
}

Das war’s. Noch genauere Erklärungen finden Sie auf der Seite http://thestyleworks.de/tut-art/listnav3.shtml

Ja und zu guter letzt der Link auf die Beispiel-Zip-Datei

[Entpacken Sie die Datei bitte unter Beibehaltung der Pfadangaben, dann funktioniert sie Seite richtig]

Viel Erfolg beim Ausprobieren

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar