My current approach involves using CSS to create sliding menus. With JavaScript, I simply apply a class to trigger the CSS animations. The menu consists of 4 columns with list items in desktop mode, but collapses into only headings in mobile mode. These headings are clickable to reveal the menu.
While my menu functions correctly overall, I've noticed that the animation for sliding down differs from sliding up. Sliding up appears slower and starts later, which is not the desired effect. I want both sliding down and sliding up to have the same smooth transition.
For reference, you can view my JSfiddle here: JSfiddle
HTML
<div class="site-footer">
<div class="row">
<div class="col-25p">
<span class="footer-heading">Heading 1</span>
<div>
<ul>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
<li><a href="#">Sub 4</a></li>
<li><a href="#">Sub 5</a></li>
</ul>
</div>
</div>
<!-- Remaining HTML code remains unchanged -->
</div>
</div>
SCSS
.site-footer {
font-size: 1.3rem;
.footer-heading {
display: block;
color: black;
font-weight: bold;
font-size: 18px;
padding-top: 4px;
/* Remaining SCSS code remains unchanged */
}
/* More SCSS code included for styling */
.col-25p{
@media (min-width: 768px){
float:left;
width: 25%;
}
}
JavaScript
$('.site-footer .footer-heading').click(function(){
$(this).toggleClass('open');
});