Комментарии к статье «Кросс-браузерное одноуровневое вертикальное меню без JavaScript» (32) »
Пожалуйста, не используйте эту форму для комментирования! Данная форма предназначена исключительно для ботов.
Оставить комментарий к записи «Кросс-браузерное одноуровневое вертикальное меню без JavaScript»
गते गते पारगते पारसंगते बोधि स्वाहा
Меня зовут Владимир, я программист-фрилансер, специализирующийся на Web-программировании и програмировании под Linux.
По совместительству занимаюсь администрированием LAMP/LNMP-серверов и техническим переводом.
Leo, вот исправленная версия: http://blog.sjinks.pro/test/menu/leo.html
а что делает строка,с которой все начинается и без которой ничего в эксплоере не работает?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Говорит, что документ должен разбираться в соответствии со спецификацией XHTML 1.0 Transitional.
В теме написано “вертикально меню”, но я вижу горизонтальное меню, ли я не прав?
Смотря как смотреть.
Полоса меню горизонтальная, но сам выпадающее меню вертикальное.
а ты случайно не из Севастополя ?
Далеко не случайно из Севастополя
то-то вижу лицо знакомое на аватарке. в школе видел видимо
Скорее, в офисе СевСтара. Школу я очень давно окончил.
так что точно в 7й видел
Упер у товарища Стью: cssplay.co.uk
Что именно? Меню я брал отсюда, ссылка тоже вроде есть. Что не так?
Спасибо большое за менюшку, особенно за момент с упаковыванием списка в ссылку посредством таблицы для осла. Правда есть еще пару багов.
Во-первых: на малых разрешениях и/или большом размере меню, оно переноситься на вторую строчку и ссылки из него начинают налазить на выпадающее подменю. Для большинства браузеров достаточно установить z-index списку подменю:
z-index: 1; /* или какой-нить другой */
}
Так как IE трактует z-index по-своему, к нему другой подход – нужно установить z-index каждому li-элементу основного меню по правилу – первому самый высокий, второму ниже, третий еще ниже и тд. Это объясняется тем, что IE сравнивает z-index родителей, игнорируя детей. Если им явно не задать z-index в ниспадающем порядке, он считает z-index каждого следующего элемента выше, чем предыдущего. Это мой вариант решения, можно и по-другому сообразить.
Во-вторых: В IE6 список подменю мерцает, когда по нему ведешь курсором. Есть ли от этого лекарство(желательно без js)?
Тарас, а используется сторонняя JavaScript-библиотека типа Scriptaculous?
У меня что-то подобное было, лечилось исправлением библиотеки.
С этим уже разобрался. Действительно была проблема с js – событие mousemove висело на document, что видимо перегружало несчастный IE. -)
Свою менюшку довел более-менее до ума, но по дороге наткнулся еще на одну проблему – непонятные отступы в IE. В 5-7 был отступ от последнего пункта подменю к нижней границе подменю, в 5, к тому же, еще и к левой границе (у Вас он тоже есть). В ходе экспериментов пришел к тому, что в IE display:block для li-элементов подменю не критичен и именно из-за него появляется отступ слева в 5-м. Но его отсутствие не дает, в опере например, задать фон ссылке, вложенной в него. Потому убрал его хаком:
{
-display: auto;
}
Убрать нижний отступ удалось заданием height и line-height для ссылки, вложенной в li-элемент подменю (у Вас эти свойства задаются самому li, что в моем случае не помогло):
{
height: 1.4em;
line-height: 1.4em;
}
И еще, возможно поможете с моей локальной проблемой? Мне нужно, чтобы подменю тянулось по содержимому. Пока что задал следующее:
{
width: 100%;
white-space: nowrap;
}
Как всегда IE выделился – он игнорирует width:100%, если родительскому элементу строго не задать размер. Как это обойти?
Вот у меня это тоже не получается
Владимир спасибо! Метод без скриптов очень интересен. Но есть одна проблема: через
<!--[ if IE 7 ]><!--></a><!--меню не работает в IЕ8, а там дальше если появится IЕ9, то ситуация будет аналогичная. Я не профессионал, поэтому сам найти ответ не могу. Если возможно подскажите решения. Спасибо!Сергей, попробуйте
<!--[if gte IE 7]><!--></a><!--<![endif]-->вместо
<!--[if IE 7]><!--></a><!--<![endif]-->По возможности отпишитесь, пожалуйста, о результатах — у меня пока нет возможности проверить. Спасибо.
Объясните чайнику, поисковики будут видеть и индексировать страницы в таком меню?
Да.
Прошу прощения за спам…не обратил внимания на разрешенные тэги,
Доброго времени суток Vladimir!
Объясните пожалуйста смысл условного комментария:
<!--[if lte IE 6]><![endif]-->
я так понимаю если ие7 закрывай тэг а,если ие6 тогда конструкция с таблицей,а это что???
<!–я имею ввиду до и после закрывающего тэга?
Этот код:
<a href="#">Renaissance<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tbody><tr><td><![endif]-->
<ul>
<li><a href="#">Brunelleschi</a></li>
</ul>
<!--[if lte IE 6]></td></tr></tbody></table></a><![endif]-->
</li>
нормальные браузеры и IE7 увидят так:
<a href="#">Renaissance</a>
<ul>
<li><a href="#">Brunelleschi</a></li>
</ul>
</li>
В случае с IE6 будет так:
<a href="#">Renaissance
<table><tbody><tr><td>
<ul>
<li><a href="#">Brunelleschi</a></li>
<li><a href="#">Alberti</a></li>
<li><a href="#">Palladio</a></li>
<li><a href="#">Michelangelo</a></li>
<li><a href="#">Bramante</a></li>
</ul>
</td></tr></tbody></table></a>
</li>
Получится грязный хак: IE6 увидит таблицу внутри тэга
<a>. Он опирается на один из багов IE6: тэгtableне закроет тэгa(как сделал бы другой нормальный браузер), в результате чего вся таблица будет помещена внутрь. Благодаря этому список (ul) у нас также окажется внутри тэгаa, и правила с:hoverбудут работать.Если же делать без таблицы:
<a href="#">Renaissance
<ul>
<li><a href="#">Brunelleschi</a></li>
<li><a href="#">Alberti</a></li>
<li><a href="#">Palladio</a></li>
<li><a href="#">Michelangelo</a></li>
<li><a href="#">Bramante</a></li>
</ul>
</a>
</li>
То IE6 поместит закрывающий
</a>передul, в результате чего правила с:hoverработать не будут.