Проблема с разработкой горизонтального выпадающего меню

Question

[Станислав Корицкий]

Задача: создать горизонтальное резиновое выпадающее меню.

Само меню на скриншоте.


Проблема:

Как Вы поняли, выпадающий блок не чувствует правого края и создает горизонтальную прокрутку.

Код представляет собой стандартный код для меню:

ul>li>a+ul.submenu>li>a

Стиль ul

background-color: #414141;
.ma;
list-style: none;
width: 100%;
min-width: 980px;
max-width: 1280px;
position: relative;
margin: 0px auto 30px;
display: table;

Стиль выпадающей ul

position: absolute;
z-index: 2;
background: #575757;
display: none;
list-style: none;
width: 980px;
padding: 30px 40px;

Какие будут идеи решения этой проблемы?

Answer 1

[Станислав Корицкий]

Решил вопрос по другому.
Тем блокам которые вылазят присваиваю класс .r0 (right: 0px)
Можно было бы написать функцию расчета местоположения блока на странице, но надо быстро и по-простому.

Спасибо всем за советы)

Answer 2

[Николай Васильчук]

Выбирайте:
- На JS проверять не вылез ли за край и сдвигать по необходимости
- CSS :last-child делать со сдвигом не вправо, а влево.

Comments

[Станислав Корицкий]

По поводу JS это крайний случай, но реальный)
На счет last-child идея хорошая, если нужно сделать только под последний пункт меню выпадающее. Спасибо)

[Krickt]

@Anonym @CeBuJI А если список предпоследнего элемента будет как на скрине, то опять получим проблему...

[Станислав Корицкий]

@shiza36 Так не будет, потому что я присвоил класс .r0

Answer 3

[Артем]

подсмотреть реализацию аналогичного по структуре и реализуемым функциям меню в любом из css фрейморков - zurb.foundation, twitter bootstrap, etc.

Answer 4

[maxfox]

Вы же через js показываете меню? Почему бы не написать в той же функции расчет ширины выпадающего элемента и устанавливать в ней width?
Могу ошибаться, но мне кажется это будет не сильно медленней (если не быстрее) чем :last-child. Тем более, что js все равно используется.

Comments

[Николай Васильчук]

Выпадающее меню можно сделать и без JS.

[maxfox]

@Anonym :hover? Это не всегда удобно.

[Николай Васильчук]

@maxfox А на JS вы не hover будете делать?

[maxfox]

@Anonym Да но, псевдокласс :hover изменяет только стиль элемента, для которого описан :hover, а js позволяет выполнить произвольные действия. Поэтому и не всегда удобно.
На мой взгляд, в данном случае js нужен, просто потому что с ним логичнее.

[Николай Васильчук]

@maxfox А без него быстрее (и по скорости разработки и по производительности браузера).

[maxfox]

@Anonym А как мобильные браузеры обрабатывают :hover? Спор бессмысленный, кто как хочет - так и делает. Просто, мое мнение, что :hover - для подсветки элементов (его для этого и придумали). Для более сложных сценариев - JS.

[Станислав Корицкий]

Сделано через псевдокласс :hover. Не применял JS, потому что нет необходимости в анимации. Если с мобильных устройств, то при клике на пункте меню пользователь перейдет на страницу раздела, а там все равно есть категории...

[Николай Васильчук]

@CeBuJI Анимации тоже лучше делать в CSS.

[Станислав Корицкий]

@Anonym Зачем? Пока CSS3 еще не стабильно работает, лучше я 1 строчку на jQuery напишу и все будет красиво и главное работать)
Я сторонник сделать все без JS, но иногда как-бы не хотелось, нужно чтобы работало.