建立一个jQuery菜单

Question

我已经建立了一个 jquery 菜单。

但是它不是很优雅而且相当笨重。例如，当您单击“菜单”时，它会很快打开和关闭。

此外，如果您打开菜单并将鼠标悬停在链接上，单击链接的左侧或右侧会导致菜单再次突然关闭

请有人帮我把它弄得更优雅一点吗？我尝试过使用幻灯片效果，但是当用户将鼠标悬停在菜单上时，它会产生弹跳效果（菜单不断打开和关闭）

这是我的代码：fiddle

$(document).ready(function() {
  $('.menu').click(function() {
    $('.submenu').fadeToggle('1000');
  });
});

.menu {
  width: 300px;
  margin: 20px auto 0 300px;
  vertical-align: top;
  padding: 0;
  font-size: 18px;
  color: white;
  text-align: center;
  background: #34495E;
  border: 0px;
  border-bottom: 2px solid #2C3E50;
  -webkit-box-shadow: inset 0 -2px #34495E;
  box-shadow: inset 0 -2px #34495E;
  clear: both;
  margin-left: 66px;
}

.submenu {
  width: 300px;
  background-color: #6D767F;
  padding: 0px;
  margin: 0 auto;
  text-align: center;
  font-size: 15px;
  color: #FFF;
  display: none;
}

ul li {
  list-style: none;
  padding: 11px;
  margin: 0px;
  text-transform: lowercase;
  font-weight: 700;
}

ul li a {
  text-decoration: none;
  font-size: 1.1em;
  color: #FFF;
}

ul li a:visited {
  text-decoration: none;
}

.submenu ul li:hover {
  background-color: #719ECC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <!-- START HEADER -->
  <ul>
    <li>menu</li>
  </ul>
  <div class="submenu">
    <ul>
      <li><a href="#">Mountain Bike</a></li>
      <li><a href="#">gopro</a></li>
      <li><a href="#">Shoei Helmet</a></li>
    </ul>
  </div>

Answer 1

看来你是一个学习者使用这个代码

 ul {
      height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;   
    }

jquery

$ (document).ready(function() {

    $ ('.menu').click(function() {
    $('.submenu').slideToggle('1000');
});

});

demo

Answer 2

由于您一直在做的所有“褪色”，它会突然打开，而是使用slideDown() 打开菜单，这给它一个非常不错的条目.. 和slideUp() 关闭它。

使用mouseenter() 事件打开并使用mouseleave() 事件关闭它，而不是单击。

从ul 和li 中删除额外的margins 和paddings。

它已经准备好像新的一样使用了。

您所说的slide event 的弹跳效果（菜单不断打开和关闭），使用stop() 可以轻松纠正。当在元素上调用.stop() 时，当前正在运行的动画（如果有）会立即停止。

我让代码简单易懂……还有很多方法可以做同样的事情。

演示：http://jsfiddle.net/s94xhnw6/3/

jQuery：

$(document).ready(function () {
    $('.menu').on('mouseenter', function () {
        $('.submenu').slideDown();
    });

     $('.menu').on('mouseleave', function () {
        $('.submenu').stop().slideUp();
    });    
});

Answer 3

Demo

$(document).ready(function() {
  $('.menu').click(function() {
    $('.submenu').slideToggle('600'); /* using slideToggle will make the list slide elegantly */
  });
});

/* some changes to make it look elegant. */

body {
  font-family: helvetica;
}

.menu {
  width: 300px;
  margin: auto;
  vertical-align: top;
  padding: 0;
  font-size: 18px;
  color: white;
  text-align: center;
  background: #34495E;
  border: 0px;
  border: 2px solid #2C3E50;
  -webkit-box-shadow: inset 0 -2px #34495E;
  box-shadow: inset 0 -2px #34495E;
}

.submenu {
  width: 300px;
  background-color: #6D767F;
  padding: 0px;
  margin: 0 auto;
  text-align: center;
  font-size: 15px;
  color: #FFF;
  display: none;
}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
  padding: 11px;
  margin: 0px;
  text-transform: lowercase;
}

ul li a {
  text-decoration: none;
  font-size: 1.1em;
  color: #FFF;
}

ul li a:visited {
  text-decoration: none;
}

.submenu ul li:hover {
  background-color: #719ECC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <!-- START HEADER -->
  <ul>
    <li>menu</li>
  </ul>
  <div class="submenu">
    <ul>
      <li><a href="#">Mountain Bike</a>
      </li>
      <li><a href="#">gopro</a>
      </li>
      <li><a href="#">Shoei Helmet</a>
      </li>
    </ul>
  </div>