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
?