Javascript меню рушится, прежде чем выбор может быть сделан?
Я пытался настроить это меню так, чтобы подменю появилось, когда пользователь наводит на них курсор мыши или щелкает их на мобильном устройстве. В настоящее время я не смог протестировать настройки мобильных устройств, но если вы наведете указатель мыши на ссылку, содержащую подменю, подменю свалится, когда вы попытаетесь выбрать из меню. Я в недоумении.....
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
<link rel='stylesheet' type='text/css' href='navbar.css' />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript' src='menu_jquery.js'></script>
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='navbar.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Widgets</span></a></li>
<li><a href='#'><span>Menus</span></a></li>
<li class='last'><a href='#'><span>Products</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Company</span></a>
<ul>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Location</span></a></li>
</ul>
</li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</body>
</html>
CSS:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
@charset 'UTF-8';
/* Base Styles */
#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: 'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.6;
}
#cssmenu {
width: 100%;
/*COLOR BEHIND MAIN BAR*/
background: #fff;
}
#cssmenu > ul {
/*NAVIGATION BAR BORDER COLOR*/
border: 1px solid #d8d8d0;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
background: linear-gradient(to top, #d8d8d0, white 15%, #d8d8d0 15%, #d8d8d8 15%, white 80%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#cssmenu > ul:after {
clear: both;
content: '';
display: table;
}
@media all and (max-width: 480px) {
#cssmenu > ul {
max-height: 32px;
overflow: hidden;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
#cssmenu.expand ul {
max-height: 900px;
}
}
#cssmenu > ul > li {
border-right: 1px solid #d8d8d0;
-moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
float: left;
}
#cssmenu > ul > li.mobile {
display: none;
}
#cssmenu > ul > li.active {
/*ACTIVE LINK BACKGROUND COLOR*/
background: transparent;
}
@media all and (max-width: 480px) {
#cssmenu > ul > li {
border-right: 0 none;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
display: block;
float: none;
}
#cssmenu > ul > li.mobile {
display: block;
}
#cssmenu > ul > li.mobile i {
float: right;
font-style: normal;
}
}
#cssmenu > ul > li:last-child {
border-right: 0 none;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
#cssmenu > ul > li:last-child ul {
left: auto;
right: 0;
}
#cssmenu > ul > li.mobile {
border-right: 0 none;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
}
#cssmenu > ul > li > a {
margin: 0 0 2px 0;
font-size: 12px;
display: block;
/*MENU BAR LINK FONT COLOR*/
color: #008A8C;
text-shadow: 0 1px 1px #d8d8d8;
}
#cssmenu > ul > li > a > span {
display: block;
padding: 6px 10px;
font-weight: bold;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
/*ACTIVE TAB FONT COLOR*/
color: #000;;
/*text-shadow: 0 1px 1px #000;*/
}
/* Sub menu */
#cssmenu ul ul {
/*DROPDOWN MENU BACKGROUND COLOR*/
background: #f9f9f9;
border: 1px solid #cccccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
padding: 5px 12px;
display: none;
position: absolute;
top: 33px;
left: 0;
width: 200px;
z-index: 1;
}
@media all and (max-width: 480px) {
#cssmenu ul ul {
position: relative;
top: 0;
width: 100%;
}
}
#cssmenu ul ul li {
padding: 3px 0;
}
#cssmenu ul ul a {
/*DROPDOWN MENU LINK FONT COLOR*/
color: #999999;
display: block;
font-size: 12px;
font-weight: bold;
}
#cssmenu ul ul a:hover {
/*DROPDOWN MENU HOVER LINK COLOR*/
color: #444444;
}
JAVASCRIPT:
$( document ).ready(function() {
$('#cssmenu > ul').prepend('<li class="mobile"><a href="#"><span>Menu <i>☰</i></span></a></li>');
$('#cssmenu > ul > li > a').hover(function(e) {
$('#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).parent().hasClass('mobile') ) {
e.preventDefault();
$('#cssmenu').toggleClass('expand');
}
if($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});
});
1 ответ
То, что вам нужно, это часть кода js или css, которая будет обрабатывать раскрывающийся список вашего меню, когда дочерний элемент меню находится при наведении курсора на версию для настольного компьютера, и часть кода js /css, которая будет действовать при нажатии / при нажатии для мобильных устройств, как они это делают. у вас нет события зависания, поэтому вы должны сделать это on click/on tap. Хорошим примером является то, как это сделать, уже в Bootstrap пришлось документировать документацию и посмотреть, как они этого добились. Пример навбар.