Выпадание подменю при клике на меню

**SergeyNetIt** · 12.11.2013 13:37

Есть такой код:

Код:

 Код HTML: <!doctype html> <html> <head> <title>Privet</title> <meta charset="utf-8"> <style type="text/css">
		#menu{
			width:85px;
		}
		#menu li{
			 list-style:none;
			 text-align:center;
			 line-height:20px;
		}
		#menu li a{
			width:85px;
			height:20px;
			display:block;
			background:#fdf;
			padding:10px;	
		}
		#menu li a:hover{
			background:#ffd;
		}
		#menu li ul{
			display:none;
		}
		#menu li:hover ul{
			width:200px;
			display:block;
		}
	</style> </head> <body> <ul id="menu"> <li><a href="http://javasript:void(0)">Windows</a> <ul> <li><a href="#">windows1</a></li> <li><a href="#">windows2</a></li> <li><a href="#">windows3</a></li> <li><a href="#">windows4</a></li> </ul> </li> <li><a href="#">Софт</a></li> <li><a href="#">Проги</a></li> <li><a href="#">Винчестер</a></li> <li><a href="#">Антивирусы</a></li> </ul> </body> </html>

Как реализовать открытие подменю при щелчке на меню Windows?

**~~Norton~~** · 12.11.2013 13:39

Вы уже задавали такой вопрос Раздвижное меню на WordPress зачем новую тему создавать?

**SergeyNetIt** · 12.11.2013 13:43

Norton,Здесь более понятная постановка вопроса, название темы.

---------- Сообщение добавлено 10:43 ---------- Предыдущее 10:42 ----------

SergeyNetIt, Вы б лучше с ответом помогли, чем критиковать. Уже неделю не могу найти решение

**~~Norton~~** · 12.11.2013 14:36

Я не знаю

**SergeyNetIt** · 12.11.2013 14:36

SergeyNetIt, Что не так в этом коде, не работает при нажатии:

Код HTML:

<!doctype html> <html> <head> <title>Privet</title> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-1.10.1.min.js">
	$(document).ready(function () {

	$('.nn').toggle(function ( e ) {
    e.preventDefault();
    $('.sdff').show();
	}, function ( e ) {
    e.preventDefault();
    $('.sdff').hide();
	});
	$('.sdff').hide();
});
		
		</script> <style type="text/css">
		#menu{
			width:85px;
		}
		#menu li{
			 list-style:none;
			 text-align:center;
			 line-height:20px;
		}
		#menu li ul{
			display:none;
		}
	</style> </head> <body> <ul id="menu"> <li><a href="#" class="nn">Windows</a> <ul class="sdff"> <li><a href="#">windows1</a></li> <li><a href="#">windows2</a></li> <li><a href="#">windows3</a></li> <li><a href="#">windows4</a></li> </ul> </li> <li><a href="#">Софт</a></li> <li><a href="#">Проги</a></li> <li><a href="#">Винчестер</a></li> <li><a href="#">Антивирусы</a></li> </ul> </body> </html>

**Rlove** · 12.11.2013 15:33

SergeyNetIt,

Код HTML:

<!doctype html> <html> <head> <title>Privet</title> <meta charset="utf-8"> <style type="text/css">
#menu{width:85px;}
#menu li{list-style:none;text-align:center;line-height:20px;}
#menu li a{width:85px;height:20px;display:block;background:#fdf;padding:10px;}
#menu li a:hover{background:#ffd;}
.sub-menu {display: none;}
.main-item:focus ~ .sub-menu, .main-item:active ~ .sub-menu, .sub-menu:hover {display: block;}
</style> </head> <body> <ul id="menu"> <li><a class="main-item" href="javascript:void(0);" tabindex="1">Windows</a> <ul class="sub-menu"> <li><a href="#">windows1</a></li> <li><a href="#">windows2</a></li> <li><a href="#">windows3</a></li> <li><a href="#">windows4</a></li> </ul></li> <li><a href="#">Софт</a></li> <li><a href="#">Проги</a></li> <li><a href="#">Винчестер</a></li> <li><a href="#">Антивирусы</a></li></ul> </body></html>

**SergeyNetIt** · 12.11.2013 16:51

Rlove,а как сделать, чтобы обратно при щелчке меню закрывалось. Ну этот способ мне не подходит. Я не смогу вставить tabindex в ссылку, меню же регенерирует Вордпрессом автоматически или все-таки можно. Я свой код привел упрощенным в отличии от Wordpres. Смысл тот же остается.

**ArhStrAngeR** · 12.11.2013 17:01

SergeyNetIt,по клику присваиваете класс display:block; по второму клику - убираете этот класс. По умолчанию загоняете подменю в display:none; Проще всего сделать через jquery.

**SergeyNetIt** · 12.11.2013 17:05

ArhStrAngeR,напишите плиз реализацию через jquery пожалуйста, очень нужно. Уже неделю не могу реализовать

**Rlove** · 13.11.2013 00:04

