Question

我一直在寻找解决方案，但我找不到任何适合我想要的东西。我有一个图标，希望当尺寸大于 980px 的HOVER时打开下拉菜单，然后当屏幕尺寸小于980px时点击。

这是代码。

＆＃13;

/*Hide menu by default*/
$("#menu").hide();

/*When menu button is clicked, toggle the menu*/
$("#menu-btn").click(function() {
  $("#menu").slideToggle();
});


$("#menuser").hide();

/*When menu button is clicked, toggle the menu*/
$("#ser_btn").click(function() {
  $("#menuser").slideToggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Hamburger menu toggle button-->
<div id="menu-btn">
  <a href="#"><img src="images/icon.png" style="height:50px; width:50px;"></a>
</div>

<!--Menu-->
<nav id="menu">
  <ul>
    <li>INICIO</li>
    <li>LA BELLE</li>
    <li id="ser_btn">SERVICIOS
      <ul id="menuser">
        <li>PELUQUERIA</li>
        <li>PELUQUERIA</li>
        <li>PELUQUERIA</li>
        <li>PELUQUERIA</li>
      </ul>
    </li>
    <li>NOTICIAS</li>
    <li>CONTACTO</li>
  </ul>
</nav>

＆＃13;

我将不胜感激。

Answer 1

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Hamburger menu toggle button-->
<div id="menu-btn">
  <a href="#"><img src="images/icon.png" style="height:50px; width:50px;"></a>
</div>

<!--Menu-->
<nav id="menu">
  <ul>
    <li>INICIO</li>
    <li>LA BELLE</li>
    <li id="ser_btn">SERVICIOS
      <ul id="menuser">
        <li>PELUQUERIA</li>
        <li>PELUQUERIA</li>
        <li>PELUQUERIA</li>
        <li>PELUQUERIA</li>
      </ul>
    </li>
    <li>NOTICIAS</li>
    <li>CONTACTO</li>
  </ul>
</nav>

＆＃13;

{{1}}

＆＃13;

Answer 2

在大多数情况下，我会使用CSS执行此操作：

<div id="menu-btn">
  <a href="#"><img src="images/icon.png" style="height:50px; width:50px;"></a>
</div>

<!--Menu-->
<nav id="menu">
  <ul>
    <li>INICIO</li>
    <li>CONTACTO</li>
  </ul>
</nav>

<style>
  nav#menu { display: none }
  #menu-btn:hover + nav#menu, nav#menu:hover { display:block }
</style>

或者更常见的是，我会将nav嵌套在button

中

<div id="menu-btn">
  <a href="#"><img src="images/icon.png" style="height:50px; width:50px;"></a>
  <nav id="menu">
    <ul>
      <li>INICIO</li>
      <li>CONTACTO</li>
    </ul>
  </nav>
</div>

<style>
  #menu-btn nav { display: none }
  #menu-btn:hover nav, #menu-btn nav:hover { display:block }
</style>

将鼠标悬停在图标菜单JQUERY上时打开菜单

2 个答案: