I successfully implemented a drop-up footer on my website:
$('#drop-up-open').click(function() {
$('#drop-up #drop-upDashboard').slideToggle({
direction: "up"
}, 300);
$(this).toggleClass('drop-upClose');
}); // end click#drop-up {
position: absolute;
bottom: 0;
width: 100%;
padding-bottom: 4%;
z-index: 100;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
#drop-up-open {
cursor: pointer;
text-decoration: none;
}
#drop-up .drop-upClose {}
#drop-up #drop-upDashboard {
display: none;
}
@media screen and (max-width: 1000px) {
#drop-up #drop-upDashboard{
display:block; }
}<div class="container">
<!-- Jumbotron Header -->
<header class="jumbotron panel-heading">
<p class="text-center">
Text getting covered by drop-up menu on mobile
</p>
<section>
<a href="#"><button> Main button </button></a>
</section>
</header>
<div id="drop-up">
<a href="#" id="drop-up-open">Open</a>
<div id="drop-upDashboard">
<p>It's now open!</p>
<div class="row">
<div class="col-md-3 col-xs-12">
<section> <a href="#"><button>
<p>Button 1</p>
</button></a> </section>
</div>
<div class="col-md-3 col-xs-12">
<section> <a href="#"><button>
<p>Button 2</p>
</button></a> </section>
</div>
<div class="col-md-3 col-xs-12">
<section> <a href="#"><button>
<p>Button 3</p>
</button></a> </section>
</div>
<div class="col-md-3 col-xs-12">
<section> <a href="#"><button>
<p>Button 4</p>
</button></a> </section>
</div>
</div>
<!-- row -->
</div>
<!-- dashboard -->
</div>
<!-- drop-up -->
</div>
<!-- container -->Upon clicking the div with id="drop-up", the menu opens from bottom to top on desktop view. Now, I want this menu to be automatically displayed on smaller devices without needing a click.
The goal is for the drop-up menu to occupy the same portion at the bottom of the page on mobile and tablet views, requiring users to scroll down to see it, unlike on desktop view. Any advice on achieving this?