CSS Drop Down Menü

FreeEskimo77 · 25.09.2007, 11:06

Hallo an @lle

Habe ein für mich Riesiges Problem. Seit Wochen versuche ichs Selbst zu lösen nur gelingt es mich nicht. Deshalb wende ich mich an euch und hoffe auf Hilfe zu Lösung des Problems.

In einem Drop Down Menü, versuche ich ein Punkt rein zu bekommen das es mir ermöglicht ein weiteres Untermenü oder Unter Hover zu öffnen? Leider kann ich dies nicht genauer beschreiben, da ich kein Fachkundig bin.

Daher beschränke ich mich mal auf diesen Referenz CSS Code, nach dem Vorbild ich dass Drop Down Menü aufgebaut habe, um auf den Punkt zu kommen.

<style type="text/css">
.menu {display:none;}
#noniemenu {position:absolute;}
.holder {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}
.holder:hover {height:auto; cursor

ointer;color:#fff; background:#000;}
a.inner, a.inner:visited {display:block; width:89px; border-bottom:1px solid #000; text-decoration:none; color:#000; background:#eee;}
a.inner:hover {background:#add;}
</style>



</head>

<body>

<div class="menu">
<a class="outer" href="#">Home
</a>

<a class="outer" href="#">Pages
<table><tr><td>
<a class="inner" href="#">Home</a>
<a class="inner" href="#">Products</a>
<a class="inner" href="#">How To</a>
<a class="inner" href="#">#Store<a class="inner" href="#">#Store</a>
<a class="inner" href="#">#Links</a>
</td></tr></table>
</a>

<a class="outer" href="#">Photo Albums
<table><tr><td>
<a class="inner" href="#">House Album</a>
<a class="inner" href="#">A N Other Album</a>
<a class="inner" href="#">Wedding Album</a>
<a class="inner" href="#">2000 Series</a>
</td></tr></table>
</a>

<a class="outer" href="#">Blogs
<table><tr><td>
<a class="inner" href="#">Mostly</a>
</td></tr></table>
</a>
</div>

Wie bekomme ich es hin z.B. unter: Products, das ein weiteres Feld ausklappt um weitere Punkte aufzulisten? Um ein Live Beispiel zu zeigen: CRUSTA 10

In diesem Menü wird unter Flusskrebse ---> Artenbestimmung, geht ein weiteres Feld auf mit
---> Artenbestimmung ...
---> Artenbestimmung ...

So möchte ichs mit dem Drop Down Menü haben.
Leder kann ich den Code der Seite nichts Anfangen, deshalb habe ich mich auf denn obigen Eingeschossen! Ich hoffe gegen keine Forenregeln verstoßen zu haben, mir fällt gerade nichts ein wie ichs sonst umschreiben könnte!

Besten Danke fürs Lesen.

FreewareGuide · 26.09.2007, 08:05

Moin,

ich habe zwar verstanden, dass Du ein mehrstufiges Menü aufbauen möchtest, habe aber nicht begriffen, woher jetzt der ganze Code stammt, den Du da gepostet hast. Für eine solche recht grundlegende Funktionserweiterung kann es sinnvoller sein, ein passendes frei verfügbares Script zu suchen und im Aussehen anzupassen statt ein vorhandenes derart extrem "aufzubohren".

Bisher ist das von Dir eingefügte Menü rein CSS, ohne JavaScript. Ich habe grade die Befürchtung, dass ein mehrstufiges Menü nur mit CSS eher kompliziert wird (auch das von Dir genannte Beispiel ist rein JavaScript, nicht mal schönes und problematisch für Suchmaschinen). Wenn ich z.B. bei Dynamic Drive gucke, da sind alle CSS-Menüs mit zwei Ebenen (wobei das erste ausgeklappte bereits als zweite Ebene zählt), während die umfangreicheren ("Multiple Level Menus") alle auf JavaScript setzen. Da könntest Du Dir z.B. das Blm Multi-level Effect menu mal genauer angucken.

Grüße,
Thorsten

FreeEskimo77 · 26.09.2007, 10:28

Guten Morgen Thorsten,

"ich habe zwar verstanden, dass Du ein mehrstufiges Menü aufbauen möchtest, grundlegende Funktionserweiterung kann es sinnvoller sein, ein passendes frei verfügbares Script zu suchen und im Aussehen anzupassen statt ein vorhandenes derart extrem aufzubohren".

yippie!
Ich glaube, so als Nicht-Fachmann
Du könntest recht haben! Bohren tu ich gern

Denke auch das dies meiner Befürchtung nahe kommt das ganze umzubauen. Erst gestern habe ich mich mal soooo ganz kurz mit php auseinandergesetzt (Gästebuch) und werde heute erst im Laufe des Tages feststellen, ob das alles geklappt hat.

Und heute: JavaScript,
wobei ich alles umbauen und umfunktionieren muss, ächtz.

"Bisher ist das von Dir eingefügte Menü rein CSS, ohne JavaScript. Ich habe grade die Befürchtung, dass ein mehrstufiges Menü nur mit CSS eher kompliziert wird (auch das von Dir genannte Beispiel ist rein JavaScript, nicht mal schönes und problematisch für Suchmaschinen). Wenn ich z.B. bei Dynamic Drive gucke, da sind alle CSS-Menüs mit zwei Ebenen (wobei das erste ausgeklappte bereits als zweite Ebene zählt), während die umfangreicheren ("Multiple Level Menus") alle auf JavaScript setzen. Da könntest Du Dir z.B. das Blm Multi-level Effect menu mal genauer angucken."

Oh ich glaube das mit dem näher ankucken habe ich schon gemacht, danke Dir für die Hilfe! Dachte schon es meldet sich keiner. Das letzte Beispiel finde ich Klasse, muss es nur, wie Du sagtest anpassen.

Grüße Ralf

FreeEskimo77 · 26.09.2007, 18:57

Servus Thorsten
Hallo @lle

Jetzt habe ich was gefunden auf JavaScript Basis. link:

Nur habe ich mal wieder Probleme *fg*
Die meisten habe ich schon irgendwie lösen können.
Das heißt genauer an meine HP anpassen können.

Nur das Problemchen ist wie bringe ich dies Drop Down Menü nahe an mein Titelbild (<img src=) heran, dass es einen sauberen Abschluss hat und wie könnte ich das Menü etwas nach links verschieben? Das entzieht sich auch weiterhin meiner Kenntniss, alle versuche dies hinzubekommen, scheiterten!

Dazu muss ich sagen, ich arbeite heute zum ersten mal mit Java.

Für weitere Hilfen und Tipps bin dankbar.

Grüße Ralf

FreewareGuide · 26.09.2007, 19:52

Moin,

Zitat:

Zitat von FreeEskimo77

Jetzt habe ich was gefunden auf JavaScript Basis. link:

ob Du es Dir da nicht auch unnötig schwer machst, ich weiß es nicht. Dieses "Script" ist auf Typo3 abgestimmt, einem CMS, dass seine Webseiten inkl. Navigation generiert, Du holst Dir also wieder einen neuen Aspekt ins Boot, ein neues zu umschiffendes Problem.

Zitat:

Nur habe ich mal wieder Probleme *fg*
Die meisten habe ich schon irgendwie lösen können.
Das heißt genauer an meine HP anpassen können.

Nur das Problemchen ist wie bringe ich dies Drop Down Menü nahe an mein Titelbild (<img src=) heran, dass es einen sauberen Abschluss hat und wie könnte ich das Menü etwas nach links verschieben? Das entzieht sich auch weiterhin meiner Kenntniss, alle versuche dies hinzubekommen, scheiterten!

Dazu muss ich sagen, ich arbeite heute zum ersten mal mit Java.

Ich fürchte, es ist halt nicht immer so einfach. Zuerst mal JavaScript ist nicht Java, das ist ein wichtiger Unterschied. Java brauchst du bis hierher überhaupt nicht.

Du musst schon verstehen, was HTML und CSS ist, was JavaScript und wofür was gut ist.

JavaScript ist Programmierung, damit kannst Du komplizierte Änderungen an der Darstellung der Seite machen, Elemente erzeugen, positionieren, ein- und ausblenden. HTML und CSS stellen im Prinzip die Grundgestaltung der Seite dar, der Inhalt und die Struktur wird mit HTML beschrieben, CSS kann irgendwelchen Elementen eine Gestaltung geben, Farbe, Schriftart, Rahmen usw. Ganz einfache Interaktivität mit auch allein mit CSS, mit "hover" kann man auf die Maus über einen Element (z.B. Maus über Link) reagieren. Das ist in JavaScript mit dem "onMouseOver"-Attribut von Elementen gelöst.

Tja, das ist eine ungelenke Lehrstunde, die Dir nicht viel helfen wird, ich befürchte, es interessiert Dich nicht mal allzu sehr (weshalb hast du dieses neue Skript gesucht?). Es dient nur zur Begründung, dass das Problem, dass Du andeutest wohl in HTML/CSS zu lösen sein wird. viel mehr lässt sich ohne konkreten Code hier nicht sagen, ich befürchte, Du kommst um etwas grundsätzliches Lernen nicht herum. Hast Du 'nen Link zu Deiner Homepage?

Sorry,
Thorsten