jquery - CSSを使用した流体幅メニュー

Question

水平方向のCSSメニューがあります。問題は、ユーザーが5つを超えるメニュー項目を作成すると、liタブが新しい行に移動することです。私はこれが起こらないようにしたい。

どうすれば流動的な幅にすることができますか？ユーザーが3つのメニュー項目を作成するだけで、各タブの幅が広がり、全幅に収まるようにするにはどうすればよいですか？

HTML：

<div class="container">
 <div id="new-menu-lower">
  <ul class="menuul">
   <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>

  </ul>
 </div>
</div>

CSS：

div.container
{
    clear: both;
    margin: 10px auto 0;
    width:960px;
    border:1px solid red;
    height:700px;
}

div#new-menu-lower {
    border-radius: 3px 3px 3px 3px;
    border-top: 0 solid lightgrey;
    margin: 0 8px 10px;
}

#new-menu-lower ul {
    border: 1px solid white;
    display: block;
    height: 27px;
}

#new-menu-lower ul li:first-child {
    border-left: 0 solid lightgrey !important;
    border-radius: 7px 0 0 7px;
}

#new-menu-lower ul li {
    background-image: url("http://i45.tinypic.com/16if95z.png");
    background-repeat: repeat;
    border-right: 0 solid lightgrey !important;
    float: left;
    height: 27px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    width: 168px;
}

JSFIDDLEの例： http ：//jsfiddle.net/rM9MW/

score 1 · Accepted Answer

あなたはJavaScriptをjeedしないでください！

デモ jsBin

CSS で次の行を変更するだけです。

#new-menu-lower ul {

/*display: block; //////////////////REMOVE//////////////////// */
display:table; /*  //////////////////ADD//////////////////// */

と：

#new-menu-lower ul li {

/* float: left;      //////////////////REMOVE//////////////////// */
display:table-cell; /* //////////////////ADD//////////////////// */

score 1 · Accepted Answer

このような？

var mw = $('.menuul').width();
var ll = $('.menuli').length;
var c = mw / ll;
$('.menuli').css('width', c)

http://jsfiddle.net/rM9MW/8/

score 0 · Accepted Answer

私は（私が思うに）うまくいく例を作成しました：

http://jsfiddle.net/ybmGr/2/

リスト要素内のテキストの量によって異なります。X要素では機能しません。これで無制限のXに行くことはできません。

編集：まあundefined、あなたが望むだけ多くの要素で機能するソリューションを投稿したようです...

score 0 · Accepted Answer

ライブデモ http://jsfiddle.net/rM9MW/29/

ちょっと今、あなたはdisplay:table-cellこのようにあなたのcssでプロパティを使うことができます

cssを更新し、レイアウトに応じて色を変更します

div.container
{
    margin: 10px auto 0;
    width:960px;
    border:1px solid red;
    height:700px;
    background:red;
}

div#new-menu-lower {
    border-radius: 3px 3px 3px 3px;
    border-top: 0 solid lightgrey;
    margin: 0 8px 10px;
    background:green;
}

#new-menu-lower ul {
    border: 10px solid yellow;
}

#new-menu-lower ul li:first-child {
    border-left: 0 solid lightgrey !important;
    border-radius: 7px 0 0 7px;
}

#new-menu-lower ul li{
display:table-cell;
    padding-left: 10px;
    padding-right: 10px;
}
#new-menu-lower ul li a{
    background: url("http://i45.tinypic.com/16if95z.png");

    border-right: 0 solid lightgrey !important;
    height: 27px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    display:block;
    width: 168px;
}

ライブデモ http://jsfiddle.net/rM9MW/29/

更新されたデモhttp://jsfiddle.net/rM9MW/39/

score 0 · Accepted Answer

将来の視聴者のために、私は未来から来ました:)

display: flex; を使用できます。ul と flex の場合: 1; メニュー項目に関しては、最近のブラウザにはとても良い解決策だと思います。

ul{display: flex;}
li{flex: 1;} /* modify witdh of item */

score 0 · Accepted Answer

次の Jquery を使用すると、目標を達成できます。

Jクエリ

$ulWidth = $('.menuul').width();
$listLength = $('.menuli').length;
$('.menuli').css('width', $ulWidth / $listLength )

このデモを参照してください: http://jsfiddle.net/rathoreahsan/nxurR/

score 0 · Accepted Answer

これを達成するためにJQueryのビットを使用できます。ここにjsfiddleがあります

また、ここでコードを見つけてください:-

$(document).ready(function(){
   var liCount = $('li.menuli').length;
   var parentUlWidth = $('li.menuli').parent('ul').width(); 
   var liWidth =  Math.floor(parentUlWidth * (1/liCount)) - 10;
    $('#new-menu-lower ul li').css({
        'width':liWidth
    });    
});

編集：

フィドルを更新しましたので、今すぐフィドルのリンクを確認してください。スクリプトとcssのビットを変更しました。

CSS:

#new-menu-lower ul li {
    padding-left: 5px;
    padding-right: 5px;
}

jquery - CSSを使用した流体幅メニュー

7 に答える 7

デモ jsBin

Related

Reference