Untermenü in anderem Div anzeigen

[Michael]

Servus zusammen :)

Ich hoffe, ich kann euch mein Anliegen ausreichend verdeutlichen.

Es gibt Aufklappmenüs, rein mit CSS realisiert, wo sich beim Überfahren mit der Maus (oder bei einem Klick, je nachdem) ein Untermenü öffnet.

Ist es möglich, mit reinem CSS, dieses Untermenü - als Hovereffekt - in einem anderen Div, das sich an ganz anderer Stelle befindet, anzeigen zu lassen?

Zum Beispiel: Ich habe einen Header, in welchem sich ein Div-Bereich befindet. Unter dem Header ist eine horiozontale Navigation. Wenn man an dieser Stelle mit der Maus über einen Menüpunkt fährt, soll dann ein Untermenü im Div des Headers angezeigt werden.

Ich vermute fast, mit CSS funktioniert das nicht, wie ich das möchte. Javascript möchte ich, wenn irgend möglich, vermeiden.
Wie kann ich das realisieren? PHP? XHTML?

Wäre nett, wenn mir jemand einen Lösungsansatz gäbe und/oder einen Link, der mir auf dem Weg zu meinem Vorhaben hilft.

LG,
Michael

[suit]

Es gibt Aufklappmenüs, rein mit CSS realisiert, wo sich beim Überfahren mit der Maus (oder bei einem Klick, je nachdem) ein Untermenü öffnet.

Ich vermute fast, mit CSS funktioniert das nicht, wie ich das möchte. Javascript möchte ich, wenn irgend möglich, vermeiden.
Wie kann ich das realisieren? PHP? XHTML?

mit html und css, ggf etwas javascript

du solltest aber erstmal aus deiner navigation eine liste machen und ganz schnell wieder die <div />-idee vergessen

bedenke allerdings, dass derartige menüs nur schwer bedienbar sind

[Michael]

Servus

du solltest aber erstmal aus deiner navigation eine liste machen und ganz schnell wieder die <div />-idee vergessen

bedenke allerdings, dass derartige menüs nur schwer bedienbar sind

Wieso? Ich habe ja ein komplettes Div-layout.
Und natürlich sind meine Menüs mit Listen strukturiert und mit CSS gestaltet. Was anderes kommt heutzutage gar nicht mehr in Frage.

Schwer bedienbar wäre das gar nicht, oder nicht so, wie ich mir das zumindest vorstelle.

Ich versuche es nochmal zu umschreiben:

Also, ich habe einen Header.
Unter dem Header befindet sich eine horizontale Navigation, und darunter der Content, der jetzt nicht weiter wichtig ist.
Innerhalb des Headers, an einer bestimmten Position, sollen 2 dynamische Bereiche sein.
Im ersten wird ständig ein Untermenü des Menüpunktes gezeigt, der in der horizontalen Navi unten aktiv ist, oder durch Hover hervorgehoben.
Im 2ten Bereich ist eine kurze Erläuterung, worum sich die Category (aktiver oder gehooverter Menüpunkt unten) dreht.

Darauf genau möchte ich hinaus.

Das ganze wird simpel und intuitiv zu bedienen sein, außer jemand hat Javascript ausgeschaltet, was ich deswegen vermeiden möchte. Das ganze soll ja überall gleich gut (zumindest gleich) aussehen.

Wie ich nun zu meinem Ziel genau komme, weiß ich nicht. Also technisch. Was ich aber weiß, ist, wie die Optik, also das Gesamtdesign ausschauen soll. Aber darum dreht es sich wiederum hier nicht.

Danke auch für deine ANtwort.

LG, Micha

[suit]

Wieso? Ich habe ja ein komplettes Div-layout.

hier dachte ich erstmal "div-suppe, oh mein gott :D"

Und natürlich sind meine Menüs mit Listen strukturiert und mit CSS gestaltet. Was anderes kommt heutzutage gar nicht mehr in Frage.

und hier gabs dann die entwarnung ;)