SergeyNetIt,

Код HTML:

<!doctype html> <html> <head> <title>Privet</title> <meta charset="utf-8"> <style type="text/css">
		.menu{
			width:85px;
		}
		.menu li{
			 list-style:none;
			 text-align:center;
			 line-height:20px;
		}
		.menu li a{
			width:85px;
			height:20px;
			display:block;
			background:#fdf;
			padding:10px;	
		}
		.menu li a:hover{
			background:#ffd;
		}
		.sub-menu{
			display:none;
		}
		.active{
			width:200px;
			display:block;
		}
		
	</style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script> <script>
$(document).ready(function(){
	$(".list1").click(function(){
		$(".sub-menu").toggleClass("active"); return false;
	});
});
</script> </head> <body> <ul class="menu"> <li class="list1"><a href="#">Windows</a> <ul class="sub-menu"> <li><a href="#">windows1</a></li> <li><a href="#">windows2</a></li> <li><a href="#">windows3</a></li> <li><a href="#">windows4</a></li></ul></li> <li><a href="#">Софт</a></li> <li><a href="#">Проги</a></li> <li><a href="#">Винчестер</a></li> <li><a href="#">Антивирусы</a></li> </ul> </body> </html>

Wordpress сам присваивает класс "sub-menu" для вложенных списков, так что пробелм с интеграцией быть не должно

	12.11.2013 13:37 #1
SergeyNetIt Опытный Регистрация: 06.08.2013 Сообщений: 307 Репутация: 5	Есть такой код: Код: Код HTML: <!doctype html> <html> <head> <title>Privet</title> <meta charset="utf-8"> <style type="text/css"> #menu{ width:85px; } #menu li{ list-style:none; text-align:center; line-height:20px; } #menu li a{ width:85px; height:20px; display:block; background:#fdf; padding:10px; } #menu li a:hover{ background:#ffd; } #menu li ul{ display:none; } #menu li:hover ul{ width:200px; display:block; } </style> </head> <body> <ul id="menu"> <li><a href="http://javasript:void(0)">Windows</a> <ul> <li><a href="#">windows1</a></li> <li><a href="#">windows2</a></li> <li><a href="#">windows3</a></li> <li><a href="#">windows4</a></li> </ul> </li> <li><a href="#">Софт</a></li> <li><a href="#">Проги</a></li> <li><a href="#">Винчестер</a></li> <li><a href="#">Антивирусы</a></li> </ul> </body> </html> Как реализовать открытие подменю при щелчке на меню Windows? Последний раз редактировалось SergeyNetIt; 12.11.2013 в 13:40.
-2 SergeyNetIt

	12.11.2013 13:39 #2
~~Norton~~ Banned Регистрация: 03.05.2013 Сообщений: 150 Репутация: 1	Вы уже задавали такой вопрос Раздвижное меню на WordPress зачем новую тему создавать?
-1 Norton

	12.11.2013 13:43 #3
SergeyNetIt Опытный Регистрация: 06.08.2013 Сообщений: 307 Репутация: 5	Norton,Здесь более понятная постановка вопроса, название темы. ---------- Сообщение добавлено 10:43 ---------- Предыдущее 10:42 ---------- SergeyNetIt, Вы б лучше с ответом помогли, чем критиковать. Уже неделю не могу найти решение
-4 SergeyNetIt

	12.11.2013 14:36 #4
~~Norton~~ Banned Регистрация: 03.05.2013 Сообщений: 150 Репутация: 1	Я не знаю Последний раз редактировалось Norton; 12.11.2013 в 14:40.
-3 Norton

	12.11.2013 14:36 #5
SergeyNetIt Опытный Регистрация: 06.08.2013 Сообщений: 307 Репутация: 5	SergeyNetIt, Что не так в этом коде, не работает при нажатии: Код HTML: <!doctype html> <html> <head> <title>Privet</title> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-1.10.1.min.js"> $(document).ready(function () { $('.nn').toggle(function ( e ) { e.preventDefault(); $('.sdff').show(); }, function ( e ) { e.preventDefault(); $('.sdff').hide(); }); $('.sdff').hide(); }); </script> <style type="text/css"> #menu{ width:85px; } #menu li{ list-style:none; text-align:center; line-height:20px; } #menu li ul{ display:none; } </style> </head> <body> <ul id="menu"> <li><a href="#" class="nn">Windows</a> <ul class="sdff"> <li><a href="#">windows1</a></li> <li><a href="#">windows2</a></li> <li><a href="#">windows3</a></li> <li><a href="#">windows4</a></li> </ul> </li> <li><a href="#">Софт</a></li> <li><a href="#">Проги</a></li> <li><a href="#">Винчестер</a></li> <li><a href="#">Антивирусы</a></li> </ul> </body> </html>
-1 SergeyNetIt

Выпадание подменю при клике на меню

Опции темы

Тэги топика:

Похожие темы

Отслеживание переходов и действий при клике по баннеру

копирование ссылки при клике

Вид меню категорий Virtuemart нужно заменить на вид меню Joomla

Как сделать так, чтобы при клике на кнопку разворачивалась информация?

Тем:

Сообщений:

Пользователей:

Сейчас на сайте:

Вход

Сайт

Разделы

Прочее

Следите за нами

Витрина ссылок

У нас проходит

У кого попросить инвайт?

Золотые темы форума

Последние новости

Популярные темы

Информеры

	12.11.2013 15:33 #6
Rlove Дипломник Регистрация: 12.11.2013 Сообщений: 175 Репутация: 93 Webmoney BL: ?	SergeyNetIt, Код HTML: <!doctype html> <html> <head> <title>Privet</title> <meta charset="utf-8"> <style type="text/css"> #menu{width:85px;} #menu li{list-style:none;text-align:center;line-height:20px;} #menu li a{width:85px;height:20px;display:block;background:#fdf;padding:10px;} #menu li a:hover{background:#ffd;} .sub-menu {display: none;} .main-item:focus ~ .sub-menu, .main-item:active ~ .sub-menu, .sub-menu:hover {display: block;} </style> </head> <body> <ul id="menu"> <li><a class="main-item" href="javascript:void(0);" tabindex="1">Windows</a> <ul class="sub-menu"> <li><a href="#">windows1</a></li> <li><a href="#">windows2</a></li> <li><a href="#">windows3</a></li> <li><a href="#">windows4</a></li> </ul></li> <li><a href="#">Софт</a></li> <li><a href="#">Проги</a></li> <li><a href="#">Винчестер</a></li> <li><a href="#">Антивирусы</a></li></ul> </body></html>
0 Rlove

	12.11.2013 16:51 #7
SergeyNetIt Опытный Регистрация: 06.08.2013 Сообщений: 307 Репутация: 5	Rlove,а как сделать, чтобы обратно при щелчке меню закрывалось. Ну этот способ мне не подходит. Я не смогу вставить tabindex в ссылку, меню же регенерирует Вордпрессом автоматически или все-таки можно. Я свой код привел упрощенным в отличии от Wordpres. Смысл тот же остается.
0 SergeyNetIt

	12.11.2013 17:01 #8
ArhStrAngeR Разработка любых сайтов Регистрация: 08.06.2011 Сообщений: 3,375 Записей в дневнике: 1 Репутация: 2506	SergeyNetIt,по клику присваиваете класс display:block; по второму клику - убираете этот класс. По умолчанию загоняете подменю в display:none; Проще всего сделать через jquery. Разработка сайтов любой сложности! Ультрабыстрые SSD VPS по смешным ценам(промокод VPS - дает скидку 25%)
0 ArhStrAngeR

	12.11.2013 17:05 #9
SergeyNetIt Опытный Регистрация: 06.08.2013 Сообщений: 307 Репутация: 5	ArhStrAngeR,напишите плиз реализацию через jquery пожалуйста, очень нужно. Уже неделю не могу реализовать
0 SergeyNetIt

	13.11.2013 00:04 #10
Rlove Дипломник Регистрация: 12.11.2013 Сообщений: 175 Репутация: 93 Webmoney BL: ?	SergeyNetIt, Код HTML: <!doctype html> <html> <head> <title>Privet</title> <meta charset="utf-8"> <style type="text/css"> .menu{ width:85px; } .menu li{ list-style:none; text-align:center; line-height:20px; } .menu li a{ width:85px; height:20px; display:block; background:#fdf; padding:10px; } .menu li a:hover{ background:#ffd; } .sub-menu{ display:none; } .active{ width:200px; display:block; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ $(".list1").click(function(){ $(".sub-menu").toggleClass("active"); return false; }); }); </script> </head> <body> <ul class="menu"> <li class="list1"><a href="#">Windows</a> <ul class="sub-menu"> <li><a href="#">windows1</a></li> <li><a href="#">windows2</a></li> <li><a href="#">windows3</a></li> <li><a href="#">windows4</a></li></ul></li> <li><a href="#">Софт</a></li> <li><a href="#">Проги</a></li> <li><a href="#">Винчестер</a></li> <li><a href="#">Антивирусы</a></li> </ul> </body> </html> Wordpress сам присваивает класс "sub-menu" для вложенных списков, так что пробелм с интеграцией быть не должно Последний раз редактировалось Rlove; 13.11.2013 в 00:12.
0 Rlove

Темы	Раздел	Ответов	Последний пост
Отслеживание переходов и действий при клике по баннеру	Вопросы от новичков	9	25.10.2013 01:30
копирование ссылки при клике	Web программирование	2	17.05.2013 16:40
Вид меню категорий Virtuemart нужно заменить на вид меню Joomla	Вопросы от новичков	2	21.11.2011 21:31
Как сделать так, чтобы при клике на кнопку разворачивалась информация?	Софт, скрипты, сервисы	2	08.11.2010 00:03