Menü: Bilder bei Mouseover in der Navigationsleiste

    Hallo liebe Wordpressler, ich hoffe ich kann auf euch zählen.
    Bei Wordpress 2.9 war es kein Problem mithilfe des Hover-Plugins einen Hovereffekt mit einem Bild zu erzeugen, indem man bei der Kategorie-beschreibung einfach einen gesonderten IMG-Tag reingehauen hat => super.
    Bei Wordpress 3.0 sieht das jetzt anders aus. Ich habe zwar diesen tollen Menü-builder und kann sogar ein HTML-Attribut title (optional) einfügen, was ja eigentlich dafür gedacht ist einen tollen hovereffekt sehr einfach für jedermann zu gewährleisten, doch leider gehen jetzt die Bilder nicht mehr.
    Egal wie ich den Img-Tag bei dem HTML-Attribut eingebe, es kommen keine Bilder. Außerhalb der Navigationsleiste, in den Seitenwidgets, greift weiterhin das Hover-Plugin und ich hab meinen gewünschten Effekt, aber wie bekomme ich wieder Bilder beim Mouseover in der Menüleiste. Hilfe bitte

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Wozu ein Plugin, wenn es doch auch rein mit CSS geht?

    Gib den Menüeinträgen bei der Generierung doch einfach die WP-ID der Seite/Kategorie als ID* mit und schreibe eine passende CSS-Deklaration.

    Gruß
    Mo

    *Da IDs nicht rein aus Zahlen bestehen dürfen, muss der von WP übergebenen ID mindestens ein Buchstabe voran gestellt werden.

    ich hab nicht ein wort verstanden :neutral:
    kannst du das nochmal für doofe erklären? Also was muss ich da eintragen? Wo muss ich was ändern, damit es auch ohne plugin funzt?

    Da ich keine Ahnung habe wie du auf deiner Seite dein Menü zusammenbaust und wie groß deine Kenntnisse bzgl. HTML, CSS und PHP sond hier eine recht allgemein gehaltene Erklärung:

    Jeder Beitrag, jede Seite und jede Kategorie bekommen von Wordpress intern eine ID zugeordnet. Diese ID kann man im Template via Template Tags und PHP ausgeben lassen.

    Auch HTML und CSS kennen IDs.

    Wenn man nun die WP-ID zu einer HTML-ID macht kann man diese per CSS direkt ansprechen und ihm so ein Hintergrundbild inkl. Mouseover zuordnen. Das könnte z.B. so aussehen:

    HTML
    <a href="example.htm" id="wp_1234">Ein Menüeintrag</a>
    Code
    a#wp_1234:link  {background-image: url("bild_normal.jpg");}
