I need some help with my menu. Currently, it is showing up below the button and within my footer instead of above the content like I want it to. If anyone can assist me in understanding what I am doing wrong, I would greatly appreciate it. Thank you for taking the time to help.
This is the code for my button and menu. If you have any advice or suggestions on how to fix this issue, I would be very grateful. Thank you for your time.
document.addEventListener('DOMContentLoaded', function() {
const toggleButton = document.getElementById('menu-toggle');
const menu = document.querySelector('.ja-menu');
// Initially hide the menu
menu.style.display = 'none';
toggleButton.addEventListener('click', function() {
// Toggle menu visibility
if (menu.style.display === 'none') {
menu.style.display = 'block';
} else {
menu.style.display = 'none';
}
});
});.ja-menu {
width: 154.5px;
height: 238px;
background: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 0; /* Remove padding here and let .j-menu-item handle it */
border-radius: 10px;
box-sizing: border-box;
}
.ja-menu-item {
display: block;
padding: 10px;
justify-content: center;
text-decoration: none;
transition: background 0.3s;
ont-size: 14px;
font-family: arial, sans-serif;
color: #202124;
box-sizing: border-box;
}
.ja-menu-item-text {
text-align: left; /* Align the text to the left */
}
.ja-menu-item:hover {
background: #DADCE0;
}
.ja-divider {
height: 1px;
background-color: #DADCE0;
margin: 0; /* This ensures the divider does not extend into the padding area */
}
.ja-toggle-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px; /* Maintain consistent padding with .j-menu-item */
}
.ja-switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.ja-switch input {
opacity: 0;
width: 0;
height: 0;
}
.ja-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 24px;
}
.ja-slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 2px;
bottom: 2px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
.ja-switch input:checked + .j-slider {
background-color: #2196F3;
}
.ja-switch input:focus + .j-slider {
box-shadow: 0 0 1px #2196F3;
}
.ja-switch input:checked + .j-slider:before {
transform: translateX(26px);
}<div id="menu-container" style="position: relative; display: inline-block;">
<a id="menu-toggle" class="pHiOh" href="javascript:void(0);">Settings</a><div class="j-menu">
<div class="ja-menu">
<a class="ja-menu-item" href="#">Search settings</a>
<a class="ja-menu-item" href="#">Advanced search</a>
<a class="ja-menu-item" href="#">Your data in Search</a>
<a class="ja-menu-item" href="#">Search history</a>
<a class="ja-menu-item" href="#">Search help</a>
<a class="ja-menu-item" href="#">Send feedback</a>
<div class="ja-divider"></div>
<div class="ja-menu-item ja-toggle-container">
<span>Dark theme:</span>
<label class="ja-switch">
<input type="checkbox" id="j-dark-theme-toggle">
<span class="ja-slider round"></span>
</label>
</div>
</div>