warum positionierst du nicht einfach das <ul />-element, in welchem sich offenbar die zweite menüebene befindet (wenn du ein listenmenu gebaut hast, müsste das so sein), da hin wo du willst - von welchem <div />-element du sprichst, verstehe ich nicht

Schwer bedienbar wäre das gar nicht, oder nicht so, wie ich mir das zumindest vorstelle.

versuchmal mit krämpfen in beiden händen/armen oder anderen motorischen einschränkungen ein dropdown-menu zu bedinen (noch dazu, wenn das untermenu dann plötzlich ganz wo anders ist)  - nur weil du das kannst, heisst es noch lange nicht, dass es jeder kann

Ich versuche es nochmal zu umschreiben:

[...]
das hab ich schon verstanden

Was ich aber weiß, ist, wie die Optik, also das Gesamtdesign ausschauen soll.

wenn du weisst wies aussehen soll, warum tust dus dann nicht einfach

ul#menu li ul {
  display: none;
  position: absolute;
  top: 10px;
  right: 50px;
}

ul#menu li:hover ul {
  display: block;
}

wenn ich jetzt kenien krassen denkfehler habe, sollte das genau das sein, was du willst

ich kenne aber weder deine optik (was du meinst ist das visuelle erscheinungsbild deiner seite, optik ist ein teilbereich der physik) noch deinen eigentlich html- oder css-kram

[Michael]

*Augen verdreh*

Bin ich es jetzt gerade, der auf dem Schlauch steht? Ich bin jedenfalls leicht verwirrt.

Das Untermenü soll sich ja an einer ganz anderen Stelle öffnen, als die, wo die Hauptmenüpunkte stehen.

Ich habe ganz links z.B. einen Bereich, wo die ganzen Links (Hauptmenüpunkte) stehen. Einige oder alle dieser  Menüpunkte haben Untermenüs mit weiteren Links, die dann auf die verschiedenen Seiten verweisen.
Die Untermenüs aber, sollen in einem Bereich ganz rechts angezeigt werden. Nicht unter, über oder neben den zugehörigen Hauptmenüpunkten.
So als Beispiel.

Wenn ich das, fast genau wie mit einem normalen Menü, aus Listenpunkten mit CSS machen kann, dann verstehe ich es nicht.
Die einzelnen Untermüpunkte sollen ja (aktiv und bei hover) in "demselben Bereich" angezeigt werden.

Ich steig nicht ganz durch, sorry.
Über Normalo-Standard-CSS geht mein verständnis gerade nicht hinaus >.<

LG

[suit]

Über Normalo-Standard-CSS geht mein verständnis gerade nicht hinaus >.<

aber von der "position"-eigenschaft mit dem wert "absolute", sowie dem kartesischen koordinatensystem (x/y) mit den eigenschaften "left"/"right" und "top"/"bottom" hast du schon mal was gehört?

du kannst das ul-element deines menus quasi hinpositionieren wo du willst, du bist nicht daran gebunden, dass ein element genau da ist, wo es auch im quelltext zu finden ist

ein online-beispiel deines problems wäre vielleicht sehr hilfreich

[Michael]

Über Normalo-Standard-CSS geht mein verständnis gerade nicht hinaus >.<

aber von der "position"-eigenschaft mit dem wert "absolute", sowie dem kartesischen koordinatensystem (x/y) mit den eigenschaften "left"/"right" und "top"/"bottom" hast du schon mal was gehört?

du kannst das ul-element deines menus quasi hinpositionieren wo du willst, du bist nicht daran gebunden, dass ein element genau da ist, wo es auch im quelltext zu finden ist

ein online-beispiel deines problems wäre vielleicht sehr hilfreich

Achso?!
Das heißt, die Untermenüliste kann ich frei positionieren, wo ich will?
Die Aufklappmenüs funktionieren ja so, das sich Listen (Untermenüs) in Listen (Hauptmenüs) befinden.
Ich dachte, die Untermenüliste wäre somit an die Liste, in der sie sich befindet (Hauptmenüliste), gebunden.
Absolutes (und relatives) Positionieren kenne ich natürlich, aber ich benutzte es bisher nie, bzw. sah keine Notwendigkeit.

