响应式网站中的导航栏自动合并实例

响应式网站中的导航栏自动合并

实现当屏幕宽度减小时，右侧导航栏合并进 more 选项中

转载自https://bradfrost.github.io/this-is-responsive/patterns.html

原网址实例：https://codepen.io/Dreamdealer/pen/waVzmK

html:

<nav role="navigation">
  <ul id="main">
    <li>
      <a href="#">
        <span class="fa fa-home"></span>
        Home
      </a>
    </li>
    <li>
      <a href="#">
        <span class="fa fa-cubes"></span>
        Products
      </a>
    </li>
    <li>
      <a href="#">
        <span class="fa fa-automobile"></span>
        About Us
      </a>
    </li>
    <li>
      <a href="#">
        <span class="fa fa-users"></span>
        Clients
      </a>
    </li>
    <li>
      <a href="#">
        <span class="fa fa-rocket"></span>
        Rockets
      </a>
    </li>
    <li>
      <a href="#">
        <span class="fa fa-bug"></span>
        Bugs
      </a>
    </li>
    <li>
      <a href="#">
        <span class="fa fa-envelope"></span>
        Contact Us
      </a>
    </li>
    <li class="more hidden" data-width="80">
      <a href="#">
        <span class="fa fa-ellipsis-h"></span>
        More
      </a>
      <ul></ul>
    </li>
  </ul>
</nav>
<div class="content">Resize the viewport to see items group together in a "more" item.</div>

css:

@import url(https://fonts.googleapis.com/css?family=Slabo+27px);
body {
  font-family: 'Slabo 27px', serif;
}

.content {
  padding: 40px 20px;
}

nav {
  margin-bottom: 20px;
}
nav > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 0;
  text-align: left;
  background: #68de78;
}
nav > ul > li {
  display: inline-block;
  position: relative;
}
nav > ul > li.more > a .fa {
  color: yellow;
}
nav > ul > li.hidden {
  display: none;
}
nav > ul > li > a {
  border-right: 1px dashed #d1f5d6;
}
nav > ul > li a {
  font-size: 1rem;
  display: block;
  background: #68de78;
  color: #fff;
  text-align: center;
  text-decoration: none;
  padding: 10px 20px;
}
nav > ul > li a .fa {
  font-size: 20px;
  display: block;
  margin-bottom: 10px;
}
nav > ul > li a + ul {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-right: 0;
}
nav > ul > li a + ul li {
  margin-top: 1px;
}
nav > ul > li a + ul li a {
  padding-left: 16px;
  text-align: left;
  white-space: nowrap;
}
nav > ul > li a + ul li a .fa {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 0;
}
nav > ul > li a + ul li a:hover {
  background: #28b83c;
}
nav > ul > li:hover > a {
  background: #28b83c;
}
nav > ul > li:hover ul {
  display: block;
}

js:

function calcWidth() {
  var navwidth = 0;
  var morewidth = $('#main .more').outerWidth(true);
  // 获取more元素宽度

  $('#main > li:not(.more)').each(function () {
    navwidth += $(this).outerWidth(true);
  });
  // 计算除more之外的选项宽度合

  var availablespace = $('nav').outerWidth(true) - morewidth;
  // 计算剩余宽度

  if (navwidth > availablespace) {
    // 宽度不足时合并进more选项
    var lastItem = $('#main > li:not(.more)').last();
    lastItem.attr('data-width', lastItem.outerWidth(true));
    lastItem.prependTo($('#main .more ul'));

    // 递归
    calcWidth();
  } else {
    // 宽度合适，重新显示
    var firstMoreElement = $('#main li.more li').first();
    if (navwidth + firstMoreElement.data('width') < availablespace) {
      firstMoreElement.insertBefore($('#main .more'));
    }
  }

  if ($('.more li').length > 0) {
    $('.more').css('display', 'inline-block');
  } else {
    // more内无子元素时不显示
    $('.more').css('display', 'none');
  }
}
$(window).on('resize load', function () {
  // 屏幕宽度改变时重新计算
  calcWidth();
});

最后推荐下原网站https://bradfrost.github.io/this-is-responsive/patterns.html，提供了响应式布局和不同情况的一些实例