5

このメニューがあり、メニュー項目の数と幅に応じて、メニュー項目が自動的に同じサイズになるようにしますnav。

しかし、私はこれをできるだけきれいな方法で機能させるのに苦労しています。

メニュー (JsFiddle)

これが私がメニューを作成する方法です

<ul>
   <li><a href="#">Item 1</a></li>
   <li><a href="#">Item 2</a>
     <ul>
       <li><a href="#">Item 1</a></li>
     </ul>
   </li>
   <li><a href="#">Item 3</a></li>
   <li><a href="#">Item 4</a></li>
</ul>
4

3 に答える 3

1

jQuery がオプションの場合は、これを使用できます。

$('nav ul > li').css('width',($('nav').width()/$('nav ul > li').size()) +'px');

ここでフィドル: http://jsfiddle.net/jAptc/6/

于 2013-01-23T12:32:38.907 に答える
0

最初の子 (ul>li:first-child) から右側のパディングを削除し、以下の jQuery コードを追加します。

$(document).ready(function(){
    var perc = 100 /$('nav>ul>li').length;
    $('nav>ul>li').css("width",perc+"%");
});

基本的に、これがjQueryにあることを除いて、ghego1のコードに実装されているのと同じロジックを実行しています

于 2013-01-23T11:58:35.893 に答える
0

このように使用できますか：

HTML

<ul class="nav">
    <li>
        <a href="#">Menu 1</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 3</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
</ul>

CSS

* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */

Fiddle:
http://jsfiddle.net/vMuxA/ (垂直メニュー)
http://jsfiddle.net/vMuxA/1/ (水平メニュー)

于 2013-01-23T12:35:55.243 に答える