2014-09-11 4 views
0

Я пытаюсь понять, как сделать меню CSS выпадающим и вылететь (на зависании) справа от левых родителей и автоматически вылететь влево для правильных родителей. Это делается аккуратно по теме здесь: http://demo2.woothemes.com/?name=sentient Я пытаюсь скопировать стиль мини-тележки в другую мою wootheme. Если вы добавите что-то в корзину и наведите курсор на мини-тележку, вы увидите. Мое меню укладки всегда имеет право, и я не могу понять, где его адаптировать. Спасибо за любую помощь!Меню CSS - положение влево или вправо автоматически?

+0

* Я не могу понять * недостаточно ... Вы должны на самом деле попробовать что-то и показать нам, где вы застряли – LcSalazar

+0

Попробуйте добавить код, который вы написали, до http: // jsfiddle. net/editor и опубликовать ссылку с описанием того, что не работает. Тогда люди помогут вам. –

ответ

0

Вам необходимо проверить положение в раскрывающемся меню с яваскрипт и применить стиль условно (это не будет работать точно, но это идея):

JQuery

$('.dropdown-parent').hover(function(){ 
     //If to left of center of screen 
     $(this).children('.dropdown').css('dropdown-right'); 
     $(this).children('.dropdown').css('right', $(this).width()); 

     //Else if to right of screen 
     $(this).children('.dropdown').css('dropdown-left'); 
     $(this).children('.dropdown').css('left', $(this).width()); 
    }, function(){ 
     $(this).hide(); 
    }) 

CSS:

.dropdown-parent { 
    position:relative; 
}  
.dropdown { 
    position: absolute; 
}  
+0

Спасибо - я собираюсь попробовать это. – RexTheRunt

-1

JSFiddle Demo: Pure CSS

Поместите ul в раскрывающийся список li списка навигационных панелей. Обычно вложенный ul отображается прямо под номером li. Примените position:absolute; для ul, отрегулируйте его width, и если вам нужно, отрегулируйте margin-leftul.

Смежные вопросы