Ich muss das morgen mal ausprobieren, heute ist mir das etwas zu spät.
Ich lasse euch wissen,zu welchem ergebnis ich gekommen bin. Danke für alle Antworten nochmal.

Gruß, Micha

PS: Ein Online-Beispiel gibt es bisher nicht. Es gibt ja noch keine Seite, in die ich das Menü einbauen könnte. Nur die Idee für das Menü an sich. Ich habe soetwas bisher noch nicht auf einer Seite gesehen.

[Matze]

Hallo!

Achso?!
Das heißt, die Untermenüliste kann ich frei positionieren, wo ich will?
Die Aufklappmenüs funktionieren ja so, das sich Listen (Untermenüs) in Listen (Hauptmenüs) befinden.

Ja, du kannst mit position:absolute alles 'frei' positionieren.
Beachte aber, das der Hover-Effekt nicht mehr eintritt wenn das Untermenü zu weit entfernt ist und du den Bereich des Elements verlässt.
Die von suit angesprochenen :focus oder :activ könnten sich besser eignen.

Grüße, Matze

[Michael]

Ja, du kannst mit position:absolute alles 'frei' positionieren.
Beachte aber, das der Hover-Effekt nicht mehr eintritt wenn das Untermenü zu weit entfernt ist und du den Bereich des Elements verlässt.
Die von suit angesprochenen :focus oder :activ könnten sich besser eignen.

Grüße, Matze

Ahh, hm... *grübel*
Der Headerbereich wäre insgesamt 200px hoch. Darin würde sich ganz links, im Abstand von ca. 50 Pixeln zum Rand, der Bereich befinden, worin die Untermenüs angezeigt werden sollten.
Unter dem Header befände sich die horizontale Navi mit den Hauptmenüpunkten, mit einem vertikalen Abstand von ca. 30Pixeln zum Anzeigebereich der Untermenüpunkte.
Ich weiß, das klingt sehr Wischiwaschi. Ist ein wenig schwierig für mich, jmd etwas nahe zu bringen, das sich gedanklich noch nicht 100% geformt hat.

So habe ich dich nun verstanden:
Die Liste (Untermenüs) ind der Liste (Hauptmenüs) sind, wie ich Lust habe, verschiebbar, müssen aber, um den Hoovereffekt zu erhalten, sich noch überlappen?
Das könnte machbar sein. Mal sehen, vllt kann ich morgen schnell was basteln und euch vorzeigen, dann seht ihr, was ich meine.

LG,
Micha

[suit]

So habe ich dich nun verstanden:
Die Liste (Untermenüs) ind der Liste (Hauptmenüs) sind, wie ich Lust habe, verschiebbar, müssen aber, um den Hoovereffekt zu erhalten, sich noch überlappen?

nein, müssen sie nicht

du musst dir aber im klaren, sein dass hover nur stattfindet, wenn du dich innerhalb eines elements befindest - wenn du das zeug wirklich visuell voneinander trennen musst, kannst du zb mit fake-elementen arbeiten das ul ist dann halt größer als es eigentlich sein müsste und hat an entsprechender stelle einen transparenten hintergrund

beispiel

xxx = menupunkt

000 = untermenu
000

dann sieht deins so aus
           000
xxx   .    000

wenn du mit dem cursor jetzt an stelle "punkt" bist, hast du kein :hover oder mouseover mehr auf xxx oder 000, das menu verschwindet

du machst aber einfach folgendes

///////////000
xxx///.////000

deine unterliste ist größer als sie eigentlich ist und hat halt einen transparenten hintergrund

und genau das hat dann wieder bedienungsprobleme zur folge, wenn zb bedienbare elemente hinter dem transparenten hintergrund liegen und man nicht weiss, warum der mouseover/:hover nicht aufhört

besser ist meiner meinung nach die "klick -> seite läd neu und dann ist das untermenü offen"-variante

[Michael]

Ich verstehe, was du mir sagst.
Sicherlich bekomme ich nun eins auf den Deckel *g*
Aber eigentlich hatte ich das Ganze noch ein wenig anders im Kopf. Ich glaube, das hatte ich nicht ausgeführt.
Das Untermenü soll nicht(!!) nach dem Aufklappen bedienbar sein.
Ich hab das ganze mal ganz grob als Grafik dargestellt.

