Moin,
ich nun wieder, bisher konntet Ihr mir ja immer schnell einen guten Tipp geben, ich vermute aber mal, hier ist die Grenze von CSS3 dann einfach erreicht. Ziel ist ein Menue ohne JavaScript, ohne weitere Klassen im Menue, dass dazu noch dynamisch was die Breite und die Höhe der Inhalte ist. Die beiden letzten Punkte sind nun wirklich ein Problem, ich vermute mal, es ist nicht zu lösen, man müsste aus einem Container ausbrechen können, oder deren Höhe und Breite abfragen und dann nach innen für die Positionierung übernehmen.
Hier nun aber erstmal der aktuelle Quellcode, Farben, Margins und Paddings dienen der Visualisierung der einzelnen Container:
<!doctype html>
<html>
<head>
<title>CSS3 Menu without JavaScript</title>
<meta charset="utf-8">
<style type="text/css">
body {background: #eeeeee; font-size:12px;font-family: arial, verdana, sans-serif; }
.menue {background: #B2CCE6; margin-bottom: 1px; float: left; width: 100%; font-weight:bold;}
.menue a {background: #B2B2E6; padding:8px; margin: 2px; color: #333333; display:block; text-decoration:none;}
.menue ul {background: #CCB2E6; padding:2px; margin: 2px; list-style-type:none; float: left;}
.menue ul li {background: #E6B2E6; padding: 2px; margin: 2px; float:left;}
.menue ul li ul {background: #E6B2CC; padding: 1px; margin: 2px; position: absolute;} /*left:px; top:40px;*/
.menue ul li ul li {clear: both; }
.menue ul li ul li ul {background: #E6B2B2;margin-left: 2px; margin-top: -35px; left:175px; white-space:nowrap; }
.menue li > a:not(:last-child)::after {background: #E6CCB2; content: '▼'; margin: 0px 0px 0px 10px;}
.menue li li > a:not(:last-child)::after {background: #E6E6B2; content: '►'; margin: 0px 0px 0px 10px;}
</style>
</head>
<body>
<div class="menue">
<ul>
<li><a href="#">Punkt 1</a></li>
<li>
<a href="#">Punkt 2</a>
<ul>
<li><a href="#">Punkt 2.1 [variable width] </a></li>
<li><a href="#">Punkt 2.2</a></li>
<li>
<a href="#">Punkt 2.3</a>
<ul>
<li><a href="#">Punkt 2.3.1</a></li>
<li>
<a href="#">Punkt 2.3.2</a>
<ul>
<li><a href="#">Punkt 2.3.2.1</a></li>
<li><a href="#">Punkt 2.3.2.2</a></li>
<li><a href="#">Punkt 2.3.2.3</a></li>
</ul>
</li>
<li><a href="#">Punkt 2.3.3</a></li>
</ul>
</li>
<li><a href="#">Punkt 2.4</a></li>
</ul>
</li>
<li><a href="#">Punkt 3</a></li>
<li><a href="#">Punkt 4</a></li>
<li><a href="#">Punkt 5</a></li>
</ul>
</div>
<div style="background: #ddd; clear: both; height: 300px; padding: 5px;">CONTENT</div>
</body>
</html>
Probleme macht eben dieses Konstrukt:
.menue ul li ul li ul {background: #E6B2B2;margin-left: 2px; margin-top: -35px; left:175px; white-space:nowrap; }
Das „margin-top“ könnte man ja noch hinnehmen, aber „left:“ ist echt ätzend. Ich finde keinen Weg, das innere „ul“ automatisch neben dem äußerem „ul“ zu positionieren, man müsste irgendwie aus dem übergeordneten „ul“ ausbrechen.
Ein weiteres aber nur kleines Problem bereitet das hier:
.menue li li > a:not(:last-child)::after {background: #E6E6B2; content: '►'; margin: 0px 0px 0px 10px;}
Es wäre ja nun toll, wenn das „►“ nun immer rechts am Rand im Container positioniert wäre, da wo es im Grunde ja hingehört.
Einige werden nun vermutlich sagen - hat man auch schon -, was soll der Mumpitz, nimm jQuery und gut ist das. Klar geht es dann alles ohne Probleme, man kann sich überall hinhangeln, und jedes Attribut greifen und manipulieren. Es wäre doch aber geil, wenn es auch ohne JS geht. Auch übt es mit CSS sinnvoll umzugehen. Und ja ich weiß, es gibt schon ganz tolle Menues, die man als Plugin für jQuery einbinden und konfigurieren kann. Also vorab Danke, kenne ich alle, dazu brauche ich keinen Link. Ich sehe es auch als Denksportaufgabe, und nein ich habe nicht zu viel Zeit und langweile mich den ganzen Tag.
Was mich einwenig ärgert ist, ich schaue mir den http://acid3.acidtests.org/ an, also den Code und denke, geil - ist ja der Hammer. Und was es alles so im Web gibt, viele Seiten zeigen tolle Effekte und betonen, alles nur mit CSS3 und ohne JavaScript, hier nur ein
Beispiel: http://andrew-hoyer.com/andrewhoyer/experiments/walking/
Was bin ich doch begeisterst, aber so ein einfaches Menue, wie es mir vorschwebt, wie es überall ja im Web gebraucht wird, was wirklich einfach nur Standart wäre, das ist so in der Form ohne JavaScript offenbar einfach nicht mit CSS3 umzusetzen. Da werde ich wohl auf CSS6 und HTML8 warten müssen. Na nun genug geschimpft, eventuell bin ich auch nur zu „unwissend“ und einer von Euch zaubert hier eine geniale Lösung aus dem Hut.
Mit Gruß
Manuel