X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Выпадающее меню
Dolfik
Dolfik
Topic Starter сообщение 20.5.2013, 19:02; Ответить: Dolfik
Сообщение #1


Не получается сделать выпадающее меню, в теории знаю как, но на практике ничего не работает, получилось только скрыть второй пункт, как сделать, чтобы при наведении, сбоку появлялись пункты?
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
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
fedornabilkin
fedornabilkin
сообщение 21.5.2013, 10:43; Ответить: fedornabilkin
Сообщение #2


Вот посмотри хороший пример http://plohoneponyal.ru/work/hor-menu-din.php
Только там с кодировкой что-то не так. Бесконечное количество вложенных подменю.
Код из страницы можно взять.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
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
Dolfik
Topic Starter сообщение 22.5.2013, 1:20; Ответить: Dolfik
Сообщение #4


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

XUfGcf9.jpg

На скриншоте видно, что пункт вылазит под основным блоком, еще не реагирует на padding-bottom и padding-top (последний с отрицательным значением).
HTML, CSS
Еще один баг обнаружил, в верхнем меню хаос.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Dolfik
Dolfik
Topic Starter сообщение 22.5.2013, 20:01; Ответить: Dolfik
Сообщение #5


C выравниванием разобрался, не получается сделать поверх всех блоков, на z-index не реагирует
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Dolfik
Dolfik
Topic Starter сообщение 22.5.2013, 21:28; Ответить: Dolfik
Сообщение #6


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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПеренести меню
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-


 



RSS Текстовая версия Сейчас: 19.3.2024, 9:36
Дизайн