[suit]

Sicherlich bekomme ich nun eins auf den Deckel *g*
Aber eigentlich hatte ich das Ganze noch ein wenig anders im Kopf. Ich glaube, das hatte ich nicht ausgeführt.
Das Untermenü soll nicht(!!) nach dem Aufklappen bedienbar sein.

DAS ist aber jetzt wirklich unverständlich - entweder nur klicken ohne mouseover oder mit mouseover und bedienbar - so eine halbe lösung verwirrt wesentlich mehr

das was du vorhast ist zwar auch nicht wirklich ein problem, aber wie gesagt sehr ungünstig

entscheide dich für eine der beiden möglichenten (oder mouseover mit javascript und kick-variante ohne javascript)

etwa so wie auf http://derstandard.at/ - nur dass die seite ohne javascript garnicht funktioniert, was in deinem fall aber nicht das problem wäre, denn du machst das ja schlau ;)

[Michael]

Das Untermenü soll nicht(!!) nach dem Aufklappen bedienbar sein.
DAS ist aber jetzt wirklich unverständlich - entweder nur klicken ohne mouseover oder mit mouseover und bedienbar - so eine halbe lösung verwirrt wesentlich mehr

das was du vorhast ist zwar auch nicht wirklich ein problem, aber wie gesagt sehr ungünstig

entscheide dich für eine der beiden möglichenten (oder mouseover mit javascript und kick-variante ohne javascript)

etwa so wie auf http://derstandard.at/ - nur dass die seite ohne javascript garnicht funktioniert, was in deinem fall aber nicht das problem wäre, denn du machst das ja schlau ;)

Vielleicht ist das wirklich nicht ideal, aber irgendwie stylisch, wenn auch eher unübersichtlich, vor allem für Benutzer, die eingeschränkt sind in ihren Möglichkeiten.
Ich möchte das trotzdem so machen, wie ich beschrieb. Ich probier dann auch noch andere Varianten. Vllt fliegt meine Version am Ende wirklich raus, kann sein.
Aber gemacht haben möchte ich es mal, alleine schon der Erfahrung wegen.
Offenbar bin ich ja nicht ganz so firm in CSS wie ich gerne wäre ;)

LG :)

[suit]

Ich möchte das trotzdem so machen, wie ich beschrieb. Ich probier dann auch noch andere Varianten. Vllt fliegt meine Version am Ende wirklich raus, kann sein.

die css umsetzung ist in beiden fällen annähernd ident - lediglich einen unterschied beim initial-und :hover-zustand gibt es

wenn das fertig ist und auf klick = öffnen funktioniert, kannst du nachträglich per javascript auf die mouseover-variante erweitern mit extrem wenig code, damit ist es dann auch ohne javascript bedienbar

Aber gemacht haben möchte ich es mal, alleine schon der Erfahrung wegen.

das schadet auf keinen fall

[Michael]

Ahhhh *Augen verdreh*

Wenn die Untermenüs alle an der selben Stelle erscheinen sollen, muss ich die einzelnen Listen der Kategorien ja einzeln stylen, wegen der absoluten Positionierung.
Ich muss im CSS code dann einzelne Styles für jede einzelne Liste definieren.

Nun, für den Eigenbrauch stört mich das nicht... Oder weniger, aber für andere ist das eher unzumutbar, weil sich das ganze nicht sehr komfortabel erweitern ließe.

LG :)

[Matze]

Hallo Michael!

Wenn die Untermenüs alle an der selben Stelle erscheinen sollen, muss ich die einzelnen Listen der Kategorien ja einzeln stylen, wegen der absoluten Positionierung.
Ich muss im CSS code dann einzelne Styles für jede einzelne Liste definieren.

Du musst aber nur die Positionsangaben jedes mal neu schreiben und das dürfte vertretbar sein für jeden Menüpunkt eine id anzulegen.

Grüße, Matze

[suit]

