Как решить проблему выпадающего подменю у меню-карусели?

Question

[andreyqin]

На сайте есть горизонтальное меню в виде карусели, невидимые элементы которой скрываются с помощью overflow: hidden. У каждого пункта этого меню есть выпадающее подменю, которое обрезается как раз из-за правила overflow. Вместо него я стал использовать класс clearfix для карусели:

.clearfix:after {
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}

Но с этим классом на странице возникает огромная горизонтальная полоса прокрутки, так как отсутствует правило overflow: hidden, которое скрывает невидимые элементы карусели.
Как можно решить данную проблему?

Answer 1

[Александр]

Была похожая проблема. Решил довольно сложным путем - меню второго уровня вывел за слайдер. Скрыл их соответственно. Присвоил position:absolute При наведении на картинку или что-там у вас вычисляем координаты этого элемента, выбираем меню которое относится к этому элементу и показываем его там где надо (под ним например, т.к. координаты и высота нам известны).

Как-то так :)

Comments

[andreyqin]

Вариант на крайний случай. Хотелось бы, конечно, все решить средствами CSS.

Answer 2

[Виталий Киренков]

Может быть - жёстко вписать высоту карусели?

Comments

[andreyqin]

Немного не понял, а что это даст?

[Виталий Киренков]

Извиняюсь, это я изначально не вчитался.

Если вы знаете высоту подменю, то можете сделать карусель высотой (карусель+подменю), а родитель карусели будет иметь высоту просто карусели. Соответственно у вас не будет просвета между контентом и каруселью. Для надёжности, чтобы под меню было выше контента можете на блок с каруселью вешать z-index больший, чем и последующего контента.

[andreyqin]

У меня подменю выводится из базы динамически. Теоретически оно может иметь любую высоту, но практически высота не должна превышать ~300px. В любом случае спасибо, попробую ваш вариант как будет доступ к проекту, о результатах отпишусь.

[andreyqin]

@DeLaVega, возникает проблема: если карусель выше по оси z, чем контент, то она начинает перекрывать этот контент, а если ниже, то, соответственно, всплывающее подменю не видно из-за блока с контентом.

[Виталий Киренков]

Читайте внимательно. Я не просто так про z-index писал.

[andreyqin]

Так вот и получается, что ни контент выше не поднять, ни саму карусель

[Виталий Киренков]

@andreyqin каким образом у вас навигация оказывается под контентом? и вообще, обычно прикладывают ссылку на то как не работает. я не телепат, и не знаю что у вас там вообще происходит.

[andreyqin]

Постараюсь объяснить:
Ситуация, когда у карусели z-index больше, чем у контента ниже: всплывающее подменю у карусели отлично работает. Но из-за того, что высота карусели выходит за пределы её обертки и перекрывает контент, он становится невосприимчив к каким-либо действиям: клики, реакция при наведении и прочее.

Ситуация, когда у карусели z-index меньше, чем у контента ниже: тут все наоборот, теперь контент работает как надо, а вот карусель, как и ожидается, не видна из-за неё.

[Виталий Киренков]

Мда, вы явно не поняли что нужно сделать с z-index...

Пишу развёрнуто:

.родитель_карусели, .родитель_контента { position: relative; z-index: 10;}
.родитель_карусели:hover { z-index: 20;}

[andreyqin]

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

[Виталий Киренков]

Сделайте принудительную высоту меньше!

[andreyqin]

У меня подменю выводится динамически и я не могу знать какой высоты оно будет, поэтому сразу задал высоту в 500px.

Answer 3

[Иван Беленков]

Попробуйте использовать свойство overflow-x/overflow-y.

Comments

[andreyqin]

Можно решить проблему, используя overflow-x: hidden для html, но в таком случае полоса прокрутки не появляется даже если ширина окна меньше заданной.
Если задать данной правило для карусели, то при наведении на отдельный элемент меню, просто появляется вертикальная полоса прокрутки.