Menü: Bilder bei Mouseover in der Navigationsleiste

    Mein Fehler, li hat natürlich kein :link

    Es ist einfach zu warm.

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


ul.menu li:hover span {display: block;}

    und aus

    Code
    li#menu-item-311 a:link span  {background-image: url("bild_normal.jpg");}


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

    muss natürlich

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

    werden.


    Gruß
    Mo

    • 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

    ja ist echt warm
    wir kommen näher...

    ok, es erscheint ein bild, er versteckt sich jedoch unter den sidebars und geht nicht mehr weg^^. :neutral: das ist doch zum verrückt werden. mein css inhalt sieht wie folgt aus

    Code
    ul.menu li span {position: absolute; left:100px; bottom: 0 display: none; width: 250px; height: 300px;}


ul.menu li:hover span {display: block;}




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

    Du hast jetzt wohl eine Zeile zuviel aus deinen CSS geschmissen:

    Code
    ul.menu li {position: relative;}

    Das Bild wird aber schon mal an der richtigen Stelle angezeigt, wenn auch nicht im richtigen Augenblick.

    Aus

    Code
    ul.menu li span {position: absolute; left:100px; bottom: 0 display: none; width: 250px; height: 300px;}
ul.menu li:hover span {display: block;}

    wird

    Code
    html body div.menu-lol-containter ul#menu-lol li span {position: absolute; left:100px; bottom: 0 display: none; width: 250px; height: 300px;}
html body div.menu-lol-containter ul#menu-lol  li:hover span {display: block;}

    Das hat den Hintergrund, dass wir diese Deklaration wichtiger machen als diese

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

    außerdem solltest du die beiden in der Reihenfolge mal ändern


    Code
    li#menu-item-311 span {background-image: url("http://rolfholunder.files.wordpress.com/2008/01/rolf-holunder-300.jpg");}
html body div.menu-lol-containter ul#menu-lol li span {position: absolute; left:100px; bottom: 0 display: none; width: 250px; height: 300px;}
html body div.menu-lol-containter ul#menu-lol  li:hover span {display: block;}

    Gruß
    Mo

    PS: Bin jetzt außer Haus...sollte das nicht klappen, kann ich mir erst frühestens morgen die Sache wieder ansehen.

    vielleicht bin ich auch einfach zu doof zum eintragen

    hab jetzt genau das hier stehen

    Code
    li#menu-item-311 span {background-image: url("http://rolfholunder.files.wordpress.com/2008/01/rolf-holunder-300.jpg");}
html body div.menu-lol-containter ul#menu-lol li span {position: absolute; left:100px; bottom: 0 display: none; width: 250px; height: 300px;}
html body div.menu-lol-containter ul#menu-lol  li:hover span {display: block;}


ul.menu li {position: relative;}


    und mehr nicht

    geht natürlich nix^^

    Moin,

    bei mir läuft es. dazu habe ich folgendes gemacht

    Das generierte SPAN-Element um die Klasse "myimg" ergänzt, damit es nicht mit den anderen vom sfmenu generierten SPANs kollidiert:

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

    Die CSS sehe so aus:

    Code
    ul#menu-lol li	{position: relative;}
ul#menu-lol li span.myimg	{ position: absolute; bottom: 40px; left: 0; width: 135px; height:135px; background-color: #fff; display: none; z-index: 1;}
ul#menu-lol li:hover span.myimg {display: block;}
#menu-item-311 span.myimg	{background-image: url(135x135px_wei%C3%9F_2-36x36.png);}


    Das Bild musst du natürlich noch anpassen.

    Gruß
    Mo

    Ok, es klappt einigermaßen. :)
    Besteht denn die Möglichkeit, aus Gründen der Übersichtlichkeit, das Popup-Bild immer an der gleichen Stelle aufpoppen zu lassen? Verstehst du was ich meine? Das z.b. in einer vorgefertigten Widgetbox immer das Bild aufpoppt. Wenn das keine große Arbeit wäre, wäre cool wenn du mir da helfen könntest.
    Mfg

    Wenn du die Zeile

    Code
    ul#menu-lol li	{position: relative;}

    Entfernst, kannst du das Bild an jeder Stelle auf der Seite erscheinen lassen in dem du die Werte für "bottom" und "left" (alternativ "top" und "right") in dieser Zeile anpasst:

    Code
    ul#menu-lol li span.myimg	{ position: absolute; bottom: 40px; left: 0; width: 135px; height:135px; background-color: #fff; display: none; z-index: 1;}

    Das ist zwar nicht genau das was du willst, kann aber genauso aussehen.

    Aller andere würde bedeuten, dass du dein Wissen bzgl. HTML, CSS, JS und PHP erheblich ausbauen müsstest.

    Gruß
    Mo

    Na das werd ich wohl in kurzer zeit nicht schaffen :(
    hab es fast hinbekommen, leider poppt das bild nun 2 mal auf. Einmal direkt am Link, ein anderes mal da wo ich es per bottom und left angabe hinbestellt habe.
    wie kann ich das noch ändern?

    ok jetzt ist es irgendwie verschwunden^^..
    muss mal im ie gucken ob das da noch irgendwie rumgeistert, wenn nicht bedanke ich mich recht herzlich :) hast mir wirklich sehr gut geholfen. Klasse Support :)

    Es hätte alles so toll sein können, leider gibt es aber wieder mal ein Problem.
    Stichwort: Bildschirmauflösung.
    Durch unterschiedliche Bildschirmauflösungen erscheint das Bild auf der Seite immer verrutscht, sodass es nicht mehr in dieser fiktiven Box an der Seite zu sehen ist, sondern manchmal im header oder quer über der navbar usw.
    wie stell ich das ab? wie bleibt das ding da fix.
    eventuell mit prozentangaben oder sowas?
    plz help

    obendrein erhalte ich keine oder eine komplett fehlerhafte anzeige der bilder wenn ich einen Untermenüpunkt mit einem bild belege und diesen anklicke.

    so sieht der quelltext aus

    Code
    li id="menu-item-313" class="menu-item menu-item-type-taxonomy"><a href="[URL="http://forum.wordpress-deutschland.org/view-source:http://www.shopalo.de/?cat=5"]http://www.shopalo.de/?cat=5[/URL]">Schuhe</a><span class="myimg">&nbsp;</span>
<ul class="sub-menu">
    <li id="menu-item-329" class="menu-item menu-item-type-taxonomy"><a href="[URL="http://forum.wordpress-deutschland.org/view-source:http://www.shopalo.de/?cat=18"]http://www.shopalo.de/?cat=18[/URL]">Ballerinas</a><span class="myimg">&nbsp;</span></li>
    <li id="menu-item-330" class="menu-item menu-item-type-taxonomy"><a href="[URL="http://forum.wordpress-deutschland.org/view-source:http://www.shopalo.de/?cat=21"]http://www.shopalo.de/?cat=21[/URL]">Businessschuhe</a><span class="myimg">&nbsp;</span></li>
    <li id="menu-item-383" class="menu-item menu-item-type-taxonomy"><a href="[URL="http://forum.wordpress-deutschland.org/view-source:http://www.shopalo.de/?cat=24"]http://www.shopalo.de/?cat=24[/URL]">Stiefel</a><span class="myimg">&nbsp;</span>
    <ul class="sub-menu">
        <li id="menu-item-342" class="menu-item menu-item-type-taxonomy"><a href="[URL="http://forum.wordpress-deutschland.org/view-source:http://www.shopalo.de/?cat=31"]http://www.shopalo.de/?cat=31[/URL]">Elegante Stiefel</a><span class="myimg">&nbsp;</span></li>

    Sobald ich eine bildanzeige für ein submenu (bsp. item 342) einstelle, erscheint entweder garkein bild oder es kommt nur fehlerhaft zum vorschein.

    mein code im css ist bislang

    Code
    ul#menu-lol li span.myimg    { position: absolute; bottom: 391px; right: 30px; width: 250px; height:200px; background-color: none; display: none; z-index: 1;}
ul#menu-lol li:hover span.myimg {display: block;}
#menu-item-311 span.myimg    {background-image: url(http://sbox.bgweiz.at/veronika.staudacher/katze.jpg);}

    änder ich das 311 (ein obermenü) in eine 383 (ein submenu) funzt nix mehr..help plz

    ich hoffe ihr könnt mir bei meinen problemen helfen
    - anzeige der bilder an einer fixen Stelle der seite, egal wie die auflösung ist
    - korrekte Anzeige der Bilder wenn ich einen Untermenüpunkt mit einem Hoverbild versehe

    Einmal editiert, zuletzt von walinjo (1. Juli 2010 um 11:21)

    So ich hab meinen Beitrag nochmal editiert.
    hab doch gestern etwas wirr geschrieben.

    Bitte Morris, helf mir nochmal in der Sache :-|

    Ich hab leider im Moment nur sehr wenig Zeit, drum ein Versuch in Kürze:

    Ändere Mal diese Zeile

    Code
    ul#menu-lol li:hover span.myimg {display: block;}


    in

    Code
    ul#menu-lol li a:hover ~ span.myimg {display: block;}

    Diese Zeile hier

    Code
    ul#menu-lol li span.myimg	{ position: fixed; bottom: 47.2%; right: 2.5%; width: 250px; height:200px; background-color: none; display: none; z-index: 1;}


    braucht nur einmal vorzukommen. Die überzähligen Zeilen kannst du aus deinen CSS löschen.

    Gruß
    Mo


    Ich hätte gern statt Textlinks, grafische Buttons mit Mouseover. Ich habe es wie hier beschrieben versucht, aber es tut sich nichts. Wo ist mein Denkfehler?
    Ich möchte in meinem Theme (Arras) einfach diese Navigationsleiste (siehe Bild) gegen einzelne grafische Buttons tauschen, aber wie mache ich das? Über Hilfe würde ich mich sehr freuen. Anbei auch noch meine verwendete .css http://rotuganda.lima-city.de/css.txt
    Herzlichen Dank schon mal!

    Lass mich das für dich Googlen =) !

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden