Как сделать адаптивное меню с кнопкой "Ещё"?

Question

Как сделать так, чтобы при уменьшении экрана, пункты меню, которые не входят в ширину экрана, собирались в отдельный блок и показывались при нажатии на кнопку "Ещё"?

.nav {
  position: relative;
  min-width: 250px;
  background: gold;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
}

.nav a {
  display: block;
  padding: 10px 20px;
  background: gold;
  font-size: 18px;
  color: black;
  text-decoration: none;
}

.nav a:hover {
  color: red;
}

.links {
  display: inline-table;
  margin: 0;
  padding: 0;
}

.links li {
  margin: 0;
  padding: 0;
  display: table-cell;
  border-left: 1px solid red;
}

.links li:first-child {
  font-weight: bold;
}

.links li:first-child a {
  color: red !important;
}

<nav class='nav'>
  <ul class='links'>
    <li><a href='#'>Главная</a></li>
    <li><a href='#'>Проекты</a></li>
    <li><a href='#'>Заказы</a></li>
    <li><a href='#'>Выполненные работы</a></li>
    <li><a href='#'>Отзывы</a></li>
    <li><a href='#'>Наши планы</a></li>
    <li><a href='#'>Инвесторы</a></li>
    <li><a href='#'>Контакты</a></li>
  </ul>
</nav>

Answer 1

Есть у меня одно отличное решение, использовал его уже неоднократно. Автора этого решения правда не знаю, но ему спасибо, отлично получилось. Доработал ваше меню:

var $nav = $('.nav');
var $btn = $('.nav button');
var $vlinks = $('.nav .visible-links');
var $hlinks = $('.nav .hidden-links');
var breaks = [];

function updateNav() {
  var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - $btn.width() - 30;
  if ($vlinks.width() > availableSpace) {
    breaks.push($vlinks.width());
    $vlinks.children().last().prependTo($hlinks);
    if ($btn.hasClass('hidden')) {
      $btn.removeClass('hidden');
    }
  } else {
    if (availableSpace > breaks[breaks.length - 1]) {
      $hlinks.children().first().appendTo($vlinks);
      breaks.pop();
    }
    if (breaks.length < 1) {
      $btn.addClass('hidden');
      $hlinks.addClass('hidden');
    }
  }
  $btn.attr("count", breaks.length);
  if ($vlinks.width() > availableSpace) {
    updateNav();
  }
}
$(window).resize(function() {
  updateNav();
});
$btn.on('click', function() {
  $hlinks.toggleClass('hidden');
});
updateNav();

* {
  margin: 0;
  padding: 0;
}

body {
margin: 50px 25px;
}

.nav {
  position: relative;
  min-width: 250px;
  background: gold;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
}

.nav a {
  display: block;
  padding: 10px 20px;
  background: gold;
  font-size: 18px;
  color: black;
  text-decoration: none;
}

.nav a:hover {
  color: red;
}

.nav button {
  position: absolute;
  height: 100%;
  right: 0;
  padding: 0 15px;
  border: 0;
  outline: none;
  background-color: red;
  color: #fff;
  cursor: pointer;
}

.nav button:hover {
  background-color: indianred;
}

.nav button::after {
  content: attr(count);
  position: absolute;
  width: 25px;
  height: 25px;
  left: -16px;
  top: 7px;
  text-align: center;
  background-color: red;
  color: #fff;
  font-size: 14px;
  line-height: 25px;
  border-radius: 50%;
  border: 2px solid #fff;
  font-weight: bold;
}

.nav button:hover::after {
  transform: scale(1.05);
}

.nav .hamburger {
  position: relative;
  width: 32px;
  height: 4px;
  background: #fff;
  margin: auto;
}

.nav .hamburger:before,
.nav .hamburger:after {
  content: '';
  position: absolute;
  left: 0;
  width: 32px;
  height: 4px;
  background: #fff;
}

.nav .hamburger:before {
  top: -8px;
}

.nav .hamburger:after {
  bottom: -8px;
}

.nav .visible-links {
  display: inline-table;
}

.nav .visible-links li {
  display: table-cell;
  border-left: 1px solid red;
}

.nav .hidden-links {
  position: absolute;
  right: 0px;
  top: 100%;
  border-left: 1px solid red;
  border-right: 1px solid red;
  border-bottom: 1px solid red;
}

.nav .hidden-links li {
  display: block;
  border-top: 1px solid red;
}

.nav .visible-links li:first-child {
  font-weight: bold;
}

.nav .visible-links li:first-child a {
  color: red !important;
}

.nav .hidden {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class='nav'>
  <button><div class="hamburger"></div></button>
  <ul class='visible-links'>
    <li><a href='#'>Главная</a></li>
    <li><a href='#'>Проекты</a></li>
    <li><a href='#'>Заказы</a></li>
    <li><a href='#'>Выполненные работы</a></li>
    <li><a href='#'>Отзывы</a></li>
    <li><a href='#'>Наши планы</a></li>
    <li><a href='#'>Инвесторы</a></li>
    <li><a href='#'>Контакты</a></li>
  </ul>
  <ul class='hidden-links hidden'></ul>
</nav>

Answer 2

Зачем морочить себе голову? Обычно если при уменьшении экрана хотя бы один из пунктом спрыгивает вниз собраются в отдельный блок все пункты меню а не только те что спрыгнули. Если не знаете как это сделать, другой вопрос. А если пытаетесь заморочить себе голову, то этого делать не стоит. Из всех соображений, и с точки зрения здоровья, и с точки зрения эстетики на странице, с точки зрения возни с адаптацией.

БЛОГ НА HUSL

Как сделать адаптивное меню с кнопкой "Ещё"?

Ответы (2 шт):