Меню по типу слайдера

[advokatua]

Люди, кто знает как решить такую проблему:

 

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

 

 

Проблема начинается тогда, когда у нас есть подменю. Эти подменю (у каждого пункта ведь свое), оно не сдвигается пропорционально со всем остальным меню при нажатии на "вперед назад", оно  конечно остается на месте, ибо у него задано абсолютное позиционирование.

 

Может кто-то видел уже похожее решение где-нибудь?

 

По факту вся проблема, как я понял, в том, чтобы при наведении мыши на пункт меню (с подменю), мы высчитываем позицию текущего положения пункта и задаем это положение для подменю. Наброски, более менее работающие:

 

Загружаем страницу, и пока не нажали "вперед" или "назад" сразу считаем нужные сдвиги 

 

var subm = (function submenuCalc() {  $(".submenu").mouseover( function() {  //события при наведении на li с подменюvar off = $(this).offset();var off = off.left - w/2 + 12; //позиция сдвига с тем учетом, чтобы подменю было ровно по центру главного пункта $(this).find('ul').css({ 'left': off });});}(); 

Но, когда начинается анимация, при нажатии на кнопки "вперед" "назад", то мы должны опять все считать, но уже внутри функции анимации, при которой меню ездит вперед или назад:

function animate(dir){...function submenuCalc();});

Все ли логично, или есть решение попроще, может кто в курсе? Edited May 4, 2014 by advokatua

[Zverushka]

Не совсем поняла, зачем нужна заморочка с кнопками - меню само должно решить, что если ему не хватает места, то открыться слева, а не справа, к примеру. Вот кажись меню на js http://jqueryui.com/menu , которое самое решает, куда ему открыться.

Или нужно что-то другое в плане функционала?

Edited May 4, 2014 by Zverushka

[advokatua]

Неправильно поняла. Листается верхнее меню,а не подменю.

Подменю это уже другая проблема. 

 

В принципе сам все уже сделал. Переделал слайдер и свое дописал, но думаю должно быть решение изящнее.

[Switch74]

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

[advokatua]

Писал километровый ответ  с опровержением и вдруг нашел тот самый баг.

Оказывается в общем стиле для подменю было незаметно прописано "left:50%", которое ломало всю малину (на самом деле оно имело место для другого меню, но не по типу слайдера), и в итоге далее, из-за этого left-a, в качестве обертки была дописана функция с новым пересчетом сдвига подменю при наведении мыши. 

 

Все из-за того, что решил вчера будто функция animate сдвигает только видимую область, а дочерние элементы с абсолютным позиционированием не затрагивает, даже если они зависимы от родителя.

 

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

У меня именно так и идет. Картинка в первом посте просто была взята для примера.

 

Всем спасибо. 

Edited May 5, 2014 by advokatua