0

Имеется горизонтальное меню:

alt text

На разных страницах оно разное, как по ширине компонентов (от одно короткого слова, до несокльких длинных слов), так и по их количеству. Суммарная ширина может сильно превышать допустимую ширину родителя.

Требуется выводить это меню одной строкой, по принципу "карусели". Как, например, тут, только вместо изображений листать компоненты меню. Проблема усугубляется резиновым дизайном.

Получается, что нужна карусель неизвестной ширины для элементов неизвестной ширины.

Хотелось бы найти JQuery-плагин, но выгуглить нужный в легионе обычных каруселей у меня что-то не получается.

Подскажите, пожалуйста, как и где искать решения? Может сталкивался кто с подходящим плагином? Можно, конечно, пытаться писать самому, но задача кажется мне слишком сложной на настоящий момент (навскидку уже не понятно как вывести элементы бесконечной строкой, как считать ее ширину, как определять, что строка пристыковалась к границе и т.д.).

6
  • 1
    @Cypher, думаю, что готовое решение, вы врядли найдете, т.к. задача у вас достаточно специфическая. Скорее всего, что придётся писать самому.
    – Deonis
    14 ноя 2012 в 21:35
  • Давайте чтобы сильно не наглеть я все таки сам сначала попробую и буду обращаться за помощью по шагам. Мне представляется два алгоритма: 1) Отобразить страницу. Подсчитать ширину всех <li> - тем самым получить общую ширину. Выставить эту ширину <ul>. Вместе с абсолютным позиционированием и шириной выводим <ul> одной строкой. Обрачиваем <ul> в <div>. Диву оверфлов хидден и также выясняем его ширину (повторяем при ресайзе). Дальше сравниваем и запускаем карусели, которые манипулируют значением left на 200px по кликам на контролы.
    – Cypher
    15 ноя 2012 в 5:57
  • 2) Создать массив длин. Один элемент массива - длина одного li. Хранить текущий первый уместившийся элемент и текущий последний уместившийся элемент. По кликам на контролы сдвигать на соседний элемент вычитая его ширину из left. Тем самым получаем более акуратную прокрутку: поэлементно. Но кажется, что такой подход на порядок сложнее.
    – Cypher
    15 ноя 2012 в 6:02
  • @Cypher, да, конечно, попробуйте сами. Только не советую сразу прибегать к модификации какого-то плагина. Господа, предлагающие таковые, не учитывают один главный нюанс - проблема не в прокрутках элементов, а в динамическом изменении ширины каждого. Вписать их таким образом, чтоб элементы четко входили в область просмотра, а не обрезались на пол пути.
    – Deonis
    15 ноя 2012 в 6:12
  • Закодил первый алгоритм. Все не так плохо :). jsfiddle.net/Cypher/NLm8P/8 По шагам можно посмотреть с первой версии ход моих мыслей :) .../NLm8P/ .../NLm8P/1/ и т.д. Очень тяжело мне разобраться с двумя вещами: а) почему в процессе целочисленных вычислений, после нескольких шагов браузер начинает выдавать значения переменных типа 100.0000014134 или 99.999999992342 ? б) Как оптимизировать код в функцию и вызывать ее при ресайзе окна. Как собрать подзадачи в функции. Как быть при этом с глобальными переменными?
    – Cypher
    15 ноя 2012 в 18:56

3 ответа 3

3
  1. Берём плагин для jQuery - jCarousel.

  2. Немного правим код под свои реалии

  3. PROFIT

Посмотреть можно тут: http://michaelsolovyev.com/en/breakfast.html

Если подойдёт - можно спереть, ибо я правил плагин

1
  • Спасибо, попробуем :)
    – Cypher
    15 ноя 2012 в 5:49
2

Написал вам плагинчик небольшой. Комментировал через раз, т.к. просто устал за день. Если чего будет не понятно - спрашивайте. Пересмотрите плагин, оптимизируйте, исправьте мои ошибки и излишества и пользуйтесь на здоровье )).

P.S. Плагин, естественно, можно в отдельный файл вынести. Пример подключения - в самом низу кода.

P.P.S. Группы элементов раскрасил в разные цвета для наглядности.

1
  • Ваааа спасибо :). Честно говоря, не знаю, как быстро смогу разобраться :) Но думаю, на следующей неделе появяться вопросы :)
    – Cypher
    16 ноя 2012 в 16:30
2

Посмотрите carouFredSel. Очень "гибкие" карусели можно делать.

Ваш ответ

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

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