Min-Width

von Fabian Tempel

Eine Mindestbreite eines Elements mit „min-width“ festlegen mittels CSS, so weit so unspannend, wenn man mal die Dinosaurier unter den Browsern wie Internet Explorer 6 o.ä. außer Acht lässt. Es handelt sich genauso wenig um irgendeine schicke CSS3-Geschichte, dennoch hatte ich einen „Aha-Moment“.

Worum gehts? Wir wollen ein Dropdown-Menü, oder auch gern als Suckerfish-Navigation bezeichnet, gestalten, in welchem wir die Untermenüpunkte an die Länge des Hauptmenüpunktes koppeln wollen. Das ganze sieht in etwa so aus:

Was braucht man dazu? Da es sich um eine Navigation handelt, sollte man es in ein nav Element packen. Eine Überschrift sollte an einer Navigation auch nicht fehlen, nicht zuletzt durch den HTML5-Outline-Algorithmus, der sonst ein „untitled nav“ in der Dokumentoutline einbezieht. Aber das ist ein anderes Thema. Wir benötigen noch eine ul mit ein paar li die die Navigationspunkte darstellen, innerhalb der li verschachteln wir die Untermenüpunkte widerum mit einer ul.

<nav>
    <h2>Navigationsbeispiel</h2>
    <ul>
        <li><a href="#">Navipunkt 1</a></li>
        <li><a href="#">variabler Navigationstext</a>
            <ul>
                <li><a href="#">Unterpunkt</a></li>
                <li><a href="#">Unterpunkt</a></li>
                <li><a href="#">Unterpunkt</a></li> 
            </ul>
        </li>
    </ul>
</nav>

Der Navigationspunkt mit unserem Aufklappmenü soll variabel breit sein, da dort sowohl kurze als auch lange Texte eingepflegt werden können.

Mit ein wenig CSS sieht das dann in etwa so aus:

http://jsfiddle.net/w9G4w

Das ist natürlich unschön, da die Unterpunkte einen längeren Text haben als Platz zur Verfügung steht. Was habe ich gemacht? Ich habe die verschachtelte Liste absolut positioniert und mit den Werten right: 0; und left: 0; an die Breite des Elternelements angelehnt. Das sieht soweit ganz gut aus, wenn man die Textlänge des Hauptmenüpunktes anpasst. Aber wir wollen es ja flexibel halten.

http://jsfiddle.net/cmZ8K/1

Als Workaround könnte man den Untermenüpunkten natürlich auch eine feste Breite zuweisen oder gar das right: 0; entfernen damit immer gewährleistet ist, dass die Punkte richtig dargestellt werden. Allerdings waren die Anforderungen, dass das Klappmenü stets die Breite des Elternelements behält.

An diesem Punkt kommt „min-width“ ins Spiel und der besagte „Aha-Moment“. Vergibt man zusätzlich zu den Positionswerten für links und rechts noch min-width für die Punkte, ist es egal wie lang der Text des Hauptmenüpunktes ist.

http://jsfiddle.net/qqVXU/1

Dieser Wert ist zwar nicht ganz flexibel, sprich er lehnt sich nicht direkt an die gegebene Textlänge der Unterpunkte an, erfüllt aber dennoch den Zweck, dass die Punkte stets gut dargestellt werden. Der gleiche „Trick“ lässt sich auch mit max-width bewerkstelligen.

Die nette Erkenntnis hierbei ist, dass min/max-width einen Einfluss auf die Darstellung haben, obwohl sich die Breite normalerweise an den Werten right: 0; und left: 0; orientieren sollte. Da es sich um grundlegende CSS-Eigenschaften handelt, ist diese „Technik“ bis hin zu Internet Explorer 7 problemlos einsetzbar.