Question

我有以下jQuery菜单，也可以在JSfiddle here中找到：

$(document).ready(function () {
    $(".navigation_button").on('click', function () {
    
    var $panel = $(this).next('.panel');
    if ($panel.is(':visible')) {
      $panel.add($panel.find('.panel')).slideUp(500).removeClass('active');
    } else {
      $panel.slideDown(500).addClass('active');
    }
    
    });
});

body {
  margin: 0;
}

.header {
  width: 80%;
  height: 20%;
  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%;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}


/* Navigation Mobile */

.navigation {
  width: 70%;
  height: 100%;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: aqua;
}

.navigation>nav {

}


.navigation>nav>ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation>nav>ul li a {
  display: block;
  text-decoration: none;
  color: black;
}


/* Navigation Button */

.navigation_button {
 width: 20%;
 height: 60%;
 float: right;
 cursor: pointer;
 
 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
 background-color: fuchsia;
}

.bar1, .bar2, .bar3 {
 width: 100%;
 height: 20%;
 margin: 4% 0;
 background-color: #333; 
}



/* Menu Content */

.menu_box {
 width: 100%;
 float: right;
 line-height: 2.0;
 
 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
}

.panel{ 
 width: 100%;
 padding-left: 0%;
 cursor: pointer;
 font-weight: bold;
 overflow: hidden;
 display:none;
}

.button_menu {
 padding-left: 1%;
 background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">

  <div class="image">
  Image
  </div>	
  
  <div class="navigation">
  
    <div class="navigation_button">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
    </div>

   <nav class="panel">	
	
    <ul class="menu_box">
      <li class="button_menu"> 1.0 Menu </li>
      <li class="button_menu"> 2.0 Menu </li>
      <li class="button_menu"> 3.0 Menu </li>
    </ul>
		
   </nav>

  </div>
  
</div>

只要.navigation_button与.navigation的大小相同，菜单就可以完美运行。

但是，如您在上面的代码中所见，我将.navigation_button的高度降低到height: 60%;，当我现在单击按钮时，.panel不会出现在{ {1}}。它将显示在.header下面。

为解决此问题，我尝试将.navigation_button放在position:absolute;上，然后将.panel的相同高度分配给.header，但是由于.panel现在从页面顶部滑入。

我的另一个想法是在.panel之后关闭.header <div>，但是一旦这样做，动画就不再运行了。

我需要在代码中进行哪些更改，以确保.navigation_button始终位于.panel下方，始终{strong>完全 .header？

Answer 1

将此代码添加到“ .panel”

position: absolute;
top:100%;
right: 0;

Answer 2

如果希望将.panel置于.header下方，则可以将其位置设置为绝对位置，然后将其第一个非静态父级的位置从左位置设置为0，从顶部的位置设置为100％。在您的情况下为.header（位置值为固定），这将确保.panel低于.header，但在您的示例中为{{1 }}不会拉伸以传递蓝色的.panel元素宽度，因此，如果需要，可以将.navigation元素的位置设置为相对。

请参见下面的演示

.navigation

$(document).ready(function () {
    $(".navigation_button").on('click', function () {
    
    var $panel = $(this).next('.panel');
    if ($panel.is(':visible')) {
      $panel.add($panel.find('.panel')).slideUp(500).removeClass('active');
    } else {
      $panel.slideDown(500).addClass('active');
    }
    
    });
});

body {
  margin: 0;
}

.header {
  width: 80%;
  height: 20%;
  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%;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}


/* Navigation Mobile */

.navigation {
  position: relative; /* remove this if you want the panel to stretch further */
  width: 70%;
  height: 100%;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: aqua;
}

.navigation>nav {

}


.navigation>nav>ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation>nav>ul li a {
  display: block;
  text-decoration: none;
  color: black;
}


/* Navigation Button */

.navigation_button {
 width: 20%;
 height: 60%;
 float: right;
 cursor: pointer;
 
 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
 background-color: fuchsia;
}

.bar1, .bar2, .bar3 {
 width: 100%;
 height: 20%;
 margin: 4% 0;
 background-color: #333; 
}



/* Menu Content */

.menu_box {
 width: 100%;
 float: right;
 line-height: 2.0;
 
 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
}

.panel{ 
 /* changes from here...*/
 position: absolute; 
 top: 100%;
 left: 0;
 /*...here*/
 
 width: 100%;
 padding-left: 0%;
 cursor: pointer;
 font-weight: bold;
 overflow: hidden;
 display:none;
}

.button_menu {
 padding-left: 1%;
 background: blue;
}

滑动导航菜单的位置始终在标题下方

2 个答案: