My goal is to create a website where clicking on an image triggers a dropdown menu. The jQuery method I'm using is as follows:
function main() {
$('#arrow').click(function() {
$('.hidden').animate({
top: '200px'
}, 400);
$('#arrow').animate({
top: '400px'
}, 400);
$('#arrow').css("src", "uparrow.jpg");
});
}
$(document).ready(main);
The current implementation works well for displaying the dropdown menu, but it covers up my page content in the process. Although this is acceptable, I am looking for a solution that smoothly pushes the entire page down below the expanded menu. My preference is to achieve this effect without having to set position: absolute; on all elements to enable smooth animation. Below are the CSS attributes of the menu and related elements for better understanding:
/* Menu elements */
.hidden {
z-index: -5;
top: -50px;
position: absolute;
}
#arrow {
margin-left: auto;
margin-right: auto;
height: 50px;
width: 50px;
display: block;
}
#arrow-box {
background-color: white; /* FOR NOW */
}
#dropdown {
height: 300px;
width: 100%;
background-color: black;
}
To clarify the structure, here is a Stack Snippet:
// JavaScript code snippet goes here
....
....
/* CSS styling code goes here */
....
....
<!-- HTML code snippet goes here -->
....
....