Hey,
In diesem Tutorial möchte ich euch zeigen, wie ihr im Profidesign CSS ganz einfach eine zweiteilige Navigation (bsp. horizontale Navigation für Hauptpunkte und vertikale Unternavigation für Unterpunkte) hinbekommt.
1. Schritt: Manuelle Hauptnavigation
Als erstes erstellen wir die manuell erstellte Hauptnavigation, die Unternavigation wird später mit der normalen Navigation laufen. Damit die Hauptnavigation einwandfrei funktioniert, sollte man alles, dass vor der Navigation erscheint in neue Klassen tun und die Gegenstücke vom normalen HPBK-Container unsichtbar bzw. verschwinden lassen.
Erstellen wir nun zunächst die Navigation + Header, da der Header ja über der Navigation steht:
Text über Design:
Code: <div id="head">
</div>
<div id="navigation">
<a href="LINK">NAME</a>
...
</div>
CSS-Code ohne Styletags
Code: body
{
width: 900px;
margin: 0 auto;
}
#head
{
Styleanweisungen Header
}
#navigation
{
Styleanweisungen Navigation
}
#navigation a
{
float: left; /* sorgt dafür, dass Navi horizontal ist */
Anweisungen für Menüpunkte, zusätzlich noch a:hover etc. einsetzbar
}
Schritt 2: Unternavigation und Content ausrichten
Nun richten wir noch den Content und die Unternavigation aus und löschen die Klassen, die auf keinen Fall gebraucht werden:
CSS-Code ohne Styletags:
Code:
#container
{
Styleanweisungen, aber nicht positionieren
}
#nav_container
{
float: left; /* richtet die Navigation links aus */
width: 200px;
weitere Anweisungen
}
#content
{
float: right; /* richtet Content rechts aus */
width: 700px;
weitere Anweisungen
}
#counter, #nav_heading, #post_header, #pre_content, #title, #header_container, #pre_header, div.header
{
display : none; /* setzt unwichtige Klassen außer Kraft */
}
Nun haben wir ein 2-spaltiges Layout mit zwei Navigationen.
Schritt 3: Navigation anpassen
Als letzten Schritt sorgen wir dafür, dass die Unternavigation auch wirklich zur Unternavigation wird. Dafür erstellen wir im Seiteneditor für jeden Hauptmenüpunkt eine neue Hauptseite (bsp. Punkt1) und packen die Unterseiten des Hauptmenüpunktes unter diese Seite (auch die Hauptseite des Punktes muss unter den Punkt1), sodass wir folgendes Ergebnis haben:
Haupseite: Punkt 1
Unterseiten: Home - News - Forum - Chatroom
Im letzten Schritt werden die Hauptseiten außer Kraft gesetzt:
CSS-Code ohne Styletags
Code: #nav_Punkt1, #nav_Punkt2, ...
{
display: none;
}
Erklärung des Codes:
Da die Hauptseiten nicht mehr angezeigt werden, kann man in der Unternavigation auch nicht mehr auf Hauptseiten klicken. Dies hat zur Folge, dass es im Endeffekt pro Hauptmenüpunkt eine neue Navigation gibt bzw. es so aussieht.
Bei Fragen etc. bitte hier posten oder per PN
Mfg
______________
THE JOY OF NOT BEING SOLD ANYTHING
Zuletzt bearbeitet von ig444 am 02.08.2009, 00:22, insgesamt 3-mal bearbeitet
|
