Div bei hover an bestimmer Stelle anzeigen

alex130

Erfahrenes Mitglied
Hallo,

ich habe wieder mal ein Problem und zwar hab ich ein Menü und ich will, dass wenn man über einen Menüpunkt fährt,
rechts daneben ein Div eingeblendet wird, das ist kein Problem mit jQuery, allerdings weiß ich nicht, wie ich den Div genau neben dem Menüpunkt platzieren
kann, auch wenn ich z.B. 100 Menüpunkte habe.
Ein Beispiel hierfür findet ihr auf http://www.neckermann.de
links bei den Kategorien.
Ich hoffe irgendjemand kann mir helfen.

Danke
 
Hi,

du könntest dich hier eines sog. "Flyout-Menüs" bedienen, dessen Menü-Ebenen auf ineinander verschachtelten <ul>-Listen basieren, und jeweils in der zweiten Ebene die DIVs unterbringen.

HTML:
<ul><!-- 1. Menü-Ebene -->
    <li>Link 1
          <ul><!-- 2. Menü-Ebene -->
                  <li><div>DIV 1</div></li>
          </ul>
     </li>
     <li>Link 2
          <ul><!-- 2. Menü-Ebene -->
                  <li><div>DIV 2</div></li>
          </ul>
     </li>
     <!-- usw. -->
</ul>


mfg Maik
 
Danke für deine wieder mal sehr rasche Antwort.
Ich denke deine Möglichkeit ist auch um einiges besser und vor allem benutzerfreundlicher,
denn ich hätte das mit jQuery gelöst.
Ich werde mir das sofort ansehen und melde mich dann wieder.

Danke
 
Hallo,

danke das Menü ist ja noch viel besser, das ist genau das was ich brauche.
Ich hab das jetzt mal Schritt für Schritt zerlegt, es funkitoniert auch soweit, allerdings hab ich ein Problem
und zwar wird das SUbmenü beim mouseover links oben angezeigt, ich bekomms irgendwie nicht runter...

Danke

lg
 
Dann ist dir beim schrittweisen Zerlegen zwischendurch irgendwo ein oder mehrere Fehler unterlaufen, denn in der Menü-Vorlage werden die Submenüs nach rechts geöffnet.

Da fängst du mit deiner Arbeit besser nochmal von vorne an - und dabei immer schön die Augen auf halten, aus dem Code nichts zu entfernen, was für die Funktionalität des Menüs essentiell ist.

Du kannst aber auch gleich den vermutlich einfacheren Weg einschlagen, und deine DIVs in das bestehende Markup des Menüs einpflanzen.

mfg Maik
 
Hallo,

danke habs jetzt hinbekommen, lag an dem Div #flyList, das Submenü ist jetzt zwar genau neben dem Menü,
allerdings ist es immer ganz oben also beim ersten Menüpunkt, kannst du mir vielleicht nur sagen, wo das festgelegt wird,
also dass es immer neben dem aktuellen Menüpunkt ist.

Danke
 
Im Original werden auch alle Submenüs neben dem ersten (obersten) Hauptmenüpunkt eingeblendet.

Demnach fehlt in dem Stylesheet den <li>-Elementen der ersten Menü-Ebene eine Angabe zur relativen Position, damit sich die absoluten Positionsangaben des Submenüs in ihnen "relativ" verhalten, sich also auf dieses Element im Textfluß beziehen, und nicht auf die Boxengrenzen des Elternelements, hier der DIV-Container #flyList, der im CSS relativ positioniert ist.

Meine beiden eingangs empfohlenen Menü-Beispiele verhalten sich übrigens in diesem Punkt genau so, wie von dir gewünscht. Folglich hätte hier ein Blick in ihre Stylesheets zum Abgleich mit der von dir ausgewählten "Variante Nr.3" eigentlich weiterhelfen sollen.

mfg Maik
 
Zurück