时间戳

首页 > 解决方案 > 滑动导航菜单的位置始终在标题下方

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

问题描述

我有以下jQuery菜单，您也可以在JSfiddle 此处找到：

$(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但是，正如您在上面的代码中看到的那样，我降低了to的高度，height: 60%;当我现在单击按钮时，.panel不会出现在.header. 它将出现在.navigation_button.

为了解决这个问题，我尝试放置position:absolute;，.panel然后将相同的高度分配.header给 ，.panel但它不起作用，因为.panel现在从页面顶部滑入。

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

我需要在我的代码中进行哪些更改，.panel以确保.header无论.navigation_button在.header?

标签： jqueryhtmlcss

解决方案

将此代码添加到“.panel”

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

推荐阅读