jQuery幻灯片菜单出现在主菜单下方

时间：2017-08-21 11:31:02

标签： jquery html css

通过以下代码，我创建了一个由<header>和<image>组成的固定<navigation>。现在，我想在<navigation>和<button>部分中为<SlideItem>添加子菜单。

到目前为止，滑动功能完美无缺。但是，它确实出现在主菜单旁边而不是在它下面。它似乎卡在按钮的<li>内。

我需要在代码中更改哪些内容，以便sub-menus显示在主菜单下方？

＆＃13;
＆＃13; 
$(document).ready(function() {
  $(".button").mouseenter(function() {
    $(this).children(".SlideItem").slideDown(500);
  });
  $(".button").mouseleave(function() {
    $(this).children(".SlideItem").slideUp(500);
  });
});
＆＃13; 
body {
  margin: 0;
}

.header {
  width: 80%;
  height: 10%;
  margin-left: 10%; 
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.image {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  text-align:center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.navigation {
  width: 70%;
  height: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

ul {
  height: 100%;
  display: flex;
  list-style: none;
  margin: 0; 
  padding: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
}

li {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align:center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.content{
  width: 80%;
  margin-top: 10%; 
  margin-left: 10%; 
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: red;
}

.SlideItem {
  display: none;
}

.SlideItem {
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: lime;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="header">	
  <div class="image">
  Image
  </div>
  <nav class="navigation"> 
    <ul>
      <li class="button"> 1.0 Main Menu 
        <ul class="SlideItem">
          <li> 1.1 Sub Menu </li>
          <li> 1.2 Sub Menu </li>
          <li> 1.3 Sub Menu </li>     
        </ul>
      </li>
      <li> 2.0 Main Menu </li>
      <li> 3.0 Main Menu </li>
    </ul>
  </nav>
</div>
＆＃13;
＆＃13;
＆＃13;

您还可以找到我的代码here。

4 个答案:

答案 0 :(得分：1)

在position:absolute上使用SlideItem相对于直接父级，并避免直接在元素上使用css，例如您已经使用ul { height: 100%;display:flex; ... }它将css应用于所有ul元素，更好的方法是使用类或继承。

$(document).ready(function() {
  $(".button").mouseenter(function() {
    $(this).children(".SlideItem").slideDown(500);
  });
  $(".button").mouseleave(function() {
    $(this).children(".SlideItem").slideUp(500);
  });
});
body {
  margin: 0;
}

.header {
  width: 80%;
  height: 10%;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.image {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.navigation {
  width: 70%;
  height: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.navigation > ul {
  height: 100%;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
}

.navigation > ul > li {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.content {
  width: 80%;
  margin-top: 10%;
  margin-left: 10%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: red;
}
.button{
  position:relative;
}
.SlideItem {
  display: none;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: lime;
  position:absolute;
  top:100%;
  left:0;
  padding:0;
  margin:0;
}
.SlideItem li{
  display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="header">

  <div class="image">
    Image
  </div>

  <nav class="navigation">
    <ul>
      <li class="button"> 1.0 Main Menu
        <ul class="SlideItem">
          <li> 1.1 Sub Menu </li>
          <li> 1.1 Sub Menu </li>
          <li> 1.1 Sub Menu </li>
        </ul>
      </li>
      <li> 2.0 Main Menu </li>
      <li> 3.0 Main Menu </li>
    </ul>
  </nav>

</div>

答案 1 :(得分：0)

使用position: absolute 

.SlideItem {
    display: none;
    position: absolute;
    top: 20px;
}

您需要使用代码，因为鼠标会在主菜单上失去焦点，导致子鼠标悬停在其上时会滑动。

答案 2 :(得分：0)

首先，您需要将下拉元素的显示设置为block。这样，块将垂直下降到父菜单项下方（而不是在其旁边）。然后删除height: 100%它会导致您的下拉元素出现问题。另外，将位置设置为absolute，允许您确定它的垂直/水平位置：此处我们将其设置为41px。

最后，我添加了一行JS，以确保在页面加载时隐藏菜单。

$(document).ready(function() {
  $(".button").mouseenter(function() {
    $(this).children(".SlideItem").slideDown(500);
  });
  $(".button").mouseleave(function() {
    $(this).children(".SlideItem").slideUp(500);
  });
});

$(".button").children(".SlideItem").slideUp(0);
body {
  margin: 0;
}

.header {
  width: 80%;
  height: 43px;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.image {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.navigation {
  width: 70%;
  height: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
}

li {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.content {
  width: 80%;
  margin-top: 10%;
  margin-left: 10%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: red;
}

.SlideItem {
  display: block;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: lime;
  position: absolute;
  top: 41px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<div class="header">

  <div class="image">
    Image
  </div>

  <nav class="navigation">
    <ul>
      <li class="button"> 1.0 Main Menu
        <ul class="SlideItem">
          <li> 1.1 Sub Menu </li>
          <li> 1.1 Sub Menu </li>
          <li> 1.1 Sub Menu </li>
        </ul>
      </li>
      <li> 2.0 Main Menu </li>
      <li> 3.0 Main Menu </li>
    </ul>
  </nav>

答案 3 :(得分：0)

在子菜单上使用绝对定位，在父级上使用position:relative将使子菜单相对于父级保持定位。

从那里，它只是一点点额外的麻烦;在这里，我将子菜单的弯曲方向翻转到垂直方向，并给它一个特定的高度。 （根据这些菜单的实际内容，这可能是必需的，也可能不是必需的。）子菜单以父菜单项为中心，因为justify-content等已全局应用于li个项目;如果你想为父子菜单设置不同的样式，你可能希望将这些规则建立在类名上。

$(document).ready(function() {
  $(".button").mouseenter(function() {
    $(this).children(".SlideItem").slideDown(500);
  });
  $(".button").mouseleave(function() {
    $(this).children(".SlideItem").slideUp(500);
  });
});
.button {
  position: relative;
}

.SlideItem {
  position: absolute;
  flex-direction: column; /* we already have display:flex below */
  height: 150px; /* height of full submenu */
}

.SlideItem li {
  flex-grow: 1 /* make all elements the same height */
}

/* Below is as in original code */
.header {
  width: 80%;
  height: 10%;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.image {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.navigation {
  width: 70%;
  height: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

ul {
  height: 100%;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
}

li {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.content {
  width: 80%;
  margin-top: 10%;
  margin-left: 10%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: red;
}

.SlideItem {
  display: none;
}

.SlideItem {
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: lime;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="header">
  <div class="image">
    Image
  </div>
  <nav class="navigation">
    <ul>
      <li class="button"> 1.0 Main Menu
        <ul class="SlideItem">
          <li> 1.1 Sub Menu </li>
          <li> 1.1 Sub Menu </li>
          <li> 1.1 Sub Menu </li>
        </ul>
      </li>
      <li> 2.0 Main Menu </li>
      <li> 3.0 Main Menu </li>
    </ul>
  </nav>

</div>

相关问题
最新问题