My website has a top navigation menu that is clickable. You can find the code snippet below:
The code for the navigation menu is as follows:
$("nav td a").click(function(e) {
if ($(this).parent().hasClass('selected')) {
$("nav .selected div div").slideUp(200);
$("nav .selected").removeClass("selected");
//alert("HERE!");
} else {
$("nav .selected div div").slideUp(200);
$("nav .selected").removeClass("selected");
//alert("NO HERE");
if ($(this).next(".subs").length) {
$(this).parent().addClass("selected");
$(this).next(".subs").children().slideDown(200);
}
}
e.stopPropagation();
});
$("body").click(function() {
$("nav .selected div div").slideUp(200);
$("nav .selected").removeClass("selected");
});nav {
background: #f0f7fa;
color: #85a0ad;
margin: 40px -38px 0 -38px;
padding: 10px 38px;
}
...
...
... (CSS continues here)
...
...
</nav><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="top">
...
</nav>I want to add the same navigation menu at the bottom of the page, with the menu opening upward instead of downward when clicked. I found this post, but it talks about hover-triggered menus while mine opens on click. Here are my concerns:
- Where do I position "position: absolute; bottom: 100%" in the CSS?
- How do I adjust slideUp / slideDown for upward-opening menus?
- How can I prevent interference between the top and bottom menus? (Initially, clicking the bottom menu closed itself due to the slideUp/slideDown actions)