[英]Position of sliding navigation menu always below header
I have the following jQuery
menu which you can also find in the JSfiddle
here : 我有以下的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>
The menu works perfectly as long as the .navigation_button
is the same size as the .navigation
. 菜单只要完美的作品.navigation_button
是大小相同.navigation
。
However, as you can see in the code above I lowered the height of the .navigation_button
to height: 60%;
但是,如您在上面的代码中所见,我将.navigation_button
的高度降低到height: 60%;
and when I click now on the button the .panel
will not appear below the .header
. 当我现在单击按钮时, .panel
不会出现在.header
下方。 It will appear below the .navigation_button
. 它将显示在.navigation_button
下方。
To solve this issue I tried to put position:absolute;
为了解决这个问题,我尝试提出以下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. 到.panel
,然后分配到相同的高度.header
到.panel
但是由于它没有工作.panel
从页面的顶部,现在幻灯片。
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. 另一个想法我是关闭.header <div>
后.navigation_button
但一旦我做了动画没有运行了。
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
下方,无论.navigation_button
中的位置.header
?
add this code to '.panel' 将此代码添加到“ .panel”
position: absolute;
top:100%;
right: 0;
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. 如果您希望将.panel
放置在.header
下方, .header
可以将其位置设置为绝对位置,然后将其从第一个非静态父.header
(在您的情况下为.header
的左侧向左定位,并从其顶部100% .header
它有固定的位置值),这将确保.panel
是低于.header
但是,在你的榜样,在.panel
伸不通过蓝色.navigation
元素的宽度,所以如果你想要这个接盘.navigation
元素的相对位置。
See the demo below: 请参见下面的演示:
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.