Wie Menü-Links auf gleiche Länge setzen?

[Klaus]

Hallo,

ich bin dabei mir ein horizontales Menü zu basteln, habe aber ein Problem damit, die Links auf gleiche Länge zu setzen. Ich möchte keine feste Länge (im Sinne von width:150px;) sondern dass sich der kürzeste am längsten orientiert.
Optisch sicherlich noch stark verbesserungsfähig.

Hier ist der vorläufige Code "in action" zu sehen:
http://jsfiddle.net/ft8N4/

Ansonsten auch nochmal hier:

  
#navigation {  
    background: #444444;  
    border-radius: 4px;  
}  
#navigation ul, #navigation li{ list-style:none; padding:0; margin:0; display:inline; }  
#navigation ul li{ float:left; position:relative; }  
#navigation ul li a{  
    display:block;  
    padding:8px 12px;  
    margin:1px;  
    font-size:18px;  
    white-space:nowrap;  
    border-radius:3px;  
	background:#3300ff;  
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #007EBD), color-stop(1, #00557F) );  
	background:-moz-linear-gradient( center top, #007EBD 5%, #00557F 100% );  
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007EBD', endColorstr='#00557F');  
	color:#ffff33;  
	text-decoration:none;  
}  
#navigation ul li a:hover{ background:#222;}  
#navigation ul ul{  
    position:absolute;  
    top:-99999px;  
    left:0;  
    opacity: 0;  
    -webkit-transition: opacity .5s ease-in-out;  
    -moz-transition: opacity .5s ease-in-out;  
    -o-transition: opacity .5s ease-in-out;  
    z-index:497;  
    background:#3300ff;  
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #007EBD), color-stop(1, #00557F) );  
	background:-moz-linear-gradient( center top, #007EBD 5%, #00557F 100% );  
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007EBD', endColorstr='#00557F');  
    padding: 2px;  
    border:1px solid #444;  
    border-top:none;  
    box-shadow:#111 0 3px 4px;  
    border-bottom-left-radius:6px;  
    border-bottom-right-radius:6px;  
}  
#navigation ul ul ul {  
    position:absolute;  
    top:-99999px;  
    left:100%;  
    opacity: 0;  
    -webkit-transition: opacity .5s ease-in-out;  
    -moz-transition: opacity .5s ease-in-out;  
    -o-transition: opacity .5s ease-in-out;  
    border-radius:6px;  
    border:1px solid #444;  
}  
#navigation ul li:hover>ul{ opacity: 1; position:absolute; top:99%; left:0; }  
#navigation ul ul li:hover>ul{  
	position:absolute;  
	top:0; left:100%; opacity: 1; z-index:497;  
	background:#3300ff;  
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #007EBD), color-stop(1, #00557F) );  
	background:-moz-linear-gradient( center top, #007EBD 5%, #00557F 100% );  
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007EBD', endColorstr='#00557F');  
}  

  
<div id="navigation">  
    <ul>  
        <li><a href="#">Home</a></li>  
        <li><a href="#">About</a></li>  
        <li><a href="#">Menu 1</a>  
            <ul>  
                <li><a href="#">sub menu one</a></li>  
                <li><a href="#">sub menu 2</a>  
                    <ul>  
                        <li><a href="#">sub sub menu 1</a></li>  
                        <li><a href="#">short</a></li>  
                    </ul>  
                </li>  
            </ul>  
        </li>  
        <li><a href="#">Contact</a></li>  
    </ul>  
</div>  

[Niklas Kamenisch]

Hi,

in CSS würde mir hier nur das feste angeben einfallen. Da du das nicht möchtest, wäre eventuell JS eine interessante lösung für dich.
Einfach alle Links durch gehen, die tatsächliche größe abfragen und den größten ermitteln. Danach auf alle Links den größten wert setzen.

Andere Möglichkeit wäre noch, wenn du mit php die Stringlänge ausliest und bei der längsten das mit nem pixel-faktor multiplizierst. (schau mal in fpdf, dort haben die das gut gelöst mit der schriftarten-zeichen-breite). Danach weißt du wie lang dein String ca ist (eventuell noch + paar pixel) und kannst diesen wert entsprechend zuweisen.

Ich würde hier z.b. classen in der art anlegen width_100, width_120, ...

Geht sicher auch noch eleganter ...

Gruß Niklas

[Gunnar Bittersmann]

@@Niklas Kamenisch:

nuqneH

Andere Möglichkeit wäre noch, wenn du mit php die Stringlänge ausliest

Was soll dir die Anzahl der Zeichen sagen?

und bei der längsten das mit nem pixel-faktor multiplizierst.

Es gibt keinen solchen.

Qapla'

[Niklas Kamenisch]

@@Niklas Kamenisch:

nuqneH

Andere Möglichkeit wäre noch, wenn du mit php die Stringlänge ausliest

Was soll dir die Anzahl der Zeichen sagen?

Anzahl Zeichen * Durchschnittlicher Platzbedarf = Länge des Feldes

und bei der längsten das mit nem pixel-faktor multiplizierst.

Es gibt keinen solchen.

Zur Erstellung von PDFs in PHP benötigst du häufig den Platzbedarf des Strings. Daraus hat sich ein bestimmter Faktor ergeben, bei dem man die Anzahl multiplizieren kann. Natürlich braucht ein i weniger als ein w, deswegen gibt es auch den Durchschnittswert. Wie gesagt, in fpdf kannst du das gerne nachschauen, dort wird das exakt so gehand habt um Zeilenumbrüche korrekt einfügen zu können!

Qapla'

[Gunnar Bittersmann]

@@Klaus:

nuqneH

ich bin dabei mir ein horizontales Menü zu basteln, habe aber ein Problem damit, die Links auf gleiche Länge zu setzen.

Meinst du die Links im horizontalen Hauptmenü oder die Links in den vertikalen Untermenüs? (Ja, bei denen sollte die ganze Breite clickbar sein.)

background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #007EBD), color-stop(1, #00557F) );

Die veraltete Webkit-Syntax solltest du getrost entsorgen können und die neue verwenden.

background:-moz-linear-gradient( center top, #007EBD 5%, #00557F 100% );

Und was ist mit -o-? Und mit dem präfixfreien Wert? (Achtung, geänderte Syntax! Firefox versteht auch schon 'to …' samt magic corners.)

top:-99999px;

Keine gute Idee, cf. Replacing the -9999px hack

Qapla'