使用jQuery自动调整导航菜单的最简洁方法

Question

我有一个菜单（链接），我希望菜单项根据菜单项的数量和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>

- dasmikko

---

你说的“尽可能清晰”，是什么意思？如果是这样，SO并不适合进行代码审查。请访问http://codereview.stackexchange.com/。否则，你应该重新用类似以下的方式表达你的问题：“我如何避免在流动菜单中使用硬编码宽度？” - Ruan Mendes

我点赞了你的回答，因为所有人都应该遵循提供 jsfiddle 的习惯。 - Patt Mehta

它没有起作用，但我可以看出我表达得不好。我更新了我的原始问题。 - dasmikko

Answer 1

如果jQuery是一个选项，您可以使用它：

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

这里有个Fiddle代码：http://jsfiddle.net/jAptc/6/

- Tomas Ramirez Sarduy

Answer 2

移除第一个子元素(ul>li:first-child)的右边距(padding)，并添加以下jQuery代码。

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

基本上我正在实现ghego1代码中的相同逻辑，只不过这是用jQuery完成的。

- Brune

Answer 3

你能用这种方式吗：

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 */

代码演示：
http://jsfiddle.net/vMuxA/（垂直菜单）
http://jsfiddle.net/vMuxA/1/（水平菜单）

- Praveen Kumar Purushothaman