0
Выпадающее меню средствами CSS -
тема стара как интернет.
Но время идет - на сцене появляются новые
люди со старыми вопросами.
Каждому сайту, в нашу нелегкую эпоху, необходимо меню, и не просто меню, а выпадающее.
Чаще всего такое меню выполняют при помощи Javascript. Это и красиво и быстро. Но не все знают Javascript, а некоторые просто знают, что всё чаще пользователи его отключают, а поисковики недолюбливают и не индексируют. И вот в этом свете постоет вопрос создания выпадающего меню без Javascript.
Такое меню выполняется при помощи каскадных листов стилей (css). В интернете куча примеров. И все бы было хорошо, если бы небыло компании Microsoft, ну или хотя бы она выпускала нормальную продукцию.
Смысл такого меню заключается в следующем: оно строится на основе списков. Той части, которая должна "выпадать", присваивается значение display в none и она становится невидимой. А при наведении мыши, мы меняем это значений на block, а position на absolute, чтоб верстка не разъезжалось. Должно получиться что-то вроде такого:
<ul>
<li> Первый уровень
<ul>
<li> Второй уровень </li>
</ul>
</li>
</ul>
.menu li ul { display:none; }
.menu li:hover ul { display: block; position: absolute; }
( код привиден для понимания принципа и не является полным и рабочим )
Теперь когда наведем мышью на Первый уровень - выпадет второй.
Можно радоваться и кричать, что все хорошо, но тут мы открыли IE проверить на кроссбраузерность...
Дело в том, что у IE есть свои причуды:
1. свойство :hover он понимает только для ссылки ( a ).
2. у него проблемы с выводом списка в списке, по этому прийдется заключать все еще и в таблицу.
Так вот почему простая задача превращается в проблему.
Но к нашему счастью все это уже решено =)
Так что не мучайтесь - есть готовые решения. Я отобрал лучшее из них для Вас.
Вот два самых приемлимых варианта:
]]>http://trifler.ru/bl...users/hmenu.htm]]>
]]>http://www.cssplay.c...s/dd_valid.html]]>
В первом случаи откройте исходник страницы - там все что Вам необходимо, во втором там есть ссылки на css и на строение меню - найти их на странице не станет проблемой.
Очень часто мне кричат: "У меня не работает - все как там, а не работает! В чем дело?", тогда я говорю примерно такое (чтоб долго не объяснять): " Напиши в верху страницы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">".
Если вам интересно что к чиму - читайте: ]]>http://www.webmascon.../coding/25a.asp]]> , ]]>http://www.i2r.ru/st...out_23105.shtml]]>
Детальнее почитать о этой проблеме и пример меню с вставкой небольшого JS специально для IE ]]>http://beholder-eye....opdown-menu-css]]>
C использованием java script: ]]>http://www.abc-it.lv/index.php/id/742]]>
Почитать:
]]>http://forum.prologi...hp?showtopic=75]]>
]]>http://forum.prologi...?showtopic=3027]]>
Почитать о CSS:
]]>http://google.com]]>
]]>http://www.htmlbook.ru/css/]]>
]]>http://www.tigir.com/css.htm]]>
]]>http://css-info.narod.ru/]]>
Почитать о java script:
]]>http://google.com]]>
]]>http://www.tigir.com/javascript.htm]]>
]]>http://docs.com.ru/js.php]]>
Наверх
