Horizontales Menüproblem - wenn gelöst Prima Menü für alle

Sturmgott · #1 (**permalink**) 20.04.2006, 17:00

Hallo allerseits,

dies ist mein erster Post in diesem Forum, und ich hoffe, es kann mir jemand helfen, da ich absolut ratlos bin.

Ich bin gerade dabei, ein horizontales, CSS-basiertes Aufklappmenü zu realisieren. [ Nebenbei: Die im IE 6 leider fehlende Unterstützung für :hover für beliebige HTML-Elemente wurde diesem per behaviour-htc-Datei "nachgereicht" (für Interessenten: http://www.xs4all.nl/~peterned/csshover.html). ]

Im HTML besteht das Menü einfach aus UL-Listen:

Code:

<ul>  [*]Men&uuml; 2 
    <ul>[*]Aktuelles[*]Veranstaltungen[*]Struktur[*]Zahlen,Daten&amp;Fakten[*]Profil[*]Anreise[*]Personensuche[/list]  [/list]

Die Seite kann hier live begutachtet werden:

http://www.codestylers.de/testdrive/

Die Navigation ist auch mittlerweile voll funktionsfähig, aber es gibt ein paar erhebliche, nicht tolerierbare Anzeigemängel, wie man an der angehängten Grafik sieht. IE und FF bilden "Treppen" unter unterscheidlichen Voraussetzungen.

Im Internet Explorer 6 (SP 2, neustes Update) wird jeder Untermenüpunkt nur so breit (inkl. seiner Hintergrundfarbe) gerendert, wie er minimal sein muß

Im Firefox 1.502 geschieht dasselbe, jedoch nur genau dann, wenn der permanent sichtbare, oberste Menüpunkt im Navbar breiter ist, als der breiteste Link im Aufklappmenü. Korrekt gerendert wird zum Beispiel der Menüteil 3 (siehe Site).

Im Opera 8.51 dagegen sieht alles so aus wie es soll: Aufklappende Menü-Quader.

Hier das Menü-CSS:

Code:

#menu{
float:left;
position:relative;
overflow:visible;
left:0px;
top:0px;
}

#menu a, #menu a.toplevellink {
font-size:0.90em;
display:block;
white-space:nowrap;
margin:0;
padding:0.4em;
height:1.3em;
}

#menu a.toplevellink {
letter-spacing:0.00em;
color:#fff;
background:#666;
font-weight:normal;
border:0;
padding-right:1.5em;
border-left:5px solid #666;
}

#menu a{
background:#666;
text-decoration:none;
padding-top:0.3em;
border-left:5px solid #999;
border-bottom:0px solid white;
height:1.1em;
}

#menu a, #menu a:visited{
color:#fff;
}

#menu a:visited{
color:#fff;
font-style:oblique;
}

#menu a:hover, #menu a.toplevellink:hover {
color:#fff;
background:#333;
border-left:5px solid #999;
}

#menu a:active, #menu a.toplevellink:active {
color:#f00;
background:#fff;
}

#menu a.toplevellink:visited {
font-style:normal;
}

#menu ul{
list-style:none;
margin:0;
padding:0;
float:left;
-width:1%;
}

#menu li{
position:relative;
}

#menu ul ul{
position:absolute;
z-index:6001;
top:auto;
display:none;
width:auto;
min-width:inherit;
font-size:0.8em;
overflow:visible;
-z-index:2;
-width:100%;
}

#menu ul ul a{ 
font-size:0.8em;
}

#menu ul ul ul{
top:0;
left:100%;
}

div#menu li:hover{
cursor:pointer;
z-index:6000;
}

div#menu li:hover ul ul,
div#menu li li:hover ul ul,
div#menu li li li:hover ul ul,
div#menu li li li li:hover ul ul
{display:none;}

#menu ul:hover li ul,
div#menu li:hover ul,
div#menu li li:hover ul,
div#menu li li li:hover ul,
div#menu li li li li:hover ul
{display:block;z-index:6000;overflow:visible;}

Wer hilft mit, dieses Problem in den Griff zu bekommen? Sollte dies mit Eurer Hilfe gelingen, stelle ich gerne einmal alles, was man für eine solche - in allen mir bekannten Browsern neueren Datums außer dem IE (dem man es bei aktiviertem Javascript beibringen kann) - ohne Javascript auskommende Ausklappnavi zusammen und der Allgemeinheit zur Verfügung! Danke im Voraus!

Frank Topel

Boris · #2 (**permalink**) 20.04.2006, 18:33

Wozu erfindest du das Rad neu? Solche Menüs wurden schon mehrfach realisiert und vorgestellt

andir · #3 (**permalink**) 20.04.2006, 18:55

Dieses Menü ist zwar nicht perfekt, aber hat seinen (Studien-)Zweck erfüllt:

www.obiterdictum.de/csstest/menuetest3.html

Dort sind einige Probleme umgangen worden.

Grüsse

Sturmgott · #4 (**permalink**) 21.04.2006, 02:35

...wie ihr Euch denken könnte, ist die oben genannte Seite nur zu Demonstrationszwecken für die Frage in diesem Forum erschaffen worden. In das bisherige CSS sind schon einige Arbeitsstunden geflossen, und abgesehen von den "Treppen" ist die Lösung ja auch nahezu ideal - das Beste, was ich bisher gesehen habe. Javascript darf übrigens in keinem Browser außer dem IE erforderlich sein - in allen anderen gängigen Browsern muß das fluppen mit HTML + CSS only.

Wer kann nun bei dem obigen Treppen-Effekt weiterhelfen?

Danke schonmal!

Frank Topel

Chattanooga · #5 (**permalink**) 21.04.2006, 02:59

Zitat:

wenn gelöst Prima Menü für alle
...
und abgesehen von den "Treppen" ist die Lösung ja auch nahezu ideal - das Beste, was ich bisher gesehen habe

entschuldige, wenn ich Dich vielleicht desillusioniere. Stu Nicholls stellt auf seiner site http://www.cssplay.co.uk Aufklappmenüs vor, die
- cross-browser-kompatibel sind und
- ohne Scriptlösungen auch in IE pre 7 bestens funktionieren.

Gruß
Chattanooga

andir · #6 (**permalink**) 21.04.2006, 10:28

Code:

#menu{
position:relative;
overflow:visible;
left:0px;
top:0px;
}

float: left habe ich rausgenommen und nun gehts, zumindest im FF.
IE habe ich nicht getestet, da ich das Css nicht online bearbeiten kann.

Hoffe das hilft Dir weiter.

grüsse

Sturmgott · #7 (**permalink**) 24.04.2006, 11:32

Vielen Dank für die Hilfe. Die Herausnahme von float:left löst das Problem im aktuellen Firefox, wirft aber im aktuellen Mozilla folgendes Problem auf:

Wenn die Menüeinträge kürzer sind als der oberste Haupt-Menüpunkt, zu dem sie gehören, so werden sie einfach abgeschnitten (siehe Screenshot).

Der Internet Explorer positioniert das Menü dann falsch, was aber durch den Hack

Code:

-float:left;

behebbar ist. Die "Treppendarstellung" bleibt natürlich weiterhin voll erhalten. Wer hat Ideen, woran es liegen kann?

Sturmgott · #8 (**permalink**) 25.04.2006, 11:05

Hab die Menüs von Stu Nicholls ebenfalls mal ausprobiert, aber die haben im Grunde die gleichen Probleme. In seinen Beispielmenüs sind die Menüpunkte alle von fixer Breite. In unseren Menüs werden aber auch sehr lange Worte vorkommen wie z. B. "Implementierungstechniken", die nicht umbrochen werden. Daher sind die Menüs von Stu Nicholls auch kein gangbarer Weg.

Hat denn niemand eine Idee?

Bin für jeden Tip dankbar.

Frank Topel

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Horizontales menü (ausrichten und Probs mit CSS3)	Paykoman	CSS	4	22.10.2014 13:30
Horizontales Menü kalibrieren	_SIE_	CSS	1	06.07.2013 13:09
Horizontales Menü centriert, Menühintergrund über ganze Seite	PowerNerd	CSS	19	05.05.2012 22:06
horizontales Menü in horizontales Pulldown-Menü ändern	Stephan1958	CSS	5	11.01.2012 14:37
Darstellungsproblem	flohpapa	CSS	3	16.12.2009 09:55