6

Всем привет! Подскажите, как можно реализовать такое меню (на jQuery):

Схематично нарисовано:

схематика

Суть работы:

При уменьшении размера экрана (.on('resize') или при маленьком экране, пункты меню которые не помещаются $(document).width(), перемещаются из главного ul списка в второстепенный, как показано на картинке. При обратном действии (т.е при увеличении размера экрана), пункты меню которые уже можно отобразить - отображать. Ширина li - автоматическая, в зависимости от содержимого.

Мое решение:

В массив занес все значения ширины каждого отдельного элемента li. После загрузки страницы и изменения размера экрана, выполнял функцию, которая: Проверяла ширину всего меню и ширину всего документа. ЕСЛИ ширина документа меньше ширины меню:

меню.children('li').slice(последний-элемент).prependTo(второстепенное-меню);

В рекурсии прогонял, пока, не подтверждалась, ЧТО ширина документа больше ширины меню, тогда, пытался вставить первый пункт второстепенного меню в конец и проверить еще раз ширину меню и ширину экрана(окна). Если, при этом, ширина меню меньше ширины экрана, то добавлял элемент в главное меню:

второстепенное-меню.children('li').slice(0, 1).appendTo(меню);

Все работало, НО работало очень плохо - постоянно мигало, иногда вставляло элемент, когда он не подходил по ширине. Вот такая вот "печальбеда"

Интересно, как бы вы решили такую задачу (алгоритм - что проверять? от чего отталкиваться)? Возможно, есть уже готовое решение моей проблемы? Может есть какая-то библиотека jQuery?

Только учусь...

5
  • Хм.. Было бы круто это сделать на css без скриптов... Хотя скрыть кнопку и показывать количество там вряд ли получится... А про остальное даже есть идеи.
    – Qwertiy
    16 июл 2015 в 15:37
  • Согласен, я подобное делал. Писал плагин для бустрап меню. Постоянная физическая перестановка нодов - плохая идея. Операции с DOM-деревом довольно "дорогие". Решать надо либо CSS либо всё прятать в бургер, как делают 90% сайтов. :)
    – SlyDeath
    17 июл 2015 в 14:32
  • Динамическое вычисление ширины пунктов, в зависимости от текста - не нужно. Статическая ширина пункта, можно всё сделать в css, а число скрытых элементов вычислять на resize.
    – vp_arth
    23 фев 2017 в 17:44
  • 1
    Через обычный css это очень просто реализовать, но для этого нужно делать много рутины. По сути нужно продублировать 2 меню (1 горизонтальное, другое вертикальное). У каждого элемента меню есть свой класс на подобие модульной верстки (col-md-1-2-3-4-5-6-67-7u). А дальше для каждого класса прописать visible: none; или visible: block\inline-block; для разной ширины экрана через @media. Наверняка, это можно сделать более элегантно через sass. И не надо кидаться в меня тапками - по такому же принципу построена модульная верстка и вы в 90% случаях ей пользуетесь
    – Peresada
    12 янв 2018 в 17:16
  • Связанные: ru.stackoverflow.com/q/999529/256824
    – user256824
    7 июл 2019 в 0:26

1 ответ 1

1

попробуйте так

$().ready(function() {

  //we reconstruct menu on window.resize
  $(window).on("resize", function(e) {
    var parentWidth = $("#nav-bar-filter").parent().width() - 40;
    var ulWidth = $("#more-nav").outerWidth();
    var menuLi = $("#nav-bar-filter > li");
    var liForMoving = new Array();
    //take all elements that can't fit parent width to array
    menuLi.each(function() {
      ulWidth += $(this).outerWidth();
      if (ulWidth > parentWidth) {
        console.log(ulWidth);
        liForMoving.push($(this));
      }
    });
    if (liForMoving.length > 0) { //if have any in array -> move em to "more" ul
      e.preventDefault();
      liForMoving.forEach(function(item) {
        item.clone().appendTo(".subfilter");
        item.remove();
      });
    } else if (ulWidth < parentWidth) { //check if we can put some 'li' back to menu
      liForMoving = new Array();
      var moved = $(".subfilter > li");
      for (var i = moved.length - 1; i >= 0; i--) { //reverse order
        var tmpLi = $(moved[i]).clone();
        tmpLi.appendTo($("#nav-bar-filter"));
        ulWidth += $(moved[i]).outerWidth();
        if (ulWidth < parentWidth) {
          $(moved[i]).remove();
        } else {
          ulWidth -= $(moved[i]).outerWidth();
          tmpLi.remove();
        }
      }
    }
    if ($(".subfilter > li").length > 0) { //if we have elements in extended menu - show it
      $("#more-nav").show();
    } else {
      $("#more-nav").hide();
    }
  });

  $(window).trigger("resize"); //call resize handler to build menu right
});
body {
  font-family: verdana;
  color: #999999;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.row {
  width: 1020px;
}

#more-nav {
  display: none;
  vertical-align: top;
  padding-left: 0;
  width: 150px;
}

.subfilter {
  padding-left: 0;
}

.subfilter>li {
  padding: 0 8px;
  list-style-type: none;
}

.subfilter>li>a {
  display: block;
  padding: 4px 8px;
}

#nav-bar-filter>li {
  display: inline-block;
}

#nav-bar-filter {
  padding-left: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
  padding: 0 8px;
}

#nav-bar-filter,
#more-nav {
  display: inline-block;
}

.subfilter {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="twelve columns filter-wrapper">
  <ul class="nav-bar-filter" id="nav-bar-filter">
    <li><a href="#">All</a></li>
    <li><a href="#">Small</a></li>
    <li><a href="#">Medium</a></li>
    <li><a href="#">Extra large</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Small-1</a></li>
    <li><a href="#">Medium-1</a></li>
    <li><a href="#">Extra large text</a></li>
    <li><a href="#">Large text</a></li>
    <li><a href="#">Another text</a></li>
    <li><a href="#">text</a>
  </ul>
  <ul id="more-nav">
    <li><a href="#">More > </a>
      <ul class="subfilter">
      </ul>
    </li>
  </ul>
</div>

1
  • Постарайтесь давать развёрнутые ответы, пожалуйста, поясните, как работает ваш код
    – mymedia
    23 фев 2017 в 17:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.