Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.07.2015, 17:58
Новичок на форуме
Отправить личное сообщение для qesplu Посмотреть профиль Найти все сообщения от qesplu
 
Регистрация: 16.07.2015
Сообщений: 2

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

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


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

Мое решение:
В массив занес все значения ширины каждого отдельного элемента li.
После загрузки страницы и изменения размера экрана, выполнял функцию, которая:
Проверяла ширину всего меню и ширину всего документа.
ЕСЛИ ширина документа меньше ширины меню:
меню.children('li').slice(последний-элемент).prependTo(второстепенное-меню);

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


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

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

Только учусь...
Ответить с цитированием
  #2 (permalink)  
Старый 16.07.2015, 18:05
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Сообщение от qesplu
перемещаются из главного ul списка в второстепенный, как показано на картинке.
Ничего там не показано. Если перемещаются из горизонтального в вертикальный, то это какой-то баян. Почему бы им просто не складываться пока до 1 штуки в ряду останется?
Ответить с цитированием
  #3 (permalink)  
Старый 16.07.2015, 18:10
Новичок на форуме
Отправить личное сообщение для qesplu Посмотреть профиль Найти все сообщения от qesplu
 
Регистрация: 16.07.2015
Сообщений: 2

kostyanet, задача такая. Нужно перемещение из одного списка в другой.
Ответить с цитированием
  #4 (permalink)  
Старый 16.07.2015, 18:21
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Ну ладно, а где глюкавый скрипт, или надо с нуля написать?

Наверно тут придется заменять инлайн-блок на блок того ли, который не влазиет видишь ли и соотв наоборот ес ли влазиет.
Ответить с цитированием
  #5 (permalink)  
Старый 16.07.2015, 19:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

qesplu,
а поискать готовый плагин?
Ответить с цитированием
  #6 (permalink)  
Старый 16.07.2015, 19:05
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Да, этих сайтов с менюхами как грязи в сети. Тыдышь http://cssmenumaker.com/ первый по словам css js menu
Ответить с цитированием
  #7 (permalink)  
Старый 16.07.2015, 19:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от kostyanet
Да, этих сайтов с менюхами как грязи
и где там подобное меню?
Ответить с цитированием
  #8 (permalink)  
Старый 16.07.2015, 19:10
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

а поискать?
Ответить с цитированием
  #9 (permalink)  
Старый 16.07.2015, 19:31
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Мне кажется, или это можно сделать на CSS?
Ответить с цитированием
  #10 (permalink)  
Старый 16.07.2015, 19:36
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Наверно можно, лично я не допер как. Сделал фидлю на жабе с примером. Не уверен в надежности решения, но сейчас работает как из пистолета: https://jsfiddle.net/24xdr9ab/1/
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Скрипт работы меню. Проблемка. Лёха36 Ваши сайты и скрипты 3 05.01.2014 22:45
Выделение активных пунктов многоуровневого меню на jQuery Letto Элементы интерфейса 2 04.12.2013 15:30
Алгоритм работы обработчика события salikoff Events/DOM/Window 1 20.09.2012 23:46
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36