Question

我想知道，如果没有固定宽度按钮就可以使用flexnav。

如果所有导航项目仅使用显示其文本+填充所需的宽度，那将是很棒的。在瞬间，我将100％与我们拥有的导航项目数量分开。此值使用.flexnav li {}

设置

<div id="wrapper">
  <h1>Flexnav - Content Width Test</h1>
  <div class="menu-button">Show Menu</div>
  <div class="nav-container container">
    <div class="nav">
      <ul class="flexnav" data-breakpoint="800">
        <li><a href="">Startpage</a></li>
        <li><a href="#">About Us</a>
          <li><a href="#">Products</a>
            <ul>
              <li><a href="#">Product Category 1</a></li>
              <li><a href="#">Products</a></li>
              <li><a href="#">Large Product Category</a></li>
              <li><a href="#">Small one</a></li>
              <li><a href="#">PPPPProducts</a></li>
            </ul>
          </li>
          <li><a href="#">Media</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Contact</a></li>
          </ul>
        </div>
    </div>
    <p>The red space is needed for a search and some Icons</p>
  </div>

我已经制作了一个codepen，这样你就可以看到工作导航了。我希望有人希望能给我一个如何解决这个问题的提示： http://codepen.io/anon/pen/aCjGq

谢谢！

Answer 1

＆＃39;此刻我将100％与我们拥有的导航项目数量分开。＆＃39; - 不需要来做到这一点。只需给菜单的容器div一个宽度，然后按以下方式使用flexnav插件：

$(".flexnav").flexNav({

             'calcItemWidths': true , // dynamically calcs top level nav item widths
       });

Answer 2

问题是陈旧的，但这可能对某人有所帮助。您可以将其添加到CSS：

  .flexnav > li {
    width: auto;
  }
  .flexnav > li.has-subitems {
    padding-right: 30px;/*to account for the menu dropdown icon*/
  }
  .flexnav li ul{
    padding-left: 0 !important;
    min-width: 210px;/*or whatever you want*/
  }

Flexnav菜单按钮仅使用其内容的宽度

2 个答案: