I created a jQuery menu that's also available on 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>The menu functions perfectly when the .navigation_button is the same size as the .navigation.
However, I adjusted the height of the .navigation_button to height: 60%; and now clicking the button causes the .panel to appear below the .navigation_button instead of beneath the .header.
To address this issue, I attempted adding position:absolute; to the .panel while giving it the same height as the .header, but this resulted in the panel sliding in from the top of the page.
Another solution was closing the .header <div> after the .navigation_button, however, this caused the animation to cease functioning.
What adjustments must be made in the code to ensure that the .panel consistently appears directly below the .header, regardless of where the .navigation_button is positioned within the .header?