Dieser Artikel beschreibt, wie einfach sich eine Navigation bzw. ein Menü mit Rollover Effekten in einem WordPress Blog einrichten läßt. Es sind lediglich 2-3 Schritte dazu notwendig!

Anleitung: Navigationsmenü im WordPress Theme in 2-3 Schritten einrichten

Schritt 1: Das folgende Coding in die header.php vor das Tag </body> einfügen. Natürlich sind meine Links und Texte zu ersetzen. Wenn nicht, freue ich mich über viele Backlinks!

<div id="menulinks"> <ul id="navlist"> <li><a href="http://weblog-abc.de/wordpress-themes">WordPress Themes</a></li> <li><a href="http://weblog-abc.de/blogg-tipps-tricks/die-besten-wordpress-plugins-696.html">WordPress Plugins</a></li> <li><a href="http://weblog-abc.de/category/geld-verdienen">Geld verdienen im Internet</a></li> <li><a href="http://weblog-abc.de/blogg-tipps-tricks/liste-der-besten-seo-tools-110.html">Die besten SEO-Tools</a></li> <li><a href="http://weblog-abc.de/category/seo-tipps">SEO Tipps & Tricks</a></li> </ul> </div>

Auf vielen Standard-Webseiten ist es ausreichend, den oben aufgeführten Code einzufügen. Schritt 2 sollte daher nur Beachtung finden, wenn die Schritte 1 und 3 nicht zum gewünschten Ergebnis führen. Schritt 2 (Optional) Folgende Stelle in der header.php suchen

<div id=”header”> <div id=”headerimg”> <h1><a href=”<?php echo get_option(’home’); ?>/”><?php bloginfo(’name’); ?></a></h1> <div class=”description”><?php bloginfo(’description’); ?></div> </div> </div>

und darunter diesen Code einfügen:

<div id=”menulinks”> <ul id=”navlist”> <li><a href=”<?php echo get_settings(’home’); ?>”>Home</a></li> <?php wp_list_pages(’title_li=’); ?> </ul> </div>

Schritt 3: Diesen Abschnitt an das Ende der style.css kopieren:

#menulinks { height:50px; width:95%; margin-top:10px; margin-left:20px; margin-right:10px; clear:both; background-color:#73a0c5; text-align:left; } ul#navlist { margin: 0; padding: 0; white-space: nowrap; float:left; width:100%; } ul#navlist li { font-size:10pt; display:inline; list-style-type: none; } ul#navlist li a { font-family:Arial; font-size:14px; font-weight:bold; text-align:center; color: #FFFFFF; height:33px; padding-top:17px; padding-left:15px; padding-right:15px; background:none; display:block; float:left; text-decoration: none; } ul#navlist li a:hover { background-color:#2e4876; }

Das war's schon. Das Navigationsmenü ist im WordPress Theme eingerichtet und so sieht's aus: Durch eine Änderung in der folgenden Wordpress Theme CSS Datei style.css können z.B. die Rollover Farben des Navigationsmenüs geändert werden.

ul#navlist li a:hover { background-color:#f60; }

Danach sieht's so aus: Natürlich kann für den Rollover Effekt im Navigationsmenü auch ein Hintergrundbild verwendet werden.

ul#navlist li a:hover { background-image:url(images/menurollover.png); }

Das war's. Viel Spass damit! Anregungen, Kritik, Fragen usw. gerne in den Kommentaren! Ähnliche Posts im Web: Dynamisches Menü mit Hervorhebung von Frank Bültge CSS Navigation Menue