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

Question

I Had used Bootstrap here, so it's responsive and cool.

But i want to load menu in single line, like.

I have menu between logo and search bar. it will fine if there is static menu but here menu will add dynamically.

so it's possible if there is more menu (more then container width) it will automatically move to "More" drop down menu.

I have to check width from js, because there is possibility the browser width will different.

here i have do some stuff. HTML code,

<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");
}

How to cut from menu's <li> and paste into More menu's <ul> .

Answer 1

You could also accomplish this by simply using hidden-* and visible-* class names.

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