Question

我一直在尝试设置此菜单，以便在用户将鼠标悬停在移动设备上或在移动设备上点击它们时会显示子菜单。现在，我还没有能够测试移动设置，但是如果将鼠标悬停在包含子菜单的链接上，则当您尝试从菜单中进行选择时，子菜单会折叠。我茫然.......

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>&#9776;</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;   
  }     
});

});

Answer 1

你需要的是js代码或css的一部分，它将处理菜单下拉菜单，当菜单子项悬停在桌面版本时，js / css代码的一部分可用于点击/点击移动设备因为他们没有悬停事件所以你必须让它onclick / ontap。好的例子是如何做到这一点已经在Bootstrap had to documentation中，看看他们是如何完成它的。 Example navbar.

Javascript菜单在选择之前会崩溃吗？

1 个答案: