Menupunkt länge ermitteln

  • Hallo zusammen,


    ich arbeite gerade an einer Seite und würde gerne am Ende des Menüpunkts (vertikales Menü) eine Linie einblenden.
    Beispiel:
    Team _____
    Partner _____
    Impressum _____


    Damit die Linie hübscher ist soll sie per CSS eingebunden werden. Nur mit Unterstrichen zu arbeiten ist nicht wirklich hübsch.


    Da alle Menüpunkte unterschiedlich lang sind muss sich der Abstand der Linie anpassen.


    Starten würde ich so:
    function menuzaehlen() {
    var zeichen = window.document.getElementByClassName('menupunkt').value.length;


    Danach muss der Wert length der ja in der Variablen "zeichen" abgelegt ist per css (margin-right: $zeichen) ausgegebn werden.
    document.getElementByClassName("linie").style.marginLeft = $zeichen + px;


    Ich hab leider kaum JS Erfahrung. Hab es zwar mal ansatzweise gelernt, aber zu selten selber Scripte geschrieben.
    Wär toll wenn mir der ein oder andere sagen könnte ob der Ansatz richtig ist und wie ich da weitermachen könnte.


    Liebe Grüße & Danke schon mal

  • Du kannst das auch ohne Javascript lösen. Zum Beispiel so:


    HTML
    <ul>
        <li><a href="#">Team</a></li>
        <li><a href="#">Partner</a></li>
        <li><a href="#">Impressum</a></li>
    </ul>



    Du würdest mit der Anzahl der Zeichen auf ein Problem stoßen. Bei proportionalen Schriftarten sind die einzelnen Zeichen unterschiedlich breit, daher kannst du damit nur rechnen wenn du a) eine nichtproportionale Schriftart verwendest und b) die Schriftgröße (die als Höhe angegeben wird) in die Breite umrechnest (was je nach Schriftart variieren kann. Text ist also kein guter Indikator für Breite.


    Mit Javascript könnte das so aussehen:


    HTML
    <ul id="menu">
        <li><a href="#">Team</a></li>
        <li><a href="#">Partner</a></li>
        <li><a href="#">Impressum</a></li>
    </ul>




    Das sorgt natürlich für etwas mehr Kontrolle.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!