Ein Submenü (Drop-down-Mechanismus), das nicht überragt - geht das?

Hallo interessierte Bastler, Designer und Tüfftler

Cr@@gle und ich stehen gerade vor einem designtechnischen "Disput" und der Haken ist, dass ich ohne Hilfe nicht weiterkomme. Dazu muss ich sagen, Cr@@gle hat mir nicht explizit verboten, dass ich öffentlich frage und um Ansatzhilfe ersuche, er sagte nur, wenn ich eine Lösung hätte, würde er sie realisieren (Cr@@gle, wenn du das liest, bleib sportlich fair, du hast es mir nicht untersagt ). Das heißt also, ich möchte gerne, dass mein Ansatz realisiert wird, aber ich weiß nicht, ob es geht und wie.

Am Besten schildere ich, was ich vorhabe bzw. mir vorstelle und falls sich jemand angesprochen fühlt, eine Idee hat, könnte er sich gerne zu Wort melden.

1. Ich habe ein Design, das von der Navigation her über einen Pull-down-Mechanismus realisiert wird. Sprich, man sieht die reine Navigation ("Home", "Forum"....) und bei einigen Inhalten ist ein Submenü integriert.

2. Dieses Submenü klappt nach unten hin auf, wenn ich es anklicke. Testweise wurden 3 Submenü-Inhalte eingesetzt.

3. Mein "Problem" ist, mir gefällt nicht, dass die Submenüs beim Aufklappen den Text, der darunter kommt, überlappen. Unterhalb des Submenüs steht die Box zur Begrüßung im Forum ("Wenn Sie alle Funktionen im Forum nutzen wollen, ....") und diese wird eben touchiert.

Mein Wunsch bzw. Ziel ist, dass ich die Subemenüs behalten möchte, es auch weiterhin ein Menü bleibt, aber beim Pull-down soll sich der Inhalt des Submenüs nicht über einen Text, eine Box usw. legen.

Meine Frage ist, lässt sich das technisch überhaupt realisieren?

Wenn das geht, wüsste jemand wie man es macht oder hätte zufälligerweise ein Tutorial zur Hand o.ä.? Jeder Ansatz ist hilfreich, vielleicht kann man es sich ja so "zusammenfrickeln".

---------------

Eine spontane Idee ins Blaue (bitte nicht knuffen, wenn ich wirr daherrede Könnte ich theoretisch den Text bzw. die Box unterhalb des Subemenüs transparent gestalten? Sprich, der Text ist fix einsehbar, solange ich nicht das Pull-down-Menü benutze. Klicke ich dieses aber an, es klappt auf, wird die Box bzw. der Text quasi "durchsichtig", wir haben keinen Überlappungseffekt mehr.

Wie klingt das, kann man das weiterverfolgen oder ist das haltlos und nicht machbar?

Soweit also die Situation und ich würde mich sehr über ein Gespräch, Hilfe und Austausch freuen.

Liebe Grüße schickt das grübelnde
Gabbid

Hallo jowina,

ich lache noch immer wegen Karotten-Gabbid und weiß nun, wie (m)ein Karneval- bzw. Osterhasen-Kostüm aussehen könnte.

Du schreibst, ich wäre nicht einwandfrei zu verstehen, das versuche ich nun einmal besser zu erklären. Offen gestanden, es ist gut, dass ich kein Kunde von Tom, Cr@@gle und Eragon bin, sie würden nach spätestens 1 Woche das Design hinwerfen, weil ich zig Ideen habe, es mir scheinbar nie rechtzumachen ist und selbst wenn es aussieht, als wäre ein Stil fertig, komme ich noch mit "kleineren Anmerkungen" an. "Schwierig" dürfte da noch eine milde Beschreibung sein, fürchte ich.

Voranschieben muss ich nun dies, dass das Design, um das es geht, nicht mehr von der Navigation her verändert werden kann und soll. Das heißt, der Austausch hin zu einer Sidebar ist nicht denkbar, weil es rein visuell nicht passen würde. Das Design hat viele Highlights, eines davon ist ein bestimmter Seitenrand, der durch eine Sidebar nicht mehr zur Geltung kommen und das gesamte Design auch zu weit nach rechts schieben würde. Das wiederum hätte starke Auswirkungen auf die Anordnung der anderen Inhalte (Userpanel, Footer-Einteilung usw.) und ich wage vorsichtig die Behauptung, es würde die Gesamtwirkung, die intendiert ist, ruinieren.

Grundsätzlich kann man ein Drop-Down-Menü doch so anlegen und umsetzen: http://www.ohne-css.gehts-gar.net/demo/0066m.html

Das sähe rein optisch auf einer Seite dann bspw. wie hier aus: http://mediatemple.net/

Und genau dieses Stück ist das, worum es mir geht.

Bei einem Drop-down-Effekt überlappt immer etwas, das ist mir klar, nur möchte ich es irgendwie bewerkstelligen, dass wir das umgehen oder den Effekt zumindest abmildern können. Der Grund dafür ist, dass mir (subjektiv gesprochen) nicht gefällt, dass der Header-Bereich durch diese Überlappung platztechnisch geschmälert bzw. überlagert wird. Ich möchte also gerne die klare Komtur der Elemente (Navigation - Header - Forenbereich ) beibehalten, so dass nichts überragt oder überlappt.

Würden wir den Effekt im gegenwärtigen Design belassen, würde das optisch so aussehen, wie ich es überspitzt anhand eines Beispiels des WoCa skizziert habe:

Das Submenü ragt also bereits in den Forenbereich hinein und je länger es wäre, desto mehr und desto prägnanter schiebt es sich auch in das Blickfeld.

Mein erster Ansatz war also die spontane Idee mit der Transparenz, in etwa dieser Richtung: http://www.august.com.au/

Gleichzeitig wirkt so ein Effekt aber nur, wenn der Hintergrund das farblich und grafisch erlaubt. Bei Grautönen, beige, weiß usw. sehe ich da kein Problem, bei dunklen und kräftigen Tönen dürfte der Effekt fast verpuffen (?).

Mein zweiter Gedanke heute Mittag war, was wäre, wenn man einfach die Umrandung des Submenüs so weit reduziert bzw. rein auf eine Komtur setzt (Abbildung nur mit Schlagschatten?), wir aber keine reale Tab-Form und eben nicht dieses en-block-artige Untermenü hätten? Sprich, via Klick öffnet sich das Untermenü wie gehabt, aber man sieht dann im ersten Moment lediglich die Inhalte (z.B. "Datenbank", "Webdisk"....) bzw. deren Letter?

Das würde grob skizziert so aussehen: (=> Alles rot-markierte würde getilgt, man sähe nur den Titel und blau-markiert der Platz für den Schlagschatten als Umrandung/Andeutung der Form)

Wenn sich dann also als Wirkung nur noch die Begriffe über den Foreninhalt legen, würde das vielleicht nicht mehr so stark das Überlappen unterstreichen ?

Ich hoffe, dass ich nun besser darlegen konnte, was ich möchte?

Aber ich bedanke mich natürlich schon einmal für deine Sichtweise bzw. die Rückmeldung, jowina. Jede Sicht hilft weiter, man hat "Arbeitsmaterial" zum Nachdenken übelt nicht mehr im stillen Kämmerlein. Was aber nicht heißt, dass ich die "Vorstellungen" für das Designen eintausche! Es hat schon seinen Grund, dass Tom und Cr@@gle designen, LibberY an Plugins bastelt und ich bei den "Vorstellungen" bin, würden wir das ändern....das will keiner erleben, das kann nur in Chaos und Tränen enden.

Gar keine schlechte Idee, dartgott, da kommen wir der Sache wirklich näher.

Mir gefällt die Version auf der Seite und ich würde sie so direkt für den Footer testen, da das auch gut aussehen könnte. Cr@@gle hat natürlich das letzte Wort, aber wenn er es testet und es gut aussieht, dann wird das genommen.

In der Navigation würde die Form so passen, wenn wir genau ein Submenü hätten, was machen wir aber, wenn wir 2- X Inhalte haben? Die Frage wäre also, wie weit man dann stapeln kann und ob man doch den Foreninhalt runtersetzen müsste.

Ok, lange Rede, kurzer Sinn, ich werde Cr@@gle direkt anstuppsen und erfragen, was er davon hält und ob er es einmal testen könnte. Ich melde mich dann hier wieder, wenn es Neues gibt und berichte.

Vielen Dank dir aber, dartgott, das war ein wirklich nützlicher und guter Tipp!

Ich glaube, ich habe einen neuen "Lieblingsspielplatz" gefunden, da_benzel, genial!

Cr@@gle wird vermutlich demnächst bereuen, dass ihr mir hier Tipps gegeben habt, denn ich habe schnell reingesehen und Ideen entdeckt, die man unbedingt ausprobieren muss. Was wiederum heißt, ich werde ihn ein wenig bedrängen und stalken, damit er es testet.

Der Ansatz mit dem transparenten Hintergrund ist schön, den hatte ich gestern auch kurz, aber der Haken ist, das wirkt bei einem Designhintergrund von z.B. schiefer, petrol, aubergine usw. nicht (bei einem Design wie "Debonair" kann das hinhauen, müsste man spaßeshalber einmal probieren). Mir spukt aber der Ansatz im Kopf, ob man so ein "schwebendes" Submenü hinbekommt, da werde ich aber noch etwas grübeln bzw. sicher auch bei der UiCloud-Seite schauen.

Unabhänig davon dachte ich gerade, ob man nicht auch einmal in einem Design den Tooltip beim Userprofil zweckentfremden http://ui-cloud.com/profile-tooltip/ und testen könnte, ob das in so einer kompletten Navigation gut aussehen würde. Sprich Tabs plus vage Anlehnung an eine Sprechblase, die sich wie der Tooltipp öffnet (runter dann in dem Fall).

Diese Idee erscheint mir noch nicht komplett fertig bzw. ausgetestet http://ui-cloud.com/navbar/, aber ich mag das, was es sein könnte. Das heißt, unter der Navigation würde man semi-transparent Sub-Inhalte sehen. Ok, man muss schauen, ob die fix zu sehen sind oder beim Mousover und Klick, wie es farblich harmoniert und wie man es positionell anbringt, aber hey, warum sollte es nicht gehen?

Dieses gefällt mir auch http://ui-cloud.com/collapsing-vertical-nav/, eventuell kann man da "ShapeShifter" vom Ansatz her nehmen und es in einem anderen Design auf eine weitere Ebene transportieren?

Ok, Stopp, ich plane hier schon wieder zig neue Designs und treibe vermutlich den Designern die Schweißperlen auf die Stirn.

dartgott, wenn du den Ansatz mit dem Footer probiert hast, es gut aussieht und du es einmal zeigen möchtest, nur her damit, ja?

Auf jeden Fall seid ihr wirklich super, vielen Dank und eine Runde plus für euch.

Irgendwann wird mir verboten hier zu schreiben, weil ich einfach zu viele Wünsche und Ideen habe, das alles aber keiner umsetzen kann.

In Sachen cls sieht es so aus, dass das neue Design von Cr@@gle, "MagiX", noch das bekannte Drop-down-Menü in der Navigation mitbringen wird. Einmal in größerer Form passend zum mainMenu, dann in kleinerer Variante im Userpanel für die dortigen Inhalte ("Einstellungen").

Nun ist es aber so, dass ein weiteres Design vom Konzept her schon steht und die Richtung klar ist, in die es gehen soll. Natürlich kann ich jetzt noch nicht aus dem Nähkästchen plaudern, aber ich denke, bei dem Stil wird man etwas Alternatives testen können, weil das Design selber weg von der klassischen Richtung gehen wird (vielleicht kommt Cr@@gle einmal in diesen Thread und wird ein wenig mehr dazu sagen, aber das überlasse ich ihm.).

Wenn du aber so direkt fragst, ich hätte Designideen für so eine Richtung:

a) Ausklappbare Sidebar:

b) "Inkludierte" Submenüs: (Im Grunde die Weiterführung von "Shapeshifter", ich möchte nur einzelne "Tab-Blöcke" haben und darin sind die Submenüs verstaut; entweder sie liegen darunter oder klappen nach rechts weg auf, das weiß ich noch nicht.)

c) Slider-Menü: ("Hinter" der Navigation ist das Submenü versteckt, es slidet dann hervor. Wie es geht, wie es aussieht usw., weiß ich aber noch nicht, es ist bisher nur eine grobe Idee.)

Diese 3 Ansätze hätte ich einmal, vielleicht lässt sich daraus etwas basteln....?