Помощник
|
Выпадающее меню |
Dolfik
|
Сообщение
#1
|
||
|
|
||
|
|||
fedornabilkin |
21.5.2013, 10:43;
Ответить: fedornabilkin
Сообщение
#2
|
|
Вот посмотри хороший пример http://plohoneponyal.ru/work/hor-menu-din.php
Только там с кодировкой что-то не так. Бесконечное количество вложенных подменю. Код из страницы можно взять. |
|
|
yury_mw |
21.5.2013, 23:24;
Ответить: yury_mw
Сообщение
#3
|
|
Не получается сделать выпадающее меню, в теории знаю как, но на практике ничего не работает, получилось только скрыть второй пункт, как сделать, чтобы при наведении, сбоку появлялись пункты? Для вертикального css-меню с подменю, выпадающими справа, код выглядит, примерно, так(в стилях специально убрано почти все оформление, оставлено только позиционирование, чтобы проще было разобраться): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> *{margin: 0; padding: 0; border: 0;} #hmenu ul { list-style: none; width: 260px; } #hmenu ul li{ display: block; position: relative; z-index: 1; } #hmenu ul li a{ display: block; text-decoration: none; background: #ccc; padding: 0.5em; } #hmenu ul li a:hover,#hmenu ul li:hover a{ display: block; text-decoration: none; background: #99c; } #hmenu ul li:hover ul li a{ background: #ccc; } #hmenu ul li:hover ul li a:hover{ background: #99c; } #hmenu ul li ul { display: none; position: absolute; left: 260px; top: 2px; width: 260px; } #hmenu ul li:hover ul { display: block; } </style> </head> <body> <div id="hmenu"> <ul> <li><a href="#" id="active">Главная</a></li> <li><a href="pages/bike.html">Велосипеды</a> <ul> <li><a href="pages/contacts">Контакты</a></li> <li><a href="#">Еще что-нить</a></li> </ul> </li> <li><a href="pages/tr.html">Тренажеры</a></li> <li><a href="pages/clothing.html">Спортивная одежда</a></li> <li><a href="pages/picnic.html">Товары для отдыха</a></li> </ul> </div> </body> </html> Обратите внимание, что для ИЕ6 без дополнительных js-костылей меню на чистом css не получится. |
|
|
Dolfik
|
Сообщение
#4
|
|
|
|
|
Dolfik
|
Сообщение
#5
|
|
C выравниванием разобрался, не получается сделать поверх всех блоков, на z-index не реагирует
|
|
|
Dolfik
|
Сообщение
#6
|
|
|
Решил проблему Если кому инетерсно, я установил позиционирование блокам, получалось так, что меню выводилось под блок из за opacity, перед ним я поставил z-index:-1; и в стилях меню прописал z-index:1; и все стало нормально
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Перенести меню | 1 | Викторио_mw | 1444 | 28.8.2018, 0:10 автор: TimurR |
|
Необходимо разрезать и установить Меню для группы ВКонтакте | 2 | boltuk | 3383 | 4.12.2017, 14:44 автор: tezoro |
|
Помогите с меню - переделать в выпадающее | 1 | lepota | 1127 | 4.12.2017, 13:29 автор: yury_mw |
|
Слайдер под меню | 0 | Olya_Poy | 4631 | 29.11.2017, 11:09 автор: -garmoni- |
|
На разных разрешениях меню выглядит по разному | 0 | SPiar | 4810 | 28.9.2017, 17:45 автор: -korotkov- |
Текстовая версия | Сейчас: 19.3.2024, 9:36 |