Dropline Menu erstellen in CSS Vorlage vorhanden

moa75

Grünschnabel
Hallo zusammen,

ich möchte gerne ein DROPLINE MENU erstellen komplett in CSS ohne java!
Folgenden Code habe ich schon vorbereitet. Aber ich möchte gerne das wenn mann über den Link HAUPTMENU mit der Mouse drüber fährt sich ein submenu öffnet. Klickt man auf den Hauptmenu soll das submenu geöffnet bleiben. Soweit habe ich es schon realisiert, nur mein Problem ist, wie kann mann anstatt <p> auch links definieren ?

Folgender Code der Funktioniert wie es sein soll nur hald keine Links:

<style type="text/css">
#menu{
position:absolute;
top:49px;
left:320px;
width:100px;
}
#menu ul {display: block;}
#menu a p {display: none;}
#menu a:hover p, #menu a:focus p {display: block; }
</style>
<div id="menu">

<a href="#nogo">hauptmenu<p>untermenu als test aber einen link bekomme ich da net hin und horizontal auch net :-( </p></a></div>

Kann mir da jemand bitte weiter helfen? Ich möchte auch das die Links horizontal im submenu dann dargestellt werden. Nett wäre es auch wenn mann statt den Text auch bilder einfügen könnte.

gruß
moa
 
Hi,

Dropline- oder Dropdown-Menüs werden üblicherweise im HTML-Code mit einem Listenelement ausgezeichnet, so wie es mit dem Selektor "#menu ul" in deinem Stylesheet auch ansatzweise angegeben ist ;)

Code:
<div id="menu">
    <ul>
        <li><a href="#">...</a></li>
        ...
    </ul>
</div>

Siehe hierzu auch Son of Suckerfish Dropdowns, und weil du das Dropline-Menü ohne Javascript umsetzen möchtest, schau dir Stu Nicholls' Beispiele (Kategorie: "Menus - Multi-Level - Dropline") an, sofern du den IE6 berücksichtigen möchtest.

mfg Maik
 
hi ,

das mit

<li><a href="#">...</a></li>

habe ich schon getestet nur will dann das dropline nicht mehr !! die Stu Nicholls' Beispiele habe ich mir auch schon reingezogen aber dort bleibt das sub nicht offen wenn man drauf klickt nur bei mausover keine eine lösung?

gruß
moa
 
das mit

<li><a href="#">...</a></li>

habe ich schon getestet nur will dann das dropline nicht mehr !!
Dann muß das o.g. Stylesheet auch umgeschrieben werden.
CSS:
#menu ul li ul { display:none; }
#menu ul li:hover ul { display:block; }
die Stu Nicholls' Beispiele habe ich mir auch schon reingezogen aber dort bleibt das sub nicht offen wenn man drauf klickt nur bei mausover keine eine lösung?

Wenn die Submenüs nach dem Anklicken der Hauptmenüpunkte geöffnet bleiben sollen, wirst du nicht um den Einsatz von Javascript herumkommen:


mfg Maik
 
Hallo, geht das nicht wenn in dem submenu z.b. auf der startseite einfach nichts drin ist weiss oder transparent aber das submenu ansonsten permanent da ist?
Danke
 
Hallo, geht das nicht wenn in dem submenu z.b. auf der startseite einfach nichts drin ist weiss oder transparent aber das submenu ansonsten permanent da ist?
Danke
Möglich ist im Leben so ziemlich alles, nur welchen Sinn soll das ergeben? Ein Submenü, das leer ist :suspekt:

mfg Maik
 
...wäre doch eine Lösung oder? das mit der Lücke könnte evtl. mit Transparenz gelöst werden sehe ich aber auch nicht wirklich als Problem bei horizontaler/horizontaler Anordnung oder vertikal/vertikal.
hast du eine andre Lösung ohne Java für das Problem?
Danke
 
...wäre doch eine Lösung oder? das mit der Lücke könnte evtl. mit Transparenz gelöst werden sehe ich aber auch nicht wirklich als Problem bei horizontaler/horizontaler Anordnung oder vertikal/vertikal.
hast du eine andre Lösung ohne Java für das Problem?
Danke
Wenn sich dein Problem auf die Frage von moa75 bezieht, wie das Submenü offen gehalten werden kann, und du dies ohne Javascript umsetzen willst, hast du dir doch schon selbst die Lösung geliefert, nur dass das Submenü dann nicht leer sein darf :suspekt:

Übrigens haben Java und Javascript so viel gemeinsam, wie Eishockey und Feldhockey.

mfg Maik
 
Ja, Du hast ja recht ich meinte natürlich Javascript;- und Java und Java (Die Insel Java ist die kleinste der Sunda-Inseln in Indonesien mit etwa 90 Millionen
Einwohnern) :)

Hast oder weist Du ein Beispiel für das Menü?
Danke
 
Hast oder weist Du ein Beispiel für das Menü?
Nicht direkt.

Du kannst dich aber in Stu Nicholls' http://www.cssplay.co.uk/menus/ (-> Multi-Level - Dropline) umschauen.

Anschliessend modifizierst du das Menü so, dass beim Klick auf einen Hauptmenüpunkt nicht das Submenü geöffnet, sondern die entsprechende Seite geladen wird, in der das Submenü sichtbar ist - ähnlich wie beispielsweise Sliding doors with a drop line oder Professional centered sliding doors dropline menu...

mfg Maik
 
Zurück