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



 

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

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

Открыть тему
Тема закрыта
> Помоги изменить меню!
zheka147
zheka147
Topic Starter сообщение 14.11.2013, 17:07; Ответить: zheka147
Сообщение #1


Добро времени суток!
Признаться я очень далек в написание кода css. Да и собственно, у меня всего один вопрос, где прошу помочь Вас мне.
Вот есть код раздвижного меню (прилагается ниже), но это меню раздвигается при наведение,что в целом бывает не совсем удобно. Как сделать так,чтобы данное меню раздвигалось при клике?

<head>
<title>Раздвигающееся меню CSS</title>
<meta http-equiv=content-type content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h2><a href="http://infohousework.ru">Раздвигающееся вертикальное меню CSS</a></h2><br />
<ul id="nav_menu_css">
<li><span>Просто</span>
<ul>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
</ul>
</li>
<li><span>Добавьте</span>
<ul>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
</ul>
</li>
<li><span>Свои Ссылки</span>
<ul>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
</ul>
</li>
</ul>
</body>
</html>


[CSS]*{
margin:0;
padding:0;
behavior: url(ie-css3.htc)
}

body{
background-color:#fff
}

#nav_menu_css{
border:#aaa 1px solid;
margin-left:100px;
width:240px;
border-radius:8px;
box-shadow:0 0 5px #666
}

#nav_menu_css a{
color:#565656;
display:block;
font:12px/1.18 georgia,arial,helvetica,serif;
margin-top:3px;
padding:0 3px 3px 10px;
position:relative;
text-decoration:none
}

#nav_menu_css a:hover{
color:#c50
}

#nav_menu_css li{
cursor:pointer;
font:bold 12px/1.18 georgia,arial,helvetica,serif;
list-style-type:none;
padding:0
}

#nav_menu_css li span{
display:block;
height:25px;
padding:5px 3px 0 20px;
border-bottom:1px solid #4100FF;
background:#FF5300;
margin-bottom:2px
}

#nav_menu_css li:first-child >span{
border-top-left-radius:8px;
border-top-right-radius:8px
}

#nav_menu_css li:last-child >span{
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
margin-bottom:-2px
}

#nav_menu_css li ul{
border:#eee 3px solid;
display:none;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px
}

#nav_menu_css li li{
cursor:pointer;
margin:2px;
padding:1px;
border-bottom:1px dashed #FF6B00
}

#nav_menu_css li:hover:first-child>span{
background:#FF8100;
color:#905;
border-top-left-radius:8px;
border-top-right-radius:8px
}

#nav_menu_css li li:hover{
background:#FFD6AE;
color:#905;
border-bottom:1px dashed #FF6B00
}

#nav_menu_css li span:hover{
background:#FF8100;
color:#905
}

#nav_menu_css li:hover ul{
background:#fff;
display:block
}

#nav_menu_css li:hover ul{
margin:0;
padding:1px
}[/CSS]
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Degradator
Degradator
сообщение 14.11.2013, 18:50; Ответить: Degradator
Сообщение #2


удалить половину CSS и запилить на JS. Но если вы далеки от CSS, то что-то мне подсказывает что от JS вы еще дальше. Вобще, главное тут - зачем? Половина #username# не догадается что надо кликать для того чтобы открыть меню до того момента как кликнет.

PS. За появление менюшек отвечают стили с суффиксом :hover.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Den1xxx
Den1xxx
сообщение 14.11.2013, 20:26; Ответить: Den1xxx
Сообщение #3


(zheka147 @ 14.11.2013, 20:07) *
Вот есть код раздвижного меню


Простой аккордеон на jQuery №1


Простой аккордеон на jQuery №2


Простой аккордеон на jQuery №3
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
zheka147
zheka147
Topic Starter сообщение 14.11.2013, 21:44; Ответить: zheka147
Сообщение #4


Безмерно Вам благодарен!А нас счет вопроса "за чем?"...мне кажется,что такое меню (открытие при наведение курсора), отпугивает #username#:rolleyes:
Den1xxx, поставлю третий, аккордеон. Спасибо!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Den1xxx
Den1xxx
сообщение 14.11.2013, 21:53; Ответить: Den1xxx
Сообщение #5


(zheka147 @ 15.11.2013, 00:44) *
Den1xxx, поставлю третий, аккордеон. Спасибо!

Незачто. Это были эксперименты написать что-то очень простое, но в то же время эффективное.
Насчет «открываний по клику» обратите внимание на такое рассуждение:
В аналогичном решении я уже указывал, что в идеале ссылки подкатегории должны открываться при наведении на надкатегорию, а не при клике на ней. Потому что сама родительская категория тоже может иметь ссылку, и эта ссылка при клике не отработает (ведь на неё навесим действие открытия подкатегории, а переход по ссылке придется отменить).
А так конечно можно что угодно натворить. Но я, повторюсь, за семантику — ссылка при клике должна осуществлять переход, а не открытие подменю.

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как изменить цветовую гамму основного шаблона?
1 partua 8140 13.11.2021, 1:40
автор: Silverspam
Открытая тема (нет новых ответов) Изменить сайт, дизайн, текст.
3 Petechka 2262 15.8.2019, 9:35
автор: Димон98
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПеренести меню
1 Викторио_mw 1452 28.8.2018, 0:10
автор: TimurR
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыИзменить шаблон, сместить элементы bootstrap
1 Nemo 3242 16.4.2018, 23:30
автор: gruz333
Открытая тема (нет новых ответов) изменить дизайн сайта
на вордпрессе
2 maestra 2813 22.1.2018, 15:43
автор: Mr_SMO


 



RSS Текстовая версия Сейчас: 30.3.2024, 2:16
Дизайн