新导航样式

 

$(window).resize(function () {
    $(".add-nav-width").width($(".addd-navbar-content").width() - $(".tgl-menu-btn").outerWidth() - $(".add-width-right-width").outerWidth()-60);
    var navobj = $(".add-nav-width");
    //创建下拉标签
    var dropdown = $('<li class="dropdown pull-right hide tabdrop"><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">' +
        '<i class="glyphicon glyphicon-align-justify"></i>' +
        ' <b class="caret"></b></a><ul class="dropdown-menu"></ul></li>');
    //检测是否已增加
    if (!$('.tabdrop').html()) {
        dropdown.prependTo(navobj);
    } else {
        dropdown = navobj.find('.tabdrop');
    }
    var collection = 0;
    var maxwidth = navobj.width() - 60;
    var liwidth = 0;
    //检查超过一行的标签页
    var litabs = navobj.append(dropdown.find('li')).find('>li').not('.tabdrop');//返回不带class="tabdrop"的li
    var lisize = litabs.length;//个数
    litabs.each(function (i, j) {
        console.log(j)
        liwidth += $(this).width();
        if (collection == 0 && i == lisize - 1 && liwidth <= navobj.width()) {
            return true;
        }
        if (liwidth > maxwidth) {
            dropdown.find('ul').append($(this));
            collection++;
        }
    });
    //如果有超出的，显示下拉标签
    if (collection > 0) {
        dropdown.removeClass('hide');
        if (dropdown.find('.active').length == 1) {
            dropdown.addClass('active');
        } else {
            dropdown.removeClass('active');
        }
    } else {
        dropdown.addClass('hide');
    }
}).resize();