Hallo Wordpresser,
ich bin noch ein Anfänger im Umgang mit Wordpress. Ich bin gerade dabei, unsere Vereinsseite (z.B.: http://www.tsv1878.de/kontakt/) neu zugestalten. Es soll ein komplett neues Design werden und außerdem mit Hilfe von Wordpress "gefüttert" werden. Ich habe dazu alle Seiten zuerst statisch erstellt und daraus auch schon ein Theme gebaut. Soweit hat alles prima funktioniert. Die Seiten sind noch nicht alle mit Inhalten gefüllt. Dass geschieht aber noch.
Momentan bin ich am Erstellen eines Navigationsmenüs. Das Navigationsmenü soll als Dropdown-Menü dargestellt werden. Ich habe in "Design -> Menü" auch schon ein Menü erstellt und dieses mit CSS nach meinen Vorstellungen zurechtgebogen.
Jetzt folgendes Problem:
Submenü öffnet sich bei :hover über Toplevel wie gewollt. Einige Submenüs haben aber weitere Submenüs. Diese werden aber sofort mit dem :hover über das Toplevel angezeigt. Sie sollen aber erst angezeigt werden, wenn man mit der Maus auf dem jeweiligen Submenü ist (Möglichst rechts daneben).
Kann mir jemand dazu einen Tipp/Vorschlag geben, wie ich dies richtig umsetzen kann?
Hier die Definition des Menüs in der function.php:
<?php
add_action( 'init', 'die_hauptnavi' );
function meine_hauptnavi() {
if ( function_exists( 'wp_nav_menu' ) )
wp_nav_menu( 'menu=haupt_navi&container_class=pagemenu&depth=3&fallback_cb=die_ersatznavi' );
else
die_ersatznavi();
}
?>Hier die Parameter für das CSS:
#topnav { position:relative; left:0px; top:-60px; }
#menu-hauptmenu { float:right; margin:0px; }
.pagemenu li { display:inline; float:left; font-weight:bold; }
.pagemenu a { float:right; padding:10px 20px; text-decoration:none; text-shadow: 1px 1px #e8e8e8; }
.pagemenu a:first-child { margin-left: none; }
.pagemenu a:link { color:#000000; }
.pagemenu a:visited { color:#ffffff; }
.pagemenu a:hover { color:#ffffff; background-color:#000000; border-top-left-radius:15px; border-top-right-radius:15px; text-shadow:none; }
.pagemenu li:hover { color:#ffffff; background-color:#000000; border-top-left-radius:15px; border-top-right-radius:15px; text-shadow:none; }
.pagemenu a:active { color:#000000; }
.pagemenu a:focus { color:#000000; }
.pagemenu .sub-menu { width: 92px;
padding-bottom: 2px; margin: 0; list-style:none; position: absolute; top: -999px; background: #ffffff; opacity: 0; }
.sub-menu li { float: none; display: block; position: static; margin-left:-40px; }
.pagemenu li:hover .sub-menu { background: #ffffff; top:40px; border:1px #000000 solid; border-top:0; opacity: 1; -webkit-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; }
.pagemenu .sub-menu a { padding: 3px 10px; margin: 0; display: block; float: none; color: #000000; background: none; line-height: 1.5; white-space: nowrap; }
.pagemenu li ul a:hover { color: #00000; background-color: #ffff00; border:none; border-radius:0; text-shadow:1px 1px #e8e8e8; }Das Menü binde ich in der header.php mit
<?php meine_hauptnavi(); ?>ein.
ZUSATZ:
Es wäre noch cool und wünschenswert, wenn die Schrift des Toplevel weiß bleibt, wenn man mit der Maus ins Submenü gleitet. Das Gleiche mit dem CSS, wenn man sich vom Submenü ins tiefer liegende Submenü bewegt.
Ich hoffe, ich konnte es verständlich erklären. BITTE helft mir! Wenn noch Fragen offen sein sollten, nur zu..
Danke schon mal und Grüße,
TSVer