Navigation anpassen

Im Minimal-Layout, welches als Basis für das Beispiel-Layout verwendet wird, ist bereits das Partial mainmenu.html in der Seitenvorlage default.html enthalten.

Im aktuellen Beispiel soll die Navigation optisch etwas auffallender gestaltet werden. Außerdem soll die Navigation rechts dargestellt werden, also den Platz mit dem Newsbereich tauschen.

Damit die Darstellung und das Verhalten der Navigation etwas deutlicher wird, können Sie ein paar zusätzliche Haupt- und Unterseiten einfügen. Siehe dazu die Live-Demo.

1. Navigation in der Seitenvorlage anpassen

Tauschen Sie in der Seitenvorlage default.html die Positionen des Navigations- und News-Blocks:

Markup

<!-- News -->
<$ if ( page.anyAreaArticles("News") || (system.preview && system.showEmptyPreviewAreas) ) { $>
	<div id="news">
		<$= system.partial("area.html", "News", 1) $>
	</div>
<$ } $>
	
<!-- Navigation -->
<nav id="navigation">
	<$= system.partial("mainmenu.html") $>
</nav>

2. CSS für die Navigation anpassen

In der Datei styles.css sind bereits CSS-Stile für die Navigation vorhanden. Damit die einzelnen Navigations-Punkte deutlicher hervorgehoben werden, erhalten diese eine Hintergrundfarbe. Auch der Hover- und besonders der Aktive-Zustand werden farblich angepasst. Die Navigation wird außerdem nicht mehr mit Listenpunkte angezeigt. Passen Sie das CSS wie folgt an:

CSS

#navigation {
	float: right;
	width: 160px;
	margin: 10px 0 40px 40px;
}
#navigation ul {
	margin-bottom: 10px;
	padding-left: 0;
}
#navigation ul ul {
	padding-left: 15px;
}
#navigation li {
	list-style: none;
}
#navigation li li {
	font-size: 0.9em;
}
#navigation a {
	display: block;
	margin-bottom: 1px;
	padding: 3px 6px;
	color: #363b43;
	background-color: #f0f0f0;
	text-decoration: none;
}
#navigation a:hover {
	background-color: #e5e5e5;
}
#navigation a.active {
	color: #ffffff;
	background-color: #45b202;
}
#navigation li ul {
	display: none;
}
#navigation li.active > ul {
	display: block;
}

3. CSS für den Newsbereich anpassen

Da die Navigation nun rechts angezeigt werden soll, muss auch das CSS für den Newsbereich entsprechend angepasst werden:

CSS

#news {
	float: left;
	width: 200px;
	margin-right: 40px;
	margin-bottom: 40px;
}

4. Aktuelle Darstellung des Layouts

Wechseln Sie nun wieder in Zeta Producer. Da der Entwickler-Live-Modus aktiviert ist, sind die Anpassungen am Layout sofort sichtbar.

Wie Sie sehen ist die Navigation nun rechts positioniert und deutlicher hervorgehoben. Der Newsbereich (Mustermann GmbH) steht links.