DropDown Menü in 2 Richtungen möglich?

[AkiRaki]

Hallo liebe Community,

versuche seit einer Stunde ein spezielles DropDown Menü zu gestalten aber ohne Erfolg, nicht mal mit Suche im Netz und da ich öfters auf diese Seite gestoßen bin, wollte ich euch direkt mal um Rat bitten

Folgende Idee:
Ich möchte ein DropDown Menü Basteln welches nur 1 Button hat, der allerdings Rund sein soll(jedoch erst mal Nebensache). Die Idee war das das DropDown Fenster nicht in einer Richtung wie nach unten oder nach rechts sich öffnet, sondern 4 Felder wobei 2 nebeneinander nach links und 2 nebeneinander nach rechts sich öffnen... am besten wäre wenn sie dabei noch ein wenig Abstand zum Nachbarn haben.

Könnte so aussehen:
[erstes Menü] [zweites Menü] (Menü-Button) [drittes Menü] [viertes Menü]

Jetzt könnte man das ganze noch anderes realisieren, jedoch gefällt mir an der Idee die Dynamik das in der Mitte meiner WebSite nur ein kleiner Button steht, wo das Menü in 2 Richtungen aufklappt.

Ich selber habe schon ein paar WebSeiten mit css gestaltet und habe dieses Problem nirgends finden können, jedoch sitze ich auch heute schon 7h an dem Projekt und wäre für jede Hilfe sehr dankbar und falls es nicht in den Fortgeschrittenen-Bereich gehört, tut es mir leid. Bin seit 20min angemeldet.

Danke für die Hilfe,
AkiRaki

[justinator]

Hallo AkiRaki,

ich finde deine Idee und deinen Ansatz sehr interessant. Da steckt bestimmt mit der richtigen grafischen Umsetzung eine Menge Potential dahinter!!! Ich selbst bin leider noch ein Anfänger und kann dir bei deinem Problem nicht wirklich weiterhelfen.

Aber die Idee ist sehr nice! Mach weiter so!

Grüße Justinator

[Azra]

Ich hab gebastelt. So könnts gehen:
HTML

Code: Alles auswählen

      <ul id="navigation" class="clearfix">
         <li><a href="#" title="">Navipunkt 1</a></li>
         <li><a href="#" title="">Navipunkt 2</a></li>
         <li><a href="#" title="">Navipunkt 3</a>
            <ul>
               <li><a href="#" title="">Navipunkt 3.1</a></li>
               <li><a href="#" title="">Navipunkt 3.2</a></li>
               <li><a href="#" title="">Navipunkt 3.3</a>
                  <ul>
                     <li><a href="#" title="">Navipunkt 3.3.1</a></li>
                     <li><a href="#" title="">Navipunkt 3.3.2</a></li>
                     <li class="spacing"><a href="#" title="">Navipunkt 3.3.3</a></li>
                     <li><a href="#" title="">Navipunkt 3.3.4</a></li>
                  </ul>
               </li>
               <li><a href="#" title="">Navipunkt 3.4</a></li>
               <li><a href="#" title="">Navipunkt 3.5</a></li>
            </ul>
         </li>
         <li><a href="#" title="">Navipunkt 4</a></li>
         <li><a href="#" title="">Navipunkt 5</a></li>
         <li><a href="#" title="">Navipunkt 6</a></li>
      </ul>


CSS

Code: Alles auswählen

/* 1. Ebene (horizontal) */
#navigation li{text-align:center;position:relative;width:100px;height:20px;padding:5px 0;margin:0 1px 0 0;background:lightcyan;float:left;}#navigation li:hover ul{visibility:visible;}

/* 2. Ebene (vertikal) */
#navigation ul{visibility:hidden;position:absolute;top:30px;height:0;}#navigation li ul li{text-align:left;padding-left:13px;}

/* 3. Ebene (horizontal) */
#navigation ul ul{visibility:hidden !important;position:absolute;top:0px;left:-214px;width:700px;height:0;}#navigation li ul li ul li{text-align:center;float:left;width:100px;padding:5px 3px;margin:0 1px 0 0;background:cyan;}#navigation ul li:hover ul{visibility:visible !important;}

#navigation li a{display:block;width:100px;height:30px;}#navigation li a:hover{color:black;}.spacing{margin-left:114px !important;}