Question

我在这里使用过Bootstrap，所以它的响应性很强。

但我想在单行加载菜单，比如。

我在徽标和搜索栏之间有菜单。如果有静态菜单会很好但这里菜单会动态添加。

所以如果有更多的菜单（更多的是容器宽度），它将自动移动到＆＃34;更多＆＃34;下拉菜单。

我必须从js检查宽度，因为浏览器宽度可能会有所不同。

这里我做了一些事情。 HTML代码，

<header id="header">
    <div class="container">
        <nav id="navMain">
            <div class="navbar-header">
                <button type="button" class="navbar-btn">
                    <i class="fa fa-navicon"></i>
                </button>
                <a class="logo" href="/"><img src="#" alt=""></a>
            </div>
            <div class="search">
                <form action="/shop" method="get">
                    <div class="icon">
                        <i class="fa fa-search"></i>
                    </div>
                    <div class="search-view">
                        <input type="text" placeholder="search" name="search">
                        <input type="submit" value="">
                    </div>
                </form>
            </div>
            <div class="menu-bar">
                <ul>
                    <li class="active"><a href="/">Home <i class="fa fa-angle-down"></i></a></li>
                    <li class="{}">
                        <a href="/shop/3">Play Surface </a>
                    </li>
                    <li class="{}">
                        <a href="/shop/18">Test with big text  </a>
                    </li>
                    <li class="{}">
                        <a href="/shop/19">Demo Components </a>
                    </li>
                    <li class="{}">
                        <a href="/shop/5">Sports Equipment </a>
                    </li>
                    <li class="{}">
                        <a href="/shop/4">Site Amenities </a>
                    </li>
                    <li class="sub-nav more_list">
                        <a href="#">More <i class="fa fa-angle-down"></i></a><span class="arrow"><i class="fa fa-angle-down"></i></span><span class="arrow"><i class="fa fa-angle-down"></i></span>
                        <div class="sub-menu">
                            <div class="left-nav">
                                <ul>
                                    // I Have to add HERE
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</header>

JS：

var containerWidth = parseFloat($('#header > .container').width());
var logoWidth = parseFloat($('#header > .container > #navMain > .navbar-header').width());
var menuWidth = parseFloat($('#header > .container > #navMain > .menu-bar').width());
var searchWidth = parseFloat($('#header > .container > #navMain > .search').width());

var MoreHtml = $('#header > .container > #navMain > .menu-bar > ul > li.more_list');
if ((logoWidth + searchWidth + menuWidth) > containerWidth) {
    console.log("add more menu");
}

如何从菜单<li>剪切并粘贴到更多菜单<ul>。

Answer 1

您也可以通过简单地使用hidden-*和visible-*类名来实现此目的。

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Item 2</a></li>
  ...
  <li class="hidden-xs"><a href="#">Item 5</a></li>
  <li><a href="#" data-toggle="dropdown">More <span class="caret"></span></a>
    <ul>
       <li class="visible-xs><a href="#">Item 5</a></li>
       ...
    </ul>
  </li>
</ul>

如果容器宽度已满，请使用“更多”下拉菜单替换<li>

1 个答案: