[JavaScript] UL/LI menü mit gleich breiten links erstellen

Dieses Thema im Forum "Webdesign" wurde erstellt von generals007, 26. Oktober 2010 .

  1. 26. Oktober 2010
    UL/LI menü mit gleich breiten links erstellen

    Hey, habe ein Problem, oder eher zwei. Versuche ein horizontales Menu zu machen, dass sich per javascript automatisch an den größten Link anpasst. Habe es bereits geschafft, dass die Funktion läuft wenn ich die float-property im Menu verwende aber möchte sie zentrieren und bekomme das nicht hin, also dacht ich mir ich verwende jetzt display:inline für die li-Items. Nun läuft aber die Funktion nicht mehr. Außerdem weiß ich nicht mehr wie ich es schaffe, dass ich die gesamte Box als Link definiere anstatt nur den Text darin - wenn ich block für die <a> tags verwende springt das Menu trotz inline-propery für die li-Items wieder in verschiedene Zeilen.

    Zwei Fragen also:
    1. Wie bekomme ich meine <a>-Items als Block zurück und behalte mein Menu?
    2. Wieso funktioniert die Funktion nicht mehr und was muss ich ändern um das zu bewerkstelligen?

    Hier der wichtige Code. html/css/javascript respektiv:
    Code:
    <head>
    <title>Generals007 Home Page</title>
    <link rel="stylesheet" type="text/css" href="mainPage.css" />
    <script type="text/javascript" src="generalScript.js"></script>
    <script type="text/javascript">
    function wholeFunction() {
     adjustItemsWidth();
    }
    </script>
    </head>
    
    <body onLoad="wholeFunction()"> 
    
    
    <!-- Top Menu Bar -->
    <div class="navBarHor" id="navBarHor"><ul class="navBarHor1">
    <li class="navBarHor1"><a href="http://www.xkcd.com" class="navBarHor1">Nummer eins</a></li>
    <li class="navBarHor1"><a href="http://www.xkcd.com" class="navBarHor1">XKCD</a></li>
    <li class="navBarHor1"><a href="http://www.xkcd.com" class="navBarHor1">Best Web Comic</a></li>
    </ul></div>
    Code:
    /* Horizontal Navigation Bar styles */
     /*Horizontal Navigation Bar Style 1*/
    div.navBarHor1 { }
    ul.navBarHor1 { list-style-type: none; margin: 0; padding: 0; }
    li.navBarHor1 { border-style: dotted; border-width: 1px; display: inline; padding: 8px; background-color: rgb(0,230,255); }
    a.navBarHor1 { text-align: center; text-transform: uppercase; text-decoration: none; }
    a.navBarHor1:hover, a.navBarHOr1:active {background-color: rgb(0,50,255); color: white; text-decoration: underline; }
    Code:
    function adjustItemsWidth() {
    listItems = document.getElementById("navBarHor").getElementsByTagName("ul")[0].getElementsByTagName("li");
    var maxBlockWidth = 0;
     for (i = 0;i < listItems.length;i++) {
     blockWidth = listItems[i].getElementsByTagName("a")[0].offsetWidth;
     if (blockWidth>maxBlockWidth) { 
     maxBlockWidth = blockWidth; 
     } 
     }
    
     for (i = 0;i < listItems.length;i++) {
     listItems[i].style.width = maxBlockWidth;
     } 
     /*function terminates, but does not resize the Items */
    }
    Habe bei javascript auch versucht die <a>-Width direkt zu verändern, mit "listItems.getElementsByTagName("a").style.width = maxBlockWidth;" ... funktioniert genauso wenig.

    BW eh klar für jede Hilfe, auch wenn meine noch nicht sonderlich viel gilt.

    Gruß,
    gen
     
  2. 26. Oktober 2010
    AW: Resizing Menu Items

    lern2debug

    firebug anschmeissen -> konsole aktivieren

    falls die leer bleibt versuch mit try-catch zu arbeiten.
     
  3. 26. Oktober 2010
    AW: Resizing Menu Items

    Habe bereits pseudo-Stoppoints in Form von document.write("Bis hier läufts"); eingefügt und das ding läuft bis zum Ende durch.

    Zeigt der Debugger den du geschrieben hast auch Variablenwerte an?

    Gruß,
    gen
     
  4. 26. Oktober 2010
    AW: Resizing Menu Items

    seh grad:

    li { [...] display:inline; [...]

    das verträgt sich mit "width" nicht.
     
  5. 26. Oktober 2010
    AW: Resizing Menu Items

    Wie löst man sowas dann? Kann ich den Links selber iwie eine Länge zuweisen anstatt den Listenelementen?

    Gruß,
    gen
     
  6. 26. Oktober 2010
    AW: Resizing Menu Items

    jein.

    du kannst es mal mit float:left anstatt mit display:inline versuchen. dazu musst du dem menü (ul) aber ne feste höhe geben

    btw: verschoben in webdesign
     
  7. 26. Oktober 2010
    AW: UL/LI menü mit gleich breiten links erstellen

    Wenn ich float:left verwende schaffe ich es nicht mehr den Container zu zentrieren, dh das Menü ist immer links oben statt mittig oben, weil die Float-Elemente aus dem Flow gerissen werden. Float war mein erster Ansatz, hab ich nicht hin bekommen. Das Skript hat darin aber funktioniert.

    Gruß,
    gen
     
  8. 27. Oktober 2010
    AW: UL/LI menü mit gleich breiten links erstellen

    Keiner einen Tipp? Mir egal ob ich das mit float oder inline löse, will es nur irgendwie hinbekommen und weiß nicht wie.

    Gruß,
    gen
     
  9. 28. Oktober 2010
    AW: UL/LI menü mit gleich breiten links erstellen

    Verwende die Idee von murdoc und dann packst du um ul noch ein div dem du dann per javascript eine feste breite gibst, die du wieder rum aus Link-Breite*Links berechnest. dem div weißt du text-align:center zu.
    nun noch dem ul das attribut margin: 0 auto zuweisen und gut ist..

    sollte eigentlich funktionieren.
     
  10. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.