Du musst aber nur die Positionsangaben jedes mal neu schreiben und das dürfte vertretbar sein für jeden Menüpunkt eine id anzulegen.

wieso man muss garnix oder sehe ich das jetzt falsch?

folgender baum
<ul>
 <li>
  <ul>
   <li>

ul { position: absolute; top: 100px; left: 0;}
ul ul { position: absolute; top: -100px; left: 0; }

damit ist die erste ebene 100px vom oberen rand entfernt und die zweite ebene klebt direkt am oberen rand - sache ist gegessen

[Matze]

Hallo suit!

wieso man muss garnix oder sehe ich das jetzt falsch?

Nö siehst du nicht. Bin nicht mehr ganz wach und leide noch ein bisschen unter einer Sommergrippe. Ich kann dir jetzt folgen. Sorry.

Grüße, Matze

[Michael]

wieso man muss garnix oder sehe ich das jetzt falsch?

folgender baum
<ul>
<li>
  <ul>
   <li>

ul { position: absolute; top: 100px; left: 0;}
ul ul { position: absolute; top: -100px; left: 0; }

damit ist die erste ebene 100px vom oberen rand entfernt und die zweite ebene klebt direkt am oberen rand - sache ist gegessen

Ehm... Der Bereich, in dem das Untermenü angezeigt wird, hat ja eine feste Position.
Der vertikale Abstand wäre für jede Kategorie gleich also, aber der horizontale wäre ja für jedes Untermenü anders, da die Kategorien horizontal ausgerichtet sind, und die Position der Untermenüs absolut zur Kategorie angegeben wird.

Oo
Gruß :)

[suit]

Ehm... Der Bereich, in dem das Untermenü angezeigt wird, hat ja eine feste Position.

ja die position ist durch seine x/y-koordinaten gegeben, deren ursprung bei position: absolute; durch den ursprungspunkt des nächsten vorfahrenelements mit einem position-wert abweichend von static bestimmt werden - für "ul ul" ist das im dem fall "ul"

Der vertikale Abstand wäre für jede Kategorie gleich also, aber der horizontale wäre ja für jedes Untermenü anders, da die Kategorien horizontal ausgerichtet sind, und die Position der Untermenüs absolut zur Kategorie angegeben wird.

das wäre das verhalten, wenn du auch die <li />-elemente mit einem position-wert abweichend von static ausrüstest

wenn ich jetzt nicht ganz banane bin, sollte obriger schnipsel funktionieren

[Matze]

Hallo!

Es gibt Aufklappmenüs, rein mit CSS realisiert, wo sich beim Überfahren mit der Maus (oder bei einem Klick, je nachdem) ein Untermenü öffnet.

Nein. Beim Hover ja, bei Klick nicht. Darauf kann CSS (noch) nicht reagieren.

Ist es möglich, mit reinem CSS, dieses Untermenü - als Hovereffekt - in einem anderen Div, das sich an ganz anderer Stelle befindet, anzeigen zu lassen?

Nein.

Ich vermute fast, mit CSS funktioniert das nicht, wie ich das möchte. Javascript möchte ich, wenn irgend möglich, vermeiden.
Wie kann ich das realisieren? PHP? XHTML?

Warum nicht mit JavaScript? XHTML fällt aus. PHP wäre eine Möglichkeit wenn du kein Problem damit hast, dass die Seite immer wieder komplett geladen werden muss.

Wäre nett, wenn mir jemand einen Lösungsansatz gäbe und/oder einen Link, der mir auf dem Weg zu meinem Vorhaben hilft.

Mit JavaScript liegst du gar nicht so falsch. Versuch es damit.

Grüße, Matze

[suit]

Nein. Beim Hover ja, bei Klick nicht. Darauf kann CSS (noch) nicht reagieren.

nicht (ganz) richtig - :active und :focus sind für solche dinge (menus mit 2 ebenen die beim anklicken aufgehen und beim wegklicken verschweinden) sehr gut geeignet

[Michael]

Nein. Beim Hover ja, bei Klick nicht. Darauf kann CSS (noch) nicht reagieren.

