Раскрытие меню при наведении курсора

marianna9201 · May 16, 2015

Добрый день!

Есть одно приметное меню для сайта. Хотелось бы узнать, как реализовать в данном меню раскрытие дочерних пунктов не только при нажатии на родительский пункт, но и на при наведении курсора?

Вот пример меню: http://pcvector.net/uploads/demo/scripts/accordion/flat_menu_accordion/index.html

А вот и код:

HTML + JQuery

<!DOCTYPE><html><head>    <title>Flat accordion menu | pcvector.net</title>	<link rel="shortcut icon" href="/favicon.ico" />    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    <link href="style.css" rel="stylesheet" type="text/css" />	<style>		.demo_container{			margin:100px auto;			width:300px;		}	</style>    <script type="text/javascript">        $(document).ready(function () {			$('#cssmenu > ul > li ul').each(function(index, e){				var count = $(e).find('li').length;				var content = '<span class=\"cnt\">' + count + '</span>';				$(e).closest('li').children('a').append(content);			});			$('#cssmenu ul ul li:odd').addClass('odd');			$('#cssmenu ul ul li:even').addClass('even');			$('#cssmenu > ul > li > a').click(function() {				$('#cssmenu li').removeClass('active');				$(this).closest('li').addClass('active');					var checkElement = $(this).next();				if((checkElement.is('ul')) && (checkElement.is(':visible'))) {					$(this).closest('li').removeClass('active');					checkElement.slideUp('normal');				}				if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {					$('#cssmenu ul ul:visible').slideUp('normal');					checkElement.slideDown('normal');				}				if($(this).closest('li').find('ul').children().length == 0) {					return true;				} else {					return false;				}			});        });    </script></head><body><div class="topHeader">	<a class="backArticle" href="http://pcvector.net/scripts/accordion/444-flat-accordion-menu-vertikalnyy-akkordeon.html">Назад к статье >>></a></div><div class="demo_container">	<div id='cssmenu'>		<ul>			<li class='active'><a href='/'><span>Главная</span></a></li>			<li class='has-sub'><a href='#'><span>Каталог</span></a>				<ul>					<li><a href='#'><span>Смартфоны</span></a></li>					<li><a href='#'><span>Планшеты</span></a></li>					<li><a href='#'><span>Ноутбуки</span></a></li>				</ul>			</li>			<li class='has-sub'><a href='#'><span>О компании</span></a>				<ul>					<li><a href='#'><span>Сотрудники</span></a></li>					<li><a href='#'><span>Вакансии</span></a></li>				</ul>			</li>			<li><a href='#'><span>Контакты</span></a></li>		</ul>	</div></div>	<!-- pcvector.net --><script type="text/javascript" src="http://pcvector.net/templates/pcv/js/pcvector.js"></script><!-- /pcvector.net -->   </body></html>

CSS:

#cssmenu,#cssmenu ul,#cssmenu li,#cssmenu a {	margin: 0;	padding: 0;	border: 0;	list-style: none;	font-weight: normal;	text-decoration: none;	line-height: 1;	font-family:sans-serif,arial;	font-size: 14px;	position: relative;}#cssmenu a {	line-height: 1.3;}#cssmenu {	width: 250px;}#cssmenu > ul > li > a {	padding-right: 40px;	font-size: 25px;	font-weight: bold;	display: block;	background: #bd0e36;	color: #ffffff;	border-bottom: 1px solid #5e071b;	text-transform: uppercase;}#cssmenu > ul > li > a > span {	background: #ed1144;	padding: 10px;	display: block;	font-size: 13px;	font-weight: 300;}#cssmenu > ul > li > a:hover {	text-decoration: none;}#cssmenu > ul > li.active {	border-bottom: none;}#cssmenu > ul > li.active > a {	color: #fff;}#cssmenu > ul > li.active > a span {	background: #bd0e36;}#cssmenu span.cnt {	position: absolute;	top: 8px;	right: 15px;	padding: 0;	margin: 0;	background: none;}/* Sub menu */#cssmenu ul ul {	display: none;}#cssmenu ul ul li {	border: 1px solid #e0e0e0;	border-top: 0;}#cssmenu ul ul a {	padding: 10px;	display: block;	color: #ed1144;	font-size: 13px;}#cssmenu ul ul a:hover {	color: #bd0e36;}#cssmenu ul ul li.odd {	background: #f4f4f4;}#cssmenu ul ul li.even {	background: #fff;}

Заранее большое спасибо за подсказку!

afdw · May 16, 2015

http://codepen.io/anon/pen/doXXOY

antonKar · May 17, 2015

https://api.jquery.com/mouseenter/

Sign In

Раскрытие меню при наведении курсора

Question

marianna9201

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

afdw

Link to comment

Share on other sites

antonKar

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information