[SUCHE] CSS-Drop Down Menü | Webstatt.org Community

user-118

27.05.2006 13:38

Guten Tag,

Der Titel schreckt mit Sicherheit schon ab wo doch selber schreiben immer am Besten ist aber ich kriegs einfach nicht hin, deswegen suche ich nun ein Drop Down Menü in CSS ( ohen Javascript ).

Es geht darum, dass sich die Links im Menü auf drei Ebenen verteilen.



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

 Home   Link2   Link3   Link4    Link5

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

¦Sub 1 ¦_ _ _ _ _ _ 

¦Sub 2 ¦sub1 zu sub2¦    

        sub2 zu sub2¦

        sub3 zu sub2¦

Das bedeutet, dass ich eine horizontale Menü Leiste habe, bei der sich beim Hover ein weiteres Menü darunter öffnen, und dieses geöffnete Menü hat wieder Hover, durch die sich wiederrum ein untermenü zu dem jeweiligen menüpunkt per hover öffnen lässt.

Ich habe schon mindestens 3-4 Stunden im Internet gesucht aber das was ich will ( über mehrer Ebenen ) finde ich nur in vertikal.

Zudem brauche ich das ganze in HTML und nicht XHTML , da ich derzeit weder Zeit noch Lust habe nun komplett den ganzen kram nochmal durchzulesen.

(Habe es mit einem XHTML menü probiert, sah auch super aus, nur nachdem ich was dran gemacht habe war alles im Arsch. )

Bin für jeden Link zu einem solchen Menü in HTML(4.01) dankbar..

mfg Alex

Ich brauche keine Signatur

user-137

27.05.2006 13:41

Also das hat google gesagt: http://www.alistapart.com/articles/horizdropdowns
ich kenne mich mit menüs zusammen mit css net aus, aber vielleicht hilft es dir was. (hoffe das es der richtige Link ist)

user-118

27.05.2006 13:53

Original von user-137
ich kenne mich mit menüs zusammen mit css net aus, aber vielleicht hilft es dir was. (hoffe das es der richtige Link ist)

Wieso postest du dann hier ?
1. Ich brauche ein horizontales, das Menü im Link iist vertikal.
2. ich brauch eins, dass sich über 3 (sorry, verschrieben) Ebenen erstreckt, das im Link hat nur 2...

Fällt dir was auf ?

mfg Alex

edit:// Achja, ich habe auch schon probiert eins selber zu schreiben aber bin absolut dran gescheitert.

Ich brauche keine Signatur

user-162

27.05.2006 14:11

Original von user-118
2. ich brauch eins, dass sich über 2 Ebenen erstreckt, das im Link hat nur 2...

:rolleyes: da hast du ja 2...?!
mit dem Link soltest du doch etwas anfangen können... brauchst ja nur das Menu horizontal zu machen...

wen du dafür zu faul bist guck mal hier 2ter Eintrag http://www.google.ch/search?hl=de&q=horizontal+dropdown+menu&btnG=Google-Suche&meta=

mfg nic

Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine

user-255

27.05.2006 14:15

Original von user-162
brauchst ja nur das Menu horizontal zu machen...

Das in o.g. Artikel ist schon horizontal... :tired:

Those who can, do. Those who can't, teach. # Musik gehÃ¶rt dem Volk! # last.fm

user-253

27.05.2006 14:17

oder einfach hier: http://www.xs4all.nl/~peterned/examples/cssmenu.html

Allerdings sei angemerkt, dass ohne ein zusätzliches Script ein CSS-only Menu im IEX aufgrund der fehlenden :hover Eigenschaft für nicht Linkelemente nicht möglich ist

user-162

27.05.2006 14:30

Original von user-255

Original von user-162
brauchst ja nur das Menu horizontal zu machen...

Das in o.g. Artikel ist schon horizontal... :tired:

nei eben nicht... wenn ich ihn richtig verstehe meinte er ein Menu bei dem die Hauptmenupunkte "Home" "About" "Services" "Contact us" horizontal sind

Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine

user-118

27.05.2006 14:51

Original von user-162

Original von user-255

Original von user-162
brauchst ja nur das Menu horizontal zu machen...

Das in o.g. Artikel ist schon horizontal... :tired:

nei eben nicht... wenn ich ihn richtig verstehe meinte er ein Menu bei dem die Hauptmenupunkte "Home" "About" "Services" "Contact us" horizontal sind

Du hast mich richtig verstande, dachte das geht aus dem post oben so hervor.

Tschuldgigung wegen dem Rechtschreibfehler, es handelt sich natürlich um 3 Ebenen.

btw: Kann man sowas auch in PHP realisieren ? Müsste doch gehen oder ?

Original von user-162

Original von user-118
2. ich brauch eins, dass sich über 2 Ebenen erstreckt, das im Link hat nur 2...

:rolleyes: da hast du ja 2...?!
mit dem Link soltest du doch etwas anfangen können... brauchst ja nur das Menu horizontal zu machen...

wen du dafür zu faul bist guck mal hier 2ter Eintrag http://www.google.ch/search?hl=de&q=horizontal+dropdown+menu&btnG=Google-Suche&meta=

mfg nic

Manchmal kommt es vorher, dass man nicht zu faul für etwas ist, sondern es einfach nicht kann. zwinkern

mfg Alex

Ich brauche keine Signatur

user-255

27.05.2006 16:43

Ich dachte immer, horizontal is so wie der Horizont und so ... wayne.
Das hier dürfte ziemlich genau dem entsprechen, was du suchst: http://www.seoconsultants.com/css/menus/horizontal/ lächeln

Those who can, do. Those who can't, teach. # Musik gehÃ¶rt dem Volk! # last.fm

user-162

27.05.2006 16:53

Original von user-255
Ich dachte immer, horizontal is so wie der Horizont und so ... wayne.
Das hier dürfte ziemlich genau dem entsprechen, was du suchst: http://www.seoconsultants.com/css/menus/horizontal/

sag ich ja schon lange Fettes Grinsen

oben ->google 2ter Eintrag Fettes Grinsen

Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine

user-118

27.05.2006 17:18

Original von user-255
Ich dachte immer, horizontal is so wie der Horizont und so ... wayne.
Das hier dürfte ziemlich genau dem entsprechen, was du suchst: http://www.seoconsultants.com/css/menus/horizontal/

Hoffe mal , dass funktioniert auch noch mit einem anderen Doctype.

mfg Alex

Ich brauche keine Signatur

user-162

27.05.2006 19:49

dieses Thema hat mir einfach keine Ruhe gelassen Fettes Grinsen

also hab ich mal probiert so was selber (mit dem Artikel von oben als Grundlage) zu machen. Ist ganz ordendlich rausgekommen.
Die Strucktur besteht aus den Hauptmenupunkten, Unterpunkten und Unter-Unterpunkten kann aber bei Bedarf noch ausgebaut werden.

Falls es jemand will darf er es gerne ausbauen, editieren usw. damit es besser aussieht.

Wenn jemand einen Fehler oder Verbesserungsvorschlag findet bin ich froh um Hilfe.

Ps: Für IE funktioniert das nochnicht, wegen dem li:hover

mfg nic

//edit: habs nochmals überarbeitet funktioniert jetzt auch im IE (6). (Mir wurde gesagt ie7 macht immer noch zicken frech

)

Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine

user-118

30.05.2006 12:25

Original von user-162
dieses Thema hat mir einfach keine Ruhe gelassen also hab ich mal probiert so was selber (mit dem Artikel von oben als Grundlage) zu machen. Ist ganz ordendlich rausgekommen.
Die Strucktur besteht aus den Hauptmenupunkten, Unterpunkten und Unter-Unterpunkten kann aber bei Bedarf noch ausgebaut werden.

Falls es jemand will darf er es gerne ausbauen, editieren usw. damit es besser aussieht.

Wenn jemand einen Fehler oder Verbesserungsvorschlag findet bin ich froh um Hilfe.

Ps: Für IE funktioniert das nochnicht, wegen dem li:hover

mfg nic

//edit: habs nochmals überarbeitet funktioniert jetzt auch im IE (6). (Mir wurde gesagt ie7 macht immer noch zicken)

Super geil. user-158ke schön, dass du es hier zur Verfügung stellst.

Ich brauche keine Signatur

user-265

30.05.2006 15:07

Habe mich mal daran gemacht das Menu von user-162 mit php für eine Taekwond Webseite zu machen, weil ich das schon ziemlich geil fand das Menu.

Jedoch wie du schon sagtest, ziggt es im IE noch, könntest mir sagen was ich ändern muss?

Danke im Vorraus!

Im Anhang nochmal das dyn. Menü falls es jemand noch benutzen möchte.

user-162

01.06.2006 20:30

du hast ne pm zwinkern

Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine

user-265

02.06.2006 10:08

Jo hat geklappt... danke dir :]

user-231

31.05.2007 17:35

Hi

Als erstes: Super Drop-Down Menü! zwinkern

Ich habe jedoch noch ein paar Fragen:

