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

(Ответов: 10, Просмотров: 4869)
Страница 1 из 2 12 Последняя
  1. Опытный
    • Регистрация: 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
  2. Banned Аватар для Norton
    • Регистрация: 03.05.2013
    • Сообщений: 150
    • Репутация: 1
    Вы уже задавали такой вопрос Раздвижное меню на WordPress зачем новую тему создавать?
    • -1
  3. Опытный
    • Регистрация: 06.08.2013
    • Сообщений: 307
    • Репутация: 5
    Norton,Здесь более понятная постановка вопроса, название темы.

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

    SergeyNetIt, Вы б лучше с ответом помогли, чем критиковать. Уже неделю не могу найти решение
    • -4
  4. Banned Аватар для Norton
    • Регистрация: 03.05.2013
    • Сообщений: 150
    • Репутация: 1
    Я не знаю
    Последний раз редактировалось Norton; 12.11.2013 в 14:40.
    • -3
  5. Опытный
    • Регистрация: 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
  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
  7. Опытный
    • Регистрация: 06.08.2013
    • Сообщений: 307
    • Репутация: 5
    Rlove,а как сделать, чтобы обратно при щелчке меню закрывалось. Ну этот способ мне не подходит. Я не смогу вставить tabindex в ссылку, меню же регенерирует Вордпрессом автоматически или все-таки можно. Я свой код привел упрощенным в отличии от Wordpres. Смысл тот же остается.
    • 0
  8. Разработка любых сайтов Аватар для ArhStrAngeR
    • Регистрация: 08.06.2011
    • Сообщений: 3,376
    • Записей в дневнике: 1
    • Репутация: 2506
    SergeyNetIt,по клику присваиваете класс display:block; по второму клику - убираете этот класс. По умолчанию загоняете подменю в display:none; Проще всего сделать через jquery.
    • 0
  9. Опытный
    • Регистрация: 06.08.2013
    • Сообщений: 307
    • Репутация: 5
    ArhStrAngeR,напишите плиз реализацию через jquery пожалуйста, очень нужно. Уже неделю не могу реализовать
    • 0
  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
Страница 1 из 2 12 Последняя

Похожие темы

Темы Раздел Ответов Последний пост
Отслеживание переходов и действий при клике по баннеру
Вопросы от новичков 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

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

Вы можете попросить инвайт у любого модератора:

Информеры