001
21.07.2011, 03:56 Uhr
0xdeadbeef
Gott
(Operator)
|
Ich fände es einfacher, das Menu nicht in einer div aufzubauen, sondern als
| C++: |
<ul class="menu">
...
</ul>
|
...aber was soll's. Ich stelle mir das mit <div id="menu"> etwa so vor:
| Code: |
#menu ul {
padding: 0;
margin: 0;
border-top: 1px solid silver;
}
/*
* float: left; bewirkt, dass das Hauptmenü horizontal aufgebaut wird
*/
#menu > ul > li {
float: left;
border-left: none;
}
#menu > ul > li:first-child {
border-left: 1px solid silver;
}
/*
* Was immer danach kommt, muss dann links clearen.
*/
#menu + * {
clear: left;
}
/*
* Bedeutsam hier ist, dass die li-Elemente position: relative haben. Die in
* ihnen enthaltenen ul-Elemente haben position: absolute, und auf diese
* Weise gilt diesen ul-Elementen das li-Element als absoluter
* Referenzrahmen - es ersetzt quasi die Webseite als ganze in Bezug auf
* Längen- und Positionsangaben. Damit findet die absolute Positionierung des
* ul-Elements relativ zum übergeordneten li-Element statt. Ich weiß. Ich hab
* mir die Bezeichnungen nicht ausgedacht.
*/
#menu li {
position: relative;
list-style-type: none;
padding: 5px 7px;
margin: 0;
border: 1px solid silver;
border-top: none;
background-color: #FFFFE0;
}
#menu > ul > li > ul {
margin: 5px 0 0 -8px; /* padding und border ausgleichen */
}
#menu li:hover {
background-color: yellow;
}
#menu li > ul {
display: none;
}
/*
* Hier absolute Positionierung. Siehe Kommentar oben.
*/
#menu li:hover > ul {
display: block;
position: absolute;
}
/*
* Das hier betrifft Unter-Untermenüs. Das übergeordnete Untermenü ist (s.o.)
* für Längen- und Positionsangaben der Referenzrahmen. top: 0 und left: 100%
* bedeutet also "auf gleicher Höhe und rechts daneben".
*/
#menu ul ul ul {
top: 0;
left: 100%;
margin-top: -1px; /* border ausgleichen */
}
|
Näher komme ich jedenfalls auf die Schnelle nicht an das Verhalten der Webseite ran, auf die du verlinkst.
Etwas unglücklich ist, dass es in CSS keinen Selektor für Elemente gibt, die bestimmte Elemente als Kinder haben; wenn du also Einträge, die Untermenüs aufklappen, optisch anders darstellen willst, wirst du sie irgendwie kennzeichnen müssen.
In der Praxis ist es häufig so, dass Menüs dieser Form als Nodes einheitlich <a href="">-Elemente enthalten, während Untermenüs selbst keine Links sind. In so einem einfachen Fall kann man stumpf
| Code: |
#menu ul li {
font-weight: bold;
}
#menu a {
text-decoration: none;
font-style: normal;
font-weight: normal;
}
|
schreiben. Wenn es bei dir komplizierter ist, hilft eine Untermenü-Klasse wie folgt:
| Code: |
#menu ul ul li.submenu {
Styling für Untermenüs hier
}
|
...und HTML der Form
| Code: |
<div id="menu">
<ul>
<li>Menu1
<ul>
<li class="submenu">foo
<ul>
bar
</ul>
</li>
</ul>
</li>
</ul>
</div>
|
Aussehen soll das Ganze am Ende etwa so:
--
Einfachheit ist Voraussetzung für Zuverlässigkeit.
-- Edsger Wybe Dijkstra
Dieser Post wurde am 21.07.2011 um 05:07 Uhr von 0xdeadbeef editiert. |
