滑动导航菜单的位置始终位于标题下方 [英] Position of sliding navigation menu always below header

问题描述

我有以下jQuery菜单，您也可以在JSfiddle 此处:

I have the following jQuery menu which you can also find in the 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的大小相同，菜单就可以完美工作.

The menu works perfectly as long as the .navigation_button is the same size as the .navigation.

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

However, as you can see in the code above I lowered the height of the .navigation_button to height: 60%; and when I click now on the button the .panel will not appear below the .header. It will appear below the .navigation_button.

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

To solve this issue I tried to put position:absolute; to the .panel and then assigned the same height of the .header to the .panel but it did not work since the .panel slides in from the top of the page now.

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

Another idea I had was to close the .header <div> after the .navigation_button but once I did that the animation did not run anymore.

无论我将.navigation_button放置在.header中的什么位置，我该如何更改代码以确保.panel始终恰好在.header之下?

What do I need to change in my code to ensure that the .panel is always exactly below the .header no matter where the .navigation_button is positioned within the .header?

推荐答案

如果您希望将.panel定位在.header之下，则可以将其位置设置为绝对位置，然后将其从左侧位置0定位，并将其定位100％从它的第一个非静态父级(在您的情况下为.header(位置值为固定))的顶部开始，这将确保.panel在.header之下，但是，在您的示例中， .panel不会延伸通过蓝色的.navigation元素宽度，因此，如果您希望这样做，则将.navigation元素的位置设置为相对.

If you want the .panel to be positioned below the .header you could set it's position as absolute and then position it 0 from the left and 100% from the top of its first non-static parent which in your case is the .header (it is has a position value of fixed), this will make sure the .panel is below the .header but, in your example, the .panel doesn't stretch to pass the blue .navigation element width so if you want this then set the position of the .navigation element as relative.

请参见下面的演示

$(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;
}

<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>

这篇关于滑动导航菜单的位置始终位于标题下方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！