Перейти к содержимому



Выпадающее меню

#1 Dolfik

Dolfik
  • Пользователь
  • 4 сообщений
  • Репутация: 0
1

Отправлено 20 Май 2013 - 18:02

Не получается сделать выпадающее меню, в теории знаю как, но на практике ничего не работает, получилось только скрыть второй пункт, как сделать, чтобы при наведении, сбоку появлялись пункты?
HTML
<div id="hmenu">
    <ul>
	    <li><a href="#" id="active">Главная</a></li>
	    <li><a href="pages/bike.html">Велосипеды</a></li>
	    <ul>
		    <li><a href="pages/contacts">Контакты</a></li>
	    </ul>
	    <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>
CSS
#hmenu ul {
    display:block;
    width:260px;
    border:0;
    font-weight:normal;
    font-size:10pt;
    font-family:Arial;
    height:20px;
    line-height:20px;
    width:253px;
    margin:0;
    padding:0;
    padding-left:4px;
}

#hmenu li {
    display:block;
    list-style-type:none;
    background:#1d5371;
    border-bottom:2px solid #000000;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -khtml-border-radius:5px;
}

#hmenu a {
    display:block;
    padding:6px;
    padding-bottom:7px;
    color:#c8c8c8;
    text-decoration:none;
}

#hmenu a:hover {
    display:block;
    width:230px;
    padding:7px;
    color:#FFFFFF;
    padding-top:7px;
    padding-bottom:8px;
    text-decoration:none;
    padding-left:16px;
    line-height:18px;
    background:#247cab;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -khtml-border-radius:5px;
}

#hmenu a#active {
    display:block;
    border-top:2px solid #39d6dd;
    padding:6px;
    padding-top:5px;
    padding-bottom:5px;
    color:#FFFFFF;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -khtml-border-radius:5px;
    font-weight:bold;
    text-decoration:none;
}
    #hmenu a#active:hover {
    display:block;
    width:240px;
    border-top:2px solid #39d6dd;
    padding:6px;
    padding-top:5px;
    padding-bottom:7px;
    color:#FFFFFF;
    border-top:2px solid #39d6dd;
    text-decoration:none;
    background:#247cab
}
#hmenu ul ul {
    display: none;
    position: absolute;
}
#hmenu li a:hover {
    display: block;
}

 

 

  • 0

#2 fedornabilkin

fedornabilkin
  • Пользователь
  • 696 сообщений
  • Репутация: 91

Отправлено 21 Май 2013 - 09:43

Вот посмотри хороший пример http://plohoneponyal...or-menu-din.php
Только там с кодировкой что-то не так. Бесконечное количество вложенных подменю.
Код из страницы можно взять.
  • 2
Как часто в горестной разлуке,В моей блуждающей судьбе, ФО, я думал о тебе.


#3 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 21 Май 2013 - 22:24

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

Для вертикального 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 не получится.
  • 1

#4 Dolfik

Dolfik
    Topic Starter
  • Пользователь
  • 4 сообщений
  • Репутация: 0

Отправлено 22 Май 2013 - 00:20

Спасибо большое, у меня немного получилось сделать, но вылезло пару багов

Спойлер

На скриншоте видно, что пункт вылазит под основным блоком, еще не реагирует на padding-bottom и padding-top (последний с отрицательным значением).
HTML, CSS
Еще один баг обнаружил, в верхнем меню хаос.


  • 0

#5 Dolfik

Dolfik
    Topic Starter
  • Пользователь
  • 4 сообщений
  • Репутация: 0

Отправлено 22 Май 2013 - 19:01

C выравниванием разобрался, не получается сделать поверх всех блоков, на z-index не реагирует
  • 0

#6 Dolfik

Dolfik
    Topic Starter
  • Пользователь
  • 4 сообщений
  • Репутация: 0

Отправлено 22 Май 2013 - 20:28

Решил проблему :) Если кому инетерсно, я установил позиционирование блокам, получалось так, что меню выводилось под блок из за opacity, перед ним я поставил z-index:-1; и в стилях меню прописал z-index:1; и все стало нормально :)
  • 0


Оформление форума – IPBSkins.ru