Antworten zum Thema „CSS Ausklappmenü - Problem“

[lyzarr]

Hallo Allerseits !

Auf der Suche nach einem script-freien Ausklappmenü habe ich die Variante von Dr. Web entdeckt () welche in der horizontalen Variante (2D-Ausklappmenu) meiner Vorstellung schon sehr nahe kommt.

Allerdings benötige ich die Funktionalität, daß auch die Hauptpunkte anwählbar sein sollen. Denn im Endeffekt werden nicht alle Navi-Einträge Unterpunkte haben, wie beispielsweise "Home", "Kontakt" und "Impressum". Da soll nichts aufklappen, sondern die sollen direkt anwählbar sein.

Wenn ich nun einfach dem jeweiligen Hauptpunkt ein a href zuweise, bekommt er einen Doppelrahmen und zerballert das gesamte Design (Beispiel: ).

Kann mir Jemand unter die Arme greifen, inwiefern ich die css-Datei anpassen muß, damit zwar die derzeitige Darstellung gewahrt bleibt, aber eben optional bestimmte Hauptpunkte auch direkt als link fungieren (ohne Doppelrahmen).


Besten Dank schonmal und viele Grüße,



Lyzarr

 

[Neigruschka]

AW: CSS Ausklappmenü - Problem

hallo,
wenn du dem Hauptpunkt einfach ein "a href" zuweisst, übernimmt der die Eigenschaften von Links in Unterpunkten. Du sollst für die Links der Hauptpunkte eigene Eigenschaften schreiben (in CSS dann mit a.hauptpunkt{...} ). Und da muss du halt border und hintergrund verändern

 

[lyzarr]

AW: CSS Ausklappmenü - Problem

Hallo Neigruschka,

und vielen Dank für die schnelle Attwort. Das ist mir grundsätzlich auch klar, nur stocher ich da blind in der Suppe, und weiß einfach nicht, wie ich das bei diesem Beispiel hinbekomme. (Dort wurden ja keine neuen style-namen festgelegt, sondern einfach die standard-tags benutzt) Es wäre super wenn ich das etwas ausführlicher "vorgekaut" bekäme. :uhm:

Die CSS sieht derzeitig so aus.:

[FONT=Courier New]#menu { width: 100%; background: #eee; float: left; }[/FONT]
 
[FONT=Courier New]#menu ul { list-style: none; margin: 0; padding: 0; width: 80px; float: left; } [/FONT]
 
[FONT=Courier New]#menu a, #menu h2 [/FONT]
[FONT=Courier New] { font: bold 11px/16px arial, helvetica, sans-serif; [/FONT]
[FONT=Courier New] display: block; border-width: 1px; border-style: solid; [/FONT]
[FONT=Courier New] border-color: #ccc #888 #555 #bbb; [/FONT]
[FONT=Courier New] margin: 0; padding: 2px 3px; } [/FONT]
 
[FONT=Courier New]#menu h2 { color: #FF8635; background: #96D12C; text-transform: uppercase; } [/FONT]
 
[FONT=Courier New]#menu a { color: #000; background: #efefef; text-decoration: none; }[/FONT]
 
[FONT=Courier New]#menu a:hover { color: #a00; background: #fff; }[/FONT]
 
[FONT=Courier New]#menu li {position: relative;} [/FONT]
 
[FONT=Courier New]#menu ul ul { position: absolute; z-index: 500; }[/FONT]
 
[FONT=Courier New]#menu ul ul ul { position: absolute; top: 0; left: 100%; } [/FONT]
 
[FONT=Courier New]div#menu ul ul,[/FONT]
[FONT=Courier New]div#menu ul li:hover ul ul, [/FONT]
[FONT=Courier New]div#menu ul ul li:hover ul ul [/FONT]
[FONT=Courier New] {display: none;} [/FONT]
 
[FONT=Courier New]div#menu ul li:hover ul, [/FONT]
[FONT=Courier New]div#menu ul ul li:hover ul, [/FONT]
[FONT=Courier New]div#menu ul ul ul li:hover ul [/FONT]
[FONT=Courier New] {display: block;} [/FONT]

 

[sokie]

AW: CSS Ausklappmenü - Problem

Eigentlich gibt es doch nur zwei Möglichkeiten:
entweder du legst den einen link in den listenbereich unterhalb deines menüeintrags(dann ist er eben 'von oben' nicht anklickbar sondern wie die anderen nur über den Unterpunkt), oder du gibst diesen solisten eine eigene klasse, die du so formatierst, dass er Aussieht wie die anderen oberpunkte

 

[Neigruschka]

in deiner css-Datei muss du dann die Klasse für den Haupt-Link wie folgt definieren:

#menu a.haupt
{
padding:0px;
border:none;
background:#96d12c;
color:#ff8635;
}
#menu a.haupt:hover
{
color:#ffffff;
}

und in der html-Datei machst du bei den Haupt-Links

<a class="haupt" href="#">Titel 1</a>


Sorry - bin auf irgendeine Taste gekommen und der hat die antwort automatisch abgeschickt

 

[lyzarr]

AW: CSS Ausklappmenü - Problem

Tausend Dank für diese schnelle und vorallem "dummy-sichere" Lösungshilfe !
Das funktioniert ganz hervorragend und genau so wie ich es wollte. Darüberhinaus habe ich damit das Ganze sogar etwas besser durchschaut. Klasse !

Vielen Dank nochmal und viele Grüße,


Lyzarr