Ich möchte ein etwas spezielles Dropdown erstellen... Horizontal und über mehrere Ebenen, alles kein Problem dank dem txt-file von nic.

Jedoch: Ich habe bereits ein Grundgerüst meiner Page. Und die horizontale Menüleite besteht aus einer Tabelle mit verschiedenen Bilder für die verschiedenen Menüpunkte. Wenn man über ein Menüpunkt "fährt" erscheint bisher nur die entsprechenden Rollover Bilder. (Bilder auf Grund des Textes und des Designs)

Nun sollte aber beim Rüberfahren über das Bild, das Rolloverbild und das Submenü erscheinen.

Wie kann ich das machen? Vor allem, dass das Dropdownmenü auch am richtigen Ort erscheint?

Danke für eure Hilfe

MfG, user-231

user-162

31.05.2007 18:25

Ich kenne jetzt deinen Code nicht aber ich nehme mal an dass deine Menuleiste etwa so aussehen wird.



<table>

....

<tr>

    <td><a>Menu 1</a></td>

    <td><a>Menu 2</a></td>

    ....

</tr>

....

</table>

Wenn ja kannst du ganz einfach die einzelnen Teile aus meinem Skript kopieren und in die einzelnen Zellen einfügen. Das ganze sieht dann etwa so aus.



<table>

....

<tr>

    <td><ul id="base1" class="base1">...</ul></td>

    <td><ul id="base2" class="base2">...</ul></td>

    ....

</tr>

....

</table>

Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine

user-231

04.08.2007 16:00

Hi

Hier mein Code:

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

<body onload="MM_preloadImages('pics/home_ov.jpg','pics/fachschaft_ov.jpg','pics/studium_ov.jpg','pics/life_ov.jpg','pics/links_ov.jpg'">

<body style="background-image:url(pics/bgtextur4.jpg)" onload="preloadImages();">

<table width="799" height="785" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

    <td height="150" colspan="2" align="right" valign="top" nowrap="nowrap"><img src="pics/header.jpg" width="800" height="150" border="0" usemap="#Map" /></td>

  </tr>

  <tr>

    <td width="256" height="599" rowspan="2" nowrap="nowrap" background="pics/submenue.jpg"><p>&nbsp;</p></td>

    <td width="543" height="30" nowrap="nowrap" background="pics/menueleiste.jpg"><table width="533" height="29" border="0" cellpadding="0" cellspacing="0">

      <tr>

        <td width="108" height="29"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','pics/home_ov.jpg',1)"><img src="pics/home_n.jpg" name="home" width="108" height="30" border="0" id="home" /></a></td>

        <td width="108"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('fachschaft','','pics/fachschaft_ov.jpg',1)"><img src="pics/fachschaft_n.jpg" name="fachschaft" width="108" height="30" border="0" id="fachschaft" /></a></td>

        <td width="108"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('studium','','pics/studium_ov.jpg',1)"><img src="pics/studium_n.jpg" name="studium" width="108" height="30" border="0" id="studium" /></a></td>

        <td width="108"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Life','','pics/life_ov.jpg',1)"><img src="pics/life_n.jpg" name="Life" width="108" height="30" border="0" id="Life" /></a></td>

        <td width="101"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('links','','pics/links_ov.jpg',1)"><img src="pics/links_n.jpg" name="links" width="100" height="30" border="0" id="links" /></a></td>

      </tr>

    </table></td>

  </tr>

  <tr>

    <td width="543" height="567" nowrap="nowrap" background="pics/infofenster.jpg">&nbsp;</td>

  </tr>

  <tr>

    <td height="37" valign="top">&nbsp;</td>

    <td align="left" valign="middle">&nbsp;</td>

  </tr>

</table>



<map name="Map" id="Map"><area shape="rect" coords="655,16,703,33" href="kontakt.html" target="_self" />

<area shape="rect" coords="709,16,776,33" href="impressum.html" target="_self" />

</map></body>

</html>

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

Wie gesagt, falls er unstrukturiert sein sollte, liegt das daran, dass ich den Code eigentlich nie angefasst habe. Ich arbeite bis jetzt eigentlich nur mit der Layout-Ansicht.

Könnte mir jemand anhand meines Codes zeigen wie ich eben ein solches Dropdown über mehrere Ebenen erstelle? Die Buttons sind Bilder, auf welchen jeweils ein Rollover drauf ist. Nun sollte isch der Rollover beim rüberfahren aktivieren und die nächste Ebene soll erscheinen.

Danke für eure Hilfe

MfG, user-231