I'm currently troubleshooting the behavior of my slide-up footer menu. It seems to be emerging either from the bottom left corner or the bottom right corner, depending on whether I remove left: 0 or right: 0 from the .footerbar css.
If anyone has any insights or suggestions, they would be greatly appreciated. This issue is really frustrating me. :-(
Here is where I am at with the code...
$('#footerNav').addClass('slide-down');
function openNav() {
$(document).ready(function() {
$('#footerNav').toggle(function() {
if ($('#footerNav').hasClass('slide-up')) {
$('#footerNav').addClass('slide-down', 1000);
$('#footerNav').removeClass('slide-up');
} else {
$('#footerNav').removeClass('slide-down');
$('#footerNav').addClass('slide-up', 1000);
}
});
});
}.footerbar a {
padding: 8px 8px 8px 10px;
text-decoration: none;
font-size: 13px;
color: #818181;
display: block;
}
.footerbar a:hover,
.footerbar a:focus {
color: #046B86;
}
.footerbar {
position: fixed;
width: 100%;
z-index: 10000;
text-align: center;
height: 500px;
font-size: 18px;
color: #000;
background: #FFF;
display: flex;
justify-content: center;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
bottom: -60px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<a href="#" onClick="openNav()">footer tray</a>
<br>
<br>
<br>
<div id="footerNav" class="footerbar">
<table width="100%" border="0">
<tr>
<td>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
</td>
<td>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
</td>
<td>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
<a href="#">Stuff</a>
</td>
</tr>
</table>
</div>