a#wp_1234:hover  {background-image: url("bild_mouseover.jpg");}

    Gruß
    Mo

    uff
    ne, sorry, ich steh grad total auf dem schlauch.
    ich versteh den zusammenhang zu ner navigationsleiste nicht, bzw. den html code nicht, wo ich dem link einen namen geben soll.
    [COLOR=#008000]<a href=[COLOR=#0000FF]"example.htm"[/COLOR] id=[COLOR=#0000FF]"wp_1234"[/COLOR]>[/COLOR]Ein Menüeintrag[COLOR=#008000]</a>[/COLOR] du kennst doch sicher diesen wp 3.0 menubuilder, wo man ganz easy dem link einen "alt"-text, ein attribut geben kann. Warum kann man da kein Bild zuordnen, wo ist da der Haken?

    Kannte ich bisher nicht, hab ich mir grade mal angeschaut. Nimmt dir augenscheinlich aber schon ein bisserl Arbeit ab.

    Den Menüelementen werden schon die passenden IDs mitgegeben (wenn auch nicht die WP-IDs):

    HTML
    <ul id="menu-test" class="menu">
<li id="menu-item-4" class="menu-item menu-item-type-post_type"><a href="http://desows1205/wordpress/?page_id=2">Eine Seite</a></li>
</ul>

    Jetzt musst du nur noch in deiner CSS-Datei einen entsprechenden Eintrag (s.o.) machen.

    Gruß
    Mo

    habe nun in die allesüberschreibende user.css folgendes eingetragen was ich im seitenquelltext gefunden hab

    Code
    a#menu-item-302:link  {background-image: url("bild_normal.jpg");}
a#menu-item-302:hover  {background-image: url("http://rolfholunder.files.wordpress.com/2008/01/rolf-holunder-300.jpg");}


    (also hab ein xbeliebiges bild genommen)

    leider passiert garnichts. muss ich irgendwo noch wie was eintragen? :confused: was mach ich falsch..eventuell beim html-attribut im Menubuilder?

    Deine CSS-Definition trifft auf ein nicht vorhandenes Element zu.

    Wordpress gibt LI-Element die ID, nicht dem A-Element.
    Entweder deklarierst du:

    HTML
    li#menu-item-302 a:link  {background-image: url("bild_normal.jpg");}
li#menu-item-302 a:hover  {background-image: url("http://rolfholunder.files.wordpress.com/2008/01/rolf-holunder-300.jpg");}

    Hiermit spricht du das A-Element als Kindelement des LI-Elements mit der ID "menu-item-302" an.

    oder

    HTML
    li#menu-item-302:link  {background-image: url("bild_normal.jpg");}
li#menu-item-302:hover  {background-image: url("http://rolfholunder.files.wordpress.com/2008/01/rolf-holunder-300.jpg");}

    Hier bekommt das LI-Element das Hintergrundbild.

    oder

    HTML
    #menu-item-302:link  {background-image: url("bild_normal.jpg");}
#menu-item-302:hover  {background-image: url("http://rolfholunder.files.wordpress.com/2008/01/rolf-holunder-300.jpg");}

    Hier würde jedes Element mit der ID "menu-item-302" ein Hintergrundbild bekommen.

    Gruß
    Mo

    wir sind nah dran, aber ich glaube wir haben uns von vorneherein falsch verstanden.
    ich möchte kein hintergrundbild beim mouseover, sondern eine art popup nebendran, sodass man das ganze bild sieht und nicht nur ein wenig.
    weißt du wie das funktioniert?

    http://www.moneytreesystems.com/css/picpopup.html#
    ungefähr so wie hier, nur, dass ich nicht über ein bild fahre sondern über einen link..und dann soll ein bild aufpoppen.

    Einmal editiert, zuletzt von walinjo (28. Juni 2010 um 14:24)

    Ja, das ist natürlich was anderes...aber auch machbar, wenn auch ungleich komplizierter. Nächstes Mal gleich ein Beispiel mitgeben.

    Dazu musst du die Ausgabe von wp_nav_menu() anpassen.

    Ich würde es mit $after probieren

    PHP
    <?php wp_nav_menu( array('after' => '<span>&nbsp;</span>' )); ?>

    Mittels CSS passt du die A- und die SPAN-Elemente an:

    Code
    ul.menu li a {position: relative;}
ul.menu li a:link span {position: absolute; left:100px; bottom: 0 display: none; width: 150px; height: 100px;}
ul.menu li a:hover span {display: block;}

    Damit erreichst du, dass die SPAN-Elemente innerhalb des A-Elements erst beim Mouseover sichtbar werden.

    Mittels

    Code
    li#menu-item-302 a:link span  {background-image: url("bild_normal.jpg");}
li#menu-item-302 a:hover span {background-image: url("http://rolfholunder.files.wordpress.com/2008/01/rolf-holunder-300.jpg");}

    definierst du nun die entsprechenden Bilder.

    Gruß
    Mo

    ok, wenn du mir jetzt noch konkret sagst wo ich den php code eingeben soll, denke ich dass wir es geschafft haben :grin:

    Einmal editiert, zuletzt von walinjo (28. Juni 2010 um 15:32)

    Ich kann nur vermuten, dass das bei dir in der "header.php" steht.
    Je nach verwendetem Theme und Autor kann das sehr unterschiedlich sein.

    Zumindest im WP 3.0 Standard Theme "twentyten" ist es in der "header.php" in Zeile 73 zu finden. Hier muss der Eintrag ergänzt und nicht ersetzt werden.

    Gruß
    Mo

    PHP
    <?php arras_above_nav() ?>
<div id="nav">
    <div id="nav-content" class="clearfix">
    <?php 
    if ( function_exists('wp_nav_menu') ) {
        wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'sf-menu menu clearfix') );
    } elseif ( function_exists('pixopoint_menu') ) {

    hab das hier in der header.php gefunden
    ich benutze das arrastheme.
    meinst du du weißt wie ich das da reinbauen muss? mag da nix kaputt machen

    Das Theme kenn ich nicht.
    Theoretisch müsste es reichen diese Zeile zu ergänzen:

    PHP
    wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'sf-menu menu clearfix') );
    PHP
    wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'sf-menu menu clearfix', 'after' => '<span>&nbsp;</span>') );

    Gruß
    Mo

    $after bringt hier scheinbar nicht den gewünschten Erfolg, da bei dir das SPAN-Element erst hinter das A-Element geschrieben wird und nicht wie ich vermutet hatte in.

    Komisch...dafür sollte doch laut doku $link_after zuständig sein.

    Du könntest probieren deine CSS entsprechend anzupassen:

    Code
    ul.menu li {position: relative;}
ul.menu li a:link + span {position: absolute; left:100px; bottom: 0 display: none; width: 150px; height: 100px;}
ul.menu li a:hover + span {display: block;}

    Gruß
    Mo

    Probier mal das hier

    Code
    ul.menu li:link span,
ul.menu li:active span,
ul.menu li:visited span {position: absolute; left:100px; bottom: 0 display: none; width: 150px; height: 100px;}
    Code
    ul.menu li:hover span {display: block;}


    Gruß
    Mo

    Einmal editiert, zuletzt von Morris (28. Juni 2010 um 16:34)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden