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


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

  • Фотография Ixman
    #2

    Ixman (o5cat.ru)
    Очков активности: 105 0 тем, 10 сообщений, 7 баллов репутации

  • Фотография WGN
    #3

    WGN (worldgamenews.com)
    Очков активности: 81 Вне конкурса за определение пользователя месяца

  • Фотография magnet
    #4

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #5

    BLIK
    Очков активности: 36 Вне конкурса за определение пользователя месяца

  • Фотография Developer
    #6

    Developer
    Очков активности: 33 2 темы, 16 сообщений, 1 балл репутации

  • Фотография AnnaYa
    #7

    AnnaYa (topbase.ru)
    Очков активности: 33 2 темы, 5 сообщений, 2 балла репутации

  • Фотография TimurR
    #8

    TimurR
    Очков активности: 31.5 Вне конкурса за определение пользователя месяца

  • Фотография Алексей111
    #9

    Алексей111
    Очков активности: 28.5 5 тем, 4 сообщения, 1 балл репутации

  • Фотография Игорь Ку
    #10

    Игорь Ку (dudesday.ru)
    Очков активности: 24 1 тема, 5 сообщений, 2 балла репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 24.09.2018
Топ 5 участников по репутации


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

#1 Dolfik

Dolfik
  • Неактивные
  • 4 сообщений
  • Репутация: 0
1

Отправлено 20 May 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
  • Модератор
  • 1127 сообщений
  • Репутация: 189

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

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

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#3 yury

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

Отправлено 21 May 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 May 2013 - 00:20

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

Спойлер

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


  • 0

#5 Dolfik

Dolfik
    Topic Starter
  • Неактивные
  • 4 сообщений
  • Репутация: 0

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

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

#6 Dolfik

Dolfik
    Topic Starter
  • Неактивные
  • 4 сообщений
  • Репутация: 0

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

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



Похожие темы

  Название темы Автор Статистика Последнее сообщение

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