Ja, soviel ist mir klar. Ich meinte auch den Hovereffekt.

Nein.

Doof, schade.

Warum nicht mit JavaScript? XHTML fällt aus. PHP wäre eine Möglichkeit wenn du kein Problem damit hast, dass die Seite immer wieder komplett geladen werden muss.

Naja... Thema: Sauberes Arbeiten.
Viele verachten es regelrecht, Javascript auf Seiten zu benutzen, weil einige das eben ausgeschaltet haben und Gott weiß welchen anderen Gründen. Ich selbst habe Javascript auch selbst deaktiviert meistens. Also, Generell Scripte, und schalte das für einige Seiten dann temporär oder dauerhaft an. (No-Script für FF)
Das mit Javascript zu realisieren wäre nicht gerade schwer, aber ich hatte gehofft das es einen anderen Weg gibt.

Mit JavaScript liegst du gar nicht so falsch. Versuch es damit.

Wie gesagt, wäre das mit Javascript nicht so schwer. Mal sehen, ob ich das ganze dann so habe wie ich gerne möchte.

Grüße, Matze

Vielen Dank für deine Antwort.
Gruß, Micha

[Matze]

Hallo!

Naja... Thema: Sauberes Arbeiten.
Viele verachten es regelrecht, Javascript auf Seiten zu benutzen, weil einige das eben ausgeschaltet haben und Gott weiß welchen anderen Gründen. Ich selbst habe Javascript auch selbst deaktiviert meistens. Also, Generell Scripte, und schalte das für einige Seiten dann temporär oder dauerhaft an. (No-Script für FF)

Das wird überschätzt ;)
Sorg einfach dafür, dass es zusätzlich auch ohne JavaScript funktioniert.

Das mit Javascript zu realisieren wäre nicht gerade schwer, aber ich hatte gehofft das es einen anderen Weg gibt.

Wie gesagt, PHP wäre eine andere Möglichkeit. In dem Fall schießt du dann aber meiner Meinung nach mit Kanonen auf Spatzen.

Grüße, Matze

[Beat]

Viele verachten es regelrecht, Javascript auf Seiten zu benutzen, weil einige das eben ausgeschaltet haben und Gott weiß welchen anderen Gründen. Ich selbst habe Javascript auch selbst deaktiviert meistens. Also, Generell Scripte, und schalte das für einige Seiten dann temporär oder dauerhaft an. (No-Script für FF)
Das wird überschätzt

Und was hilft ein Self-Zitat zum Problem?
Bei mir ist JS zu 90% deaktiviert.

mfg Beat

[Matze]

Hallo!

Das wird überschätzt

Und was hilft ein Self-Zitat zum Problem?

Leider hast du das abschließende ";)" der Zeile nicht mitzitiert.
Daran kannst du erkennen, dass es nicht ganz ernst gemeint war.
Allerdings lag Gernot Back damals gar nicht so verkehrt. Das sollte man nicht ignorieren.

Auch den Satz

Sorg einfach dafür, dass es zusätzlich auch ohne JavaScript funktioniert.

hast du nicht beachtet.

Bei mir ist JS zu 90% deaktiviert.

Und bei mir zu 90% aktiviert. Was sagt das jetzt?

Grüße, Matze

[Beat]

Ist es möglich, mit reinem CSS, dieses Untermenü - als Hovereffekt - in einem anderen Div, das sich an ganz anderer Stelle befindet, anzeigen zu lassen?

visuell anderer Ort: ja
logisch (html) anderer Zweig: nein

Zum Beispiel: Ich habe einen Header, in welchem sich ein Div-Bereich befindet. Unter dem Header ist eine horiozontale Navigation. Wenn man an dieser Stelle mit der Maus über einen Menüpunkt fährt, soll dann ein Untermenü im Div des Headers angezeigt werden.

psosition absoult macht es möglich, visuell.
Der popup Inhalt muss aber logisch ein Child von der Navigation sein.

Ich vermute fast, mit CSS funktioniert das nicht, wie ich das möchte.

html Logik:
Solange :target nicht flächendeckend unterstützt wird, nein.

mfg Beat