I have been working on this and I'm almost there, but the jQuery part is driving me crazy (I'm not very proficient in it yet, but I am learning).
Here's the link to the fiddle: http://jsfiddle.net/5CRA5/4/
Since I can't demonstrate the drop down from the dynamically generated post query, I added a search button below the operations and settings buttons that you can click instead of having the dropdown menu.
Everything is functioning properly except for one issue - when someone has the settings menu open and then clicks on operations, the new menu doesn't replace the existing one as expected. I've double-checked the code but it's not behaving as intended. There must be something I am overlooking. All other menus are working fine where they get replaced correctly.
Additionally, I am wondering if there is a way to delay the post action until the div is completely up, so that when it comes back down, the transition appears seamless. Currently, sometimes you can see the information being replaced before the div is fully visible.
Below is the jQuery code for those who may want to take a look at it directly to help identify what might be going wrong.
function menuCall(div_id, bottom, filename) {
$('[id^="menu_"]').animate({"top": "-50px"}, "slow");
$('[id^="menu_"]').delay(500).queue( function(next){$(this).hide();next();});
$.post("/opserv/" + filename, function(ajaxresult){
$('#'+div_id).html(ajaxresult);
});
if ($('#'+div_id).css('top') !== bottom + 'px') {
$('#'+div_id).queue( function(next){$(this).show();next();});
$('#'+div_id).animate({"top": "+" + bottom + "px"}, "slow");
} else {
$('#'+div_id).animate({"top": "-50px"}, "slow");
$('#'+div_id).delay(500).queue( function(next){$(this).hide();next();});
}
}