Master-X
Форум | Новости | Статьи
Главная » Форум » Дизайн » 
Тема: Выпадающее меню на CSS - нужна помощь
цитата
11/11/08 в 11:49
 Petek
Можно ли сделать выпадающее меню (при наведении мышкой) на CSS, чтоб работало во всех браузерах, но без ипользования javascript и каких-либо дополнительных файлов?

я делаю по такому способу

HTML:
Код:

<ul>
<li><a href="">Меню 1</a>
<ul>
<li><a href="">Подменю 1</a></li>
<li><a href="">Подменю 2</a></li>
<li><a href="">Подменю 3</a></li>
</ul>
</li>
<ul>


CSS:
Код:

ul li ul {display: none}
ul li:hover ul, ul li ul:hover {display: block}


но это не работает в IE, если не применить хак - в CSS указываю ссылку на файл csshover.htc (с нета скачал), тогда в ИЕ работает.
Хотелось бы обойтись без хаков.

И можно ли сделать чтобы выпадающее меню появлялось не при наведении, а при клике на пункт меню?

Последний раз редактировалось: Petek (12/11/08 в 22:15), всего редактировалось 1 раз
цитата
11/11/08 в 13:35
 Domior
HTML:
Код:

<div id="list_content">
   <ul id="lists">
                  <li><a href="#" class="tl">Title<!--[if IE 7]><!--></a><!--<![endif]-->
                     <!--[if lte IE 6]><table><tr><td><![endif]-->
                  <div class="pos1">
                     <dl>
                        <dd><a href="#">Link</a></dd>
                        <dd><a href="#">Link</a></dd>
                     </dl>
                     <dl>
                        <dd><a href="#">Link</a></dd>
                        <dd><a href="#">Link</a></dd>
                     </dl>
                  </div>
                  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                  </li>
                  <li><a href="#" class="tl">Title2<!--[if IE 7]><!--></a><!--<![endif]-->
                     <!--[if lte IE 6]><table><tr><td><![endif]-->
                  <div class="pos1">
                     <dl>
                        <dd><a href="#">Link2</a></dd>
                        <dd><a href="#">Link2</a></dd>
                     </dl>
                     <dl>
                        <dd><a href="#">Link2</a></dd>
                        <dd><a href="#">Link2</a></dd>
                     </dl>
                  </div>
                  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                  </li>                  
               </ul>
</div>


CSS:
Код:

#list_content { position: relative; float: left; }
#lists {float: left; height: 50px;}
#lists li { width: 100px; float:left; list-style: none; padding-bottom: 30px; }
#lists li a.tl {width: 100px; text-transform: uppercase; height:45px; padding-bottom: 20px; }
#lists div {display:none;  }
.pos1 { z-index: 500; }
#lists li a:hover { white-space:normal; background-position:130px 15px;}
#lists li:hover > a { white-space:normal; background-position:130px 15px;}
#lists :hover div { display:block; width:240px; position:absolute; left:0; top:34px; border:1px solid #013034; }
#lists :hover div dl {display:inline; float:left; width:110px;}
#lists :hover div dl dd { margin-left: 5px; }
#lists :hover div dd a {display:block; text-decoration:none;  text-align: left; font-size: 1em; text-transform: none;}
#lists :hover div dd a:hover {text-decoration: underline;}


Конечно полностью без хаков обойтись тяжелоicon_smile.gif
Вот тебе еще пара ссылок на похожую реализацию:
вертикальное меню и горизонтальное.

И чтоб меню при клике выпадало - без js не обойдешься никак.
цитата
11/11/08 в 14:06
 Petek
Domior, сэнкс, будем разбираться, но код большой конечно, ещё и таблицы, смотрю, там какие-то )
цитата
12/11/08 в 22:14
 Petek
гуру css, помогайте! icon_smile.gif

короче, делаю выпадающее меню по своему варианту, решил сделать ссылки с display:block, в ИЕ проверяю, там 2 ошибки:

1. "Меню 2" и "Меню 3" - при наведении мышки бэкграунд меняется, но только, если наводить мышку на уровне текста и выше, ниже текста - нифига, хотя ссылка блоковая и в нормальных браузерах работает.

2. Выпадающее меню работает, но если навести мышку ниже "Подменю 1" исчезает.

Я уже заколебался варианты искать,
вот он пациент icon_smile.gif

porndiz.com/test/
цитата
12/11/08 в 23:46
 Mika
Видимо очередные глюки ИЕ с float'ом icon_smile.gif
Если размер верхних менюшек предполагается быть одинаковым, то задай фиксированную ширину в "div#topmenu a".
цитата
12/11/08 в 23:56
 Petek
Mika, спасибо, можно и так, хотя изначально предполагал разный размер делать
цитата
13/11/08 в 00:21
 erobrand
http://www.cssplay.co.uk/menus/final_drop.html


зы - а ёпт, это наверное и есть код Домиор. Ну ладно, погляди как оно в оригинале.
цитата
13/11/08 в 09:11
 Petek
Dizman© писал:
http://www.cssplay.co.uk/menus/final_drop.html


зы - а ёпт, это наверное и есть код Домиор. Ну ладно, погляди как оно в оригинале.

ага, там тоже с таблицами, не хочу усложнять )

короче, я указал фиксированную ширину для a в подменю, а главное может менять размеры,
проблема с наведением мышки ниже текста в Меню 2 и 3 правда не решилась, но подменю теперь не исчезает
цитата
13/11/08 в 23:42
 Mika
Petek писал:
проблема с наведением мышки ниже текста в Меню 2 и 3 правда не решилась, но подменю теперь не исчезает

Хм... странно, что не решилась. Только что проверил у себя - нормально меню подсвечается в ИЕ6.
цитата
14/11/08 в 09:28
 Petek
Mika писал:
Хм... странно, что не решилась. Только что проверил у себя - нормально меню подсвечается в ИЕ6.

хз, я тоже в ИЕ6 смотрел.

щас у меня тоже работает, но после того как я добавил для ИЕ правила
Код:

* html #topmenu a {
   float: left;
   }
* html div#topmenu ul li ul {
   clear: both
   }

я сделал для бэкграунда ссылки 2 картинки, чтоб они раздвигались при увеличении текста в ссылке меню, для этого внутрь ссылки поместил тег <b> (для привязки второго бэкграунда) и сделал его блоком, но ИЕ не видел тег <b> вообще, поэтому добавил верхние правила, после этого ИЕ увидел <b> и заодно проблема решилась, хотя может она раньше (в процессе переборки различных вариантов) решилась, я не проверял icon_smile.gif


Эта страница в полной версии