Как изменить функцию работы меню?

265
23 апреля 2017, 00:02

Добрый день! У меня есть скрипт меню. На пк меню работает при наведении мышкой. На мобильных устройствах субкатегории появляются при нажатии на нужную категорию. Как можно сделать, чтобы и на пк субкатегории выпадали не при наведении, а при нажатии? Благодарю!

(function($) { 
$.fn.menumaker = function(options) {   
	var menu = $(this), settings = $.extend({ 
		format: "dropdown", 
		sticky: false 
	}, options); 
	return this.each(function() { 
$(this).find(".menu-button").on('click', function(){ 
$(this).toggleClass('menu-opened'); 
	var mainmenu = $(this).next('ul'); 
	if (mainmenu.hasClass('open')) {  
		mainmenu.slideToggle().removeClass('open'); 
	} 
	else { 
		mainmenu.slideToggle().addClass('open'); 
	if (settings.format === "dropdown") { 
		mainmenu.find('ul').show(); 
	} 
	} 
}); 
	menu.find('li ul').parent().addClass('has-sub'); 
multiTg = function() { 
	menu.find(".has-sub").prepend('<span class="submenu-button"></span>'); 
	menu.find('.submenu-button').on('click', function() { 
$(this).toggleClass('submenu-opened'); 
	if ($(this).siblings('ul').hasClass('open')) { 
$(this).siblings('ul').removeClass('open').slideToggle(); 
	} 
	else { 
$(this).siblings('ul').addClass('open').slideToggle(); 
	} 
	}); 
}; 
	if (settings.format === 'multitoggle') multiTg(); 
	else menu.addClass('dropdown'); 
	if (settings.sticky === true) menu.css('position', 'fixed'); 
resizeFix = function() { 
	var mediasize = 1000; 
	if ($( window ).width() > mediasize) { 
		menu.find('ul').show(); 
	} 
	if ($(window).width() <= mediasize) { 
		menu.find('ul').hide().removeClass('open'); 
	} 
}; 
/*resizeFix(); 
return $(window).on('resize', resizeFix);*/ 
}); 
}; 
})(jQuery); 
 
(function($){ 
$(document).ready(function(){ 
$("#menu").menumaker({ 
	format: "multitoggle" 
}); 
}); 
})(jQuery);
.navigation-bar { 
	position: relative; 
	width: 100%; 
	background-color: #f1f1f1; 
	margin-bottom: 30px; 
	border-bottom: 1px solid #e5e5e5; 
} 
#menu { 
	position: relative; 
	width: 100%; 
	font-size: 12px; 
	font-weight: bold; 
	z-index: 1; 
} 
#menu, 
#menu ul, 
#menu ul li, 
#menu ul li a, 
#menu #head-mobile { 
	display: block; 
	position: relative; 
	line-height: 1; 
} 
#menu:after, 
#menu > ul:after { 
	content: "."; 
	display: block; 
	clear: both; 
	visibility: hidden; 
	line-height: 0; 
	height: 0; 
} 
#menu #head-mobile { 
	display: none; 
} 
#menu > ul > li { 
	float: left; 
	width: 190px; 
	border-right: 1px solid #eaeaea; 
	cursor: pointer; 
	padding: 0 17px; 
	line-height: 49px; 
	text-align: center; 
	color: #333; 
} 
#menu > ul > li > a { 
	line-height: 49px; 
	color: #333; 
} 
#menu > ul > li:hover > a, 
#menu ul li.active a { 
	color: #333; 
} 
#menu > ul > li:hover, 
#menu ul li.active:hover, 
#menu ul li.has-sub .active:hover { 
	background: #ffffff; 
	-webkit-transition: background .3s ease; 
	-moz-transition: background .3s ease; 
	-ms-transition: background .3s ease; 
	-o-transition: background .3s ease; 
	transition: background .3s ease; 
} 
#menu .active, 
#menu a.active { 
	color: #da251e; 
} 
#menu .active-ico { 
	position: absolute; 
	bottom: 0; 
	margin-left: 50%; 
	left: -8px; 
	margin-bottom: -1px; 
	border: 8px solid transparent; 
	border-bottom: 10px solid #ccc; 
	width: 0; 
	height: 0; 
} 
#menu .active-ico-f { 
	position: absolute; 
	bottom: 0; 
	margin-left: 50%; 
	left: -7px; 
	margin-bottom: -1px; 
	border: 7px solid transparent; 
	border-bottom: 9px solid #fff; 
	width: 0; 
	height: 0; 
} 
#menu > ul > li:hover .active-ico, 
#menu > ul > li:hover .active-ico-f { 
	display: none; 
} 
#menu > ul > li.has-sub > a { 
	padding-right:30px; 
} 
#menu > ul > li.has-sub > a:after { 
	content: ''; 
	display: block; 
	position: absolute; 
	top: 22px; 
	right: 11px; 
	width: 8px; 
	height: 2px; 
	background: #333; 
} 
#menu > ul > li.has-sub > a:before { 
	content: ''; 
	display: block; 
	position: absolute; 
	top: 19px; 
	right: 14px; 
	width: 2px; 
	height: 8px; 
	background: #333; 
	-webkit-transition: all .25s ease; 
	-moz-transition: all .25s ease; 
	-ms-transition: all .25s ease; 
	-o-transition: all .25s ease; 
	transition: all .25s ease; 
} 
#menu > ul > li.has-sub:hover > a:before { 
	top: 23px; 
	height: 0; 
} 
#menu ul ul { 
	position: absolute; 
	left: 0; 
	border: 1px solid #e5e5e5; 
	background: #fff; 
} 
#menu ul ul li { 
	display: none; 
	height: 35px; 
	background: #fff; 
} 
#menu li:hover > ul li { 
} 
#menu li:hover > ul { 
	left: 0; 
} 
#menu li:hover > ul > li { 
	height: 35px; 
} 
#menu ul ul ul { 
	margin-left: 100%; 
	top: 0; 
	margin-top: -1px; 
	background: #fff; 
} 
#menu ul ul li a { 
	border-bottom: 1px solid rgba(150,150,150,0.15); 
	padding: 11px 7px; 
	width: 187px; 
	text-decoration: none; 
	color: #33363b; 
} 
#menu ul ul li:last-child > a, 
#menu ul ul li.last-item > a { 
	border-bottom: 0; 
} 
#menu ul ul li:hover > a, 
#menu ul ul li a:hover { 
	color:#006faf; 
} 
#menu ul ul li.has-sub > a:after { 
	content: ''; 
	display: block; 
	position: absolute; 
	top: 16px; 
	right: 2px; 
	width: 8px; 
	height: 2px; 
	background: #e5e5e5; 
} 
#menu ul ul li.has-sub > a:before { 
	content: ''; 
	display: block; 
	position: absolute; 
	top: 13px; 
	right: 5px; 
	width: 2px; 
	height: 8px; 
	background: #e5e5e5; 
	-webkit-transition: all .25s ease; 
	-moz-transition: all .25s ease; 
	-ms-transition: all .25s ease; 
	-o-transition: all .25s ease; 
	transition: all .25s ease; 
} 
#menu ul ul > li.has-sub:hover > a:before { 
	top: 17px; 
	height: 0; 
} 
#menu ul ul li:hover, 
#menu ul ul li.has-sub:hover, 
#menu ul li.has-sub ul li.has-sub ul li:hover, 
#menu ul ul li.active a:hover { 
	background-color: #f1f1f1; 
} 
#menu ul ul ul li.active a { 
	border-left: none; 
} 
#menu > ul > li.has-sub > ul > li.active > a, 
#menu > ul ul > li.has-sub > ul > li.active> a { 
	border-top: none; 
} 
 
@media screen and (max-width: 1000px) { 
.navigation-bar { 
	border-left: none; 
} 
#menu { 
	width: 100%; 
} 
#menu ul { 
	width: 100%; 
	display: none; 
} 
#menu ul ul { 
	border: none; 
} 
#menu ul li { 
	width: 100%; 
	border-top: 1px solid #e5e5e5; 
} 
#menu ul li:hover { 
	background: #fff; 
} 
#menu ul ul li, 
#menu li:hover > ul > li { 
	height: auto; 
} 
#menu ul li a, 
#menu ul ul li a { 
	width: 100%; 
	border-bottom: 0; 
} 
#menu > ul > li { 
	float: none; 
	padding: 0; 
	text-indent: 17px; 
} 
#menu ul ul li a { 
	padding-left: 25px; 
	text-indent: 0px; 
} 
#menu ul ul li { 
display: block; 
	background: #fff; 
} 
#menu ul ul li:hover { 
	background: #33363b; 
} 
#menu ul ul ul li a { 
	padding-left: 35px; 
} 
#menu ul ul li a { 
	color: #33363b; 
	background: none; 
} 
#menu ul ul li:hover > a, 
#menu ul ul li.active > a { 
	color: #fff; 
} 
#menu ul ul, 
#menu ul ul ul { 
	position: relative; 
	left: 0; 
	width: 100%; 
	margin: 0; 
	text-align: left; 
} 
#menu > ul > li.has-sub > a:after, 
#menu > ul > li.has-sub > a:before, 
#menu ul ul > li.has-sub > a:after, 
#menu ul ul > li.has-sub > a:before { 
	display: none; 
} 
#menu #head-mobile { 
	display: block; 
	padding: 23px; 
	color: #fff; 
	height: 50px; 
} 
#menu .menu-button { 
	width: 50px; 
	height: 50px; 
	position: absolute; 
	left: 0; 
	top: 0; 
	cursor: pointer; 
	background: #212121; 
} 
#menu .menu-button .menu-opened { 
	background: #212121; 
} 
#menu .menu-button::after { 
	content: "Навигация"; 
	float: none; 
	display: inline-block; 
	vertical-align: text-bottom; 
	margin-left: 60px; 
	font: 24px/50px Genericons; 
} 
#menu .submenu-button { 
	position: absolute; 
	right: 0; 
	top: 0; 
	border-left: 1px solid #e5e5e5; 
	height: 50px; 
	width: 46px; 
	cursor: pointer; 
} 
#menu .submenu-button .submenu-opened { 
	background: none; 
} 
#menu ul ul .submenu-button { 
	height: 34px; 
	width: 34px; 
} 
#menu .submenu-button:after { 
	content: ''; 
	display: block; 
	position: absolute; 
	top: 22px; 
	right: 19px; 
	width: 8px; 
	height: 2px; 
	background: #e5e5e5; 
} 
#menu ul ul .submenu-button:after { 
	top: 15px; 
	right: 13px; 
} 
#menu .submenu-button .submenu-opened:after { 
	background:#e5e5e5; 
} 
#menu .submenu-button:before { 
	content: ''; 
	display: block; 
	position: absolute; 
	top: 19px; 
	right: 22px; 
	width: 2px; 
	height: 8px; 
	background: #e5e5e5; 
} 
#menu ul ul .submenu-button:before { 
	top: 12px; 
	right: 16px; 
} 
#menu .submenu-button .submenu-opened:before { 
	display: none; 
} 
#menu ul ul ul li.active a{ 
	border-left: none; 
} 
#menu > ul > li.has-sub > ul > li.active > a, 
#menu > ul ul > li.has-sub > ul > li.active > a { 
	border-top: none; 
} 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="navigation-bar"> 
<div id="menu"> 
<div id="head-mobile"></div> 
<div class="menu-button"></div> 
<ul> 
	<li>Меню1 
	<ul> 
<li><a href="#">Меню 11</a></li> 
<li><a href="#">Меню 11</a></li> 
<li><a href="#">Меню 11</a></li> 
	</ul> 
	</li> 
	<li>Меню2 
	<ul> 
<li><a href="#">Меню 22</a></li> 
<li><a href="#">Меню 22</a></li> 
<li><a href="#">Меню 22</a></li> 
	</ul> 
	</li> 
	<li>Меню3 
	<ul> 
<li><a href="#">Меню 33</a></li> 
<li><a href="#">Меню 33</a></li> 
	</ul> 
	</li> 
	<li>Меню4 
	<ul> 
<li><a href="#">Меню 44</a></li> 
	</ul> 
	</li> 
</ul> 
</div> 
</div>

READ ALSO
SailsJs You have triggered an unhandledRejection, you may have forgotten to catch [требует правки]

SailsJs You have triggered an unhandledRejection, you may have forgotten to catch [требует правки]

You have triggered an unhandledRejection, you may have forgotten to catch a Promise rejection:

377
Работа с Google Cloud MySQL

Работа с Google Cloud MySQL

Немогу найти примера как работать с Google Cloud MySQLЯ думаю все просто - через API, но немогу понять как? Может кто-то делал и покажет пример с основными...

282
Python Postgres (Windows)

Python Postgres (Windows)

Добрый деньЕсть проект, в котором принимает участие радмин сервер (для удаленного доступа подключаемой оборудки)

264
Laravel запрос в БД с помощью Query Builder

Laravel запрос в БД с помощью Query Builder

Всем приветОсваиваю Laravel и столкнулся с следующей проблемой

297