Ниспадающее меню в css и ие7

[CEBEP]

Решил недавно своими силами реализовать меню на css, помню, был такой пост, но поленился тогда его внимательно изучить...

Короче вот. Всё нормально, не нормально IE7: меню вылезает не там где хочется. Кроме того почему-то из-за float: left; полностью блокируется вертикальное меню(class = “vrMenu”), тоже в 7. Кроме того, в коде есть пустой див без стилей, в самом начале, вот без него почему-то отступ сверху для меню не действует (тоже только в IE7 и ниже), почему?

Ещё, будет приятно послушать критику в сторону дизайна... Особенно интересны комментарии по поводу обтекания меню...

[Быколай]

Я бы по лени забил на эти огрехи, тем более что вина не ваша, а МС, которые не смогли обеспечить должную поддержку стандартов в своём браузере, к тому же морально устаревшем уже.

[psywalker]

А от чего абсолют отталкивается?

[CEBEP]

Да не от чего... в этом вся штука: если не задавать top/bottom/lrft/right то объект будет там где был бы если б был объявлен обычно, но его размеры не учитываются при построении страницы. Явно использование такого эффекта - безумие, но с reletive + top мне так и не удалось получить желаемый эффект...

Решено! понял, что в IE7 описанное свойство тоже работает нормально, просто не происходит автопереноса перед выпадающим меню...

задав

.hrMenu li a

{

display:block;

}

и всё стало нормально. теперь бы с float разобраться...

Edited December 11, 2010 by CEBEP

[rediskavet]

Да не от чего... в этом вся штука: если не задавать top/bottom/lrft/right то объект будет там где был бы если б был объявлен обычно, но его размеры не учитываются при построении страницы

Я думал что если у родителей не задан position:relative как в этом примере, то браузер должен расположить такой блок в левом верхнем углу окна.

Век живи, век учись.

[rediskavet]

перечитал еще раз свои шпоры про position:absolut, вроде становиться понятно. Значения top/bottom/lrft/right по умолчанию auto, и скорее всего это auto приравнивается к значениям которые были у этого блока до того как ему присвоили position:absolut, то есть он из патока ушел, но остался на своем месте, как то так.

По поводу меню с float. На первый взгляд это происходит, потому что у ie7 какая то путаница из-за твоего кода, он флоат применил, но изменил значения z-index у меню ul.vrMenu, и расположил его под блоком div.content это легко понять если блоку div.content задать background-color: red; тогда меню ul.vrMenu перестает быть видимым из под этого фона. Поэтому и решать проблему нужно задав меню ul.vrMenu значение z-index. Только ul.hrMenu тоже нужно z-index установить иначе оно будет выпадать под ul.vrMenu.

Немного спутанное объяснение, но ты просто задай background-color: red для блока div.content и сам все поймешь.

Edited December 11, 2010 by rediskavet

[psywalker]

Это всё понятно, но так дела не делаются. У тебя по сути вложенное меню никак не привязано к внешнему, потому что вложенное щас пляшет от экрана.

[rediskavet]

У тебя по сути вложенное меню никак не привязано к внешнему, потому что вложенное щас пляшет от экрана

Браузеры с тобой не согласны. Для проверки можно сжать размер браузера до того момента когда пункты внешнего горизонтального меню не станут переноситься на новую строку(не обращая внимания что верстка от этого разваливаеться), затем проверить как выпадает вложенное меню. Выпадает там где надо, значит все же привязка к внешнему меню есть, или как это объяснить?

[CEBEP]

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

Edited December 11, 2010 by CEBEP

[psywalker]

Браузеры с тобой не согласны. Для проверки можно сжать размер браузера до того момента когда пункты внешнего горизонтального меню не станут переноситься на новую строку(не обращая внимания что верстка от этого разваливаеться), затем проверить как выпадает вложенное меню. Выпадает там где надо, значит все же привязка к внешнему меню есть, или как это объяснить?

Браузеры с тобой не согласны.

Да, причём только современные, в более старых версиях будут проблемы 100%

Дело тут в том, что если ты НЕ выставляешь позиционированному элементу координаты, то они автоматически выставляются в auto. А что это значит? А то, что стороны элемента, у которого коодринаты выставленные в auto, выравниваются по тому месту, где они находились бы, если бы их элемент вообще не был позиционирован. В нашем случае это как раз место под пунктами основного меню, или я бы даже сказал точнее, под ссылками основного меню.

Чревато это тем, что Браузеры, видя такую ситуацию, основываются на ПРЕДПОЛОЖЕНИЯХ о "статическом" положении элемента. Да, современный браузеры делают это неплохо, но это не говорит о том, что этот способ не имеет подвоха.

Мало того, твоя задача неплохо себя ведёт, но до поры, до времени, пока ты например не захочешь поменять какое нибудь значение сторон. И тогда буде полный ппц, что явно не задумывал автор.

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

В каких то мелких задачах я бы может этот вариант и применил, но вот на более серьёзных проектах, однозначно - нет.

[CEBEP]

по поводу float - проблема ясна, z-index не помог почему-то, не помогло и внесение вертикального меню в див контента...

По поводу автоматического позиционирования - обязуюсь в сложных случаях не применять.

[rediskavet]

по поводу float - проблема ясна, z-index не помог почему-то, не помогло и внесение вертикального меню в див контента

А почему не заработало? Добавь для .hrMenu:

position: relative;
z-index: 1000;

а для ul.vrMenu:

position: relative;
z-index: 100;

Вроде должно заработать. Плюс ко всему так, ты исправишь ситуацию которую Псивокер описывал, ведь если добавишь внешнему меню position: relative;, то внутреннее будет позиционироваться от него.

[eVErl@Sting]

Попробуй Tigra Menu, сам для одного проекта искал меню такого типа, лучшей оказалась именно эта менюшка, глубину меню можно сделать практически бесконечной, полностью кроссбраузерная, пример тут www.modusm.ru

Edited December 13, 2010 by eVErl@Sting

[CEBEP]

если добавишь внешнему меню position: relative;

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

по поводу z-index - пробовал 3 и 100500... Интересно, что на 6 всё нормально работает.