Willkommen in der Webstatt Zum Webstatt Blog und Stories
Al3x0r Al3x0r am 27.05.06 15: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

netcup.de Warum gibt es hier Werbung?
BNightSpeeder am 27.05.06 15: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)

Al3x0r Al3x0r am 27.05.06 15:53

Quote
Original von BNightSpeeder
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.

der_nic der_nic am 27.05.06 16:11

Quote
Original von Al3x0r
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

milahu milahu am 27.05.06 16:15

Quote
Original von der_nic
brauchst ja nur das Menu horizontal zu machen...

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

Michael Michael am 27.05.06 16: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

der_nic der_nic am 27.05.06 16:30

Quote
Original von milahu
[quote]Original von der_nic
brauchst ja nur das Menu horizontal zu machen...

Das in o.g. Artikel ist schon horizontal... :tired:[/quote]
nei eben nicht... wenn ich ihn richtig verstehe meinte er ein Menu bei dem die Hauptmenupunkte "Home" "About" "Services" "Contact us" horizontal sind

Al3x0r Al3x0r am 27.05.06 16:51

Quote
Original von der_nic
[quote]Original von milahu
[quote]Original von der_nic
brauchst ja nur das Menu horizontal zu machen...

Das in o.g. Artikel ist schon horizontal... :tired:[/quote]
nei eben nicht... wenn ich ihn richtig verstehe meinte er ein Menu bei dem die Hauptmenupunkte "Home" "About" "Services" "Contact us" horizontal sind[/quote]

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 ?

Quote
Original von der_nic
[quote]Original von Al3x0r
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[/quote]

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

mfg Alex

milahu milahu am 27.05.06 18: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/ :)

der_nic der_nic am 27.05.06 18:53

Quote
Original von milahu
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:D oben ->google 2ter Eintrag:D

Al3x0r Al3x0r am 27.05.06 19:18

Quote
Original von milahu
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

der_nic der_nic am 27.05.06 21:49

dieses Thema hat mir einfach keine Ruhe gelassen:D 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:P)

Al3x0r Al3x0r am 30.05.06 14:25

Quote
Original von der_nic
dieses Thema hat mir einfach keine Ruhe gelassen:D 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:P)


Super geil. Danke schön, dass du es hier zur Verfügung stellst.

Neals am 30.05.06 17:07

Habe mich mal daran gemacht das Menu von der_nic 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.

der_nic der_nic am 01.06.06 22:30

du hast ne pm;)

Neals am 02.06.06 12:08

Jo hat geklappt... danke dir :]

Logan am 31.05.07 19:35

Hi

Als erstes: Super Drop-Down Menü! ;)

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, Logan

der_nic der_nic am 31.05.07 20: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>

Logan am 04.08.07 18: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, Logan

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt