弹跳幻灯片菜单与Jquery

Bouncing Slide Menu with Jquery

本文关键字：Jquery 菜单 幻灯片      更新时间：2023-09-26

我是Jquery的新手，也是HTML/CSS的新手，但是因为我是那种通过实践经验来学习的人，所以我在学习新事物的同时一直在建立一个实践网站，并且一直在尝试我想最终在真正的网站上实现的元素。

我一直在尝试构建一个适当的幻灯片菜单，当光标悬停在菜单项上时激活。我已经设法让菜单滑出，但如果我把光标移到滑出菜单，整个东西开始反弹!我试过使用。stop()，但它闪烁!

我在这里和其他网站上发现了一些问题，这些问题来自于非常相似(如果不是完全相同)的人，但我想我没有理解任何对他们有用的答案。我需要视觉效果，而像"插入if(){}语句"这样的答案让我感到困惑，因为我不确定把它放在哪里。如果我按照原始材料的指示去做(在底部函数中放入一个check/If语句)，它似乎会破坏代码，然后菜单甚至不会滑出。

这是非常令人沮丧的，当我太沮丧的时候(比如六个小时后)，我想不出一个解决方案，所以如果有人能帮我找到我的代码中的错误，或者给我一个相当详细的解释，我可以做些什么来解决这个弹跳问题，以及它是如何开始的，我将非常感激。

我已经附上了JQ, HTML， &CSS。提前谢谢。

$(document).ready(function() {
    $('.dropdown').hover(
    function() {
        $(this).children(".sub-menu").slideDown(200);
    },
    function() {
        $(this).children(".sub-menu").slideUp(200);
    }
);
});
nav {
  background-color: #000000;
  padding:10px 0;
  text-align:center;
}
nav li {
  margin: 10px;
  padding: 0 10px;
  display: inline;
}
nav ul {
  list-style-type:none;
  margin:0;
  padding:0;
}
nav a {
  font-size: 30px;
  height: 35px;
  line-height: 30px;
  color: #ffffff;
  text-decoration: none;
}
nav a:hover,
nav a:focus,
nav a:active {
  color: #ff0000;
}
nav ul li {
  display:inline-block;
  position:relative;
}
nav li ul {
  background-color:#000000;
  position:absolute;
  left:0;
  top:50px;
  width:200px;
}
nav li li a {
  position:relative;
  font-size:25px;
  margin:0;
  padding:0;
  display:block;
}
ul.sub-menu {
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
 <ul>
  <li><a href=""><b>Home</b></a></li>
  <li><a href="">About</a></li>
  <li><a href="">Inspiration</a></li>
  <li class="dropdown"><a href="">Find</a>
    <ul class="sub-menu">
      <li><a href="">Ebooks</a></li>
      <li><a href="">PDFs</a></li>
    </ul>
  </li>  
  <li><a href="">News</a></li>
  <li class="dropdown"><a href="">Contact Us</a>
    <ul class="sub-menu">
      <li><a href="">E-mail List</a></li>
      <li><a href="">Contact Us</a></li>
    </ul>
  </li>
  <li class="dropdown"><a href="">Extras</a>
    <ul class="sub-menu">
      <li><a href="">Coming Soon</a></li>
    </ul>
  </li>
 </ul>
</nav>

您的<li>元素和下拉菜单之间有一个空格(您可以在这里看到它)。把它移走就行了

I did 

nav {
  [...]
  // padding: 10px 0;
  padding: 0;
}
nav li {
  [...]
  // padding: 0 10px;
  padding: 10px;
}


$(document).ready(function() {
    $('.dropdown').hover(
    function() {
        $(this).children(".sub-menu").slideDown(200);
    },
    function() {
        $(this).children(".sub-menu").slideUp(200);
    }
);
});
nav {
  background-color: #000000;
  padding: 0;
  text-align:center;
}
nav li {
  margin: 10px;
  padding: 10px;
  display: inline;
}
nav ul {
  list-style-type:none;
  margin:0;
  padding:0;
}
nav a {
  font-size: 30px;
  height: 35px;
  line-height: 30px;
  color: #ffffff;
  text-decoration: none;
}
nav a:hover,
nav a:focus,
nav a:active {
  color: #ff0000;
}
nav ul li {
  display:inline-block;
  position:relative;
}
nav li ul {
  background-color:#000000;
  position:absolute;
  left:0;
  top:50px;
  width:200px;
}
nav li li a {
  position:relative;
  font-size:25px;
  margin:0;
  padding:0;
  display:block;
}
ul.sub-menu {
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
 <ul>
  <li><a href=""><b>Home</b></a></li>
  <li><a href="">About</a></li>
  <li><a href="">Inspiration</a></li>
  <li class="dropdown"><a href="">Find</a>
    <ul class="sub-menu">
      <li><a href="">Ebooks</a></li>
      <li><a href="">PDFs</a></li>
    </ul>
  </li>  
  <li><a href="">News</a></li>
  <li class="dropdown"><a href="">Contact Us</a>
    <ul class="sub-menu">
      <li><a href="">E-mail List</a></li>
      <li><a href="">Contact Us</a></li>
    </ul>
  </li>
  <li class="dropdown"><a href="">Extras</a>
    <ul class="sub-menu">
      <li><a href="">Coming Soon</a></li>
    </ul>
  </li>
 </ul>
</nav>

更改nav li ul中top:50px到padding-top:23px的css 

$(document).ready(function() {
    $('.dropdown').hover(
    function() {
        $(this).children(".sub-menu").slideDown(200);
    },
    function() {
        $(this).children(".sub-menu").slideUp(200);
    }
);
});
nav {
  background-color: #000000;
  padding:10px 0;
  text-align:center;
}
nav li {
  margin: 10px;
  padding: 0 10px;
  display: inline;
}
nav ul {
  list-style-type:none;
  margin:0;
  padding:0;
}
nav a {
  font-size: 30px;
  height: 35px;
  line-height: 30px;
  color: #ffffff;
  text-decoration: none;
}
nav a:hover,
nav a:focus,
nav a:active {
  color: #ff0000;
}
nav ul li {
  display:inline-block;
  position:relative;
}
nav li ul {
  background-color:#000000;
  position:absolute;
  left:0;
  padding-top:23px;
  width:200px;
}
nav li li a {
  position:relative;
  font-size:25px;
  margin:0;
  padding:0`;
  display:block;
}
ul.sub-menu {
    display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
 <ul>
  <li><a href=""><b>Home</b></a></li>
  <li><a href="">About</a></li>
  <li><a href="">Inspiration</a></li>
  <li class="dropdown"><a href="">Find</a>
    <ul class="sub-menu">
      <li><a href="">Ebooks</a></li>
      <li><a href="">PDFs</a></li>
    </ul>
  </li>  
  <li><a href="">News</a></li>
  <li class="dropdown"><a href="">Contact Us</a>
    <ul class="sub-menu">
      <li><a href="">E-mail List</a></li>
      <li><a href="">Contact Us</a></li>
    </ul>
  </li>
  <li class="dropdown"><a href="">Extras</a>
    <ul class="sub-menu">
      <li><a href="">Coming Soon</a></li>
    </ul>
  </li>
 </ul>
</nav>

相关文章：