Topic: Fixed SideNav Animation on Load
When applying to the ".active" class to a fixed sidenav anchor and sub anchor (see below), the accordion animation shows on page load when the nav menu is expanding (not really an animation, more like a choppy 2-step reveal). It's very distracting. How can the animation be skipped on page load so that the sidenav is rendered as open, without flickering?
As a secondary concern, the .active class has no effect on the sub anchor. It's not highlighted or changed in any way.
<li>
<a class="collapsible-header waves-effect arrow-r active">
<i class="fa fa-history"></i>History<i class="fa fa-angle-down rotate-icon"></i>
</a>
<div class="collapsible-body">
<a class="dropdown-item" href="#">My History</a>
<a class="dropdown-item active" asp-page="store/choose">Stores</a>
</div>
</li>
scss/pro/animations.scss and remove or comment that code. About the secondary case, how do you want it to look or behave? Please, specify your problem.
Best,
Marta drummondit pro commented 6 years ago
Hi, Marta. I believe that you've misunderstood my question. I want the accordion animation, just like this site (mdbootstrap.com), but I don't want to see the animation when the page loads and there is an active nav menu, just like this site. As for the second concern, again, just like the demos provided by this site, when placing the active class on Stores (as in the sample above) the text should change color to indicate that the menu item is active. Otherwise, what's the point of the active flag?
Hi,for now, I don't have a solution for a problem with animation but in the future, we will improve our side-nav and we will keep this bug with animation in mind. And for the second thing with an active class, on mdbootstrap.com active links are highlighted through .current-menu-item class not through .active class, what means that this functionality (and many others too) is created only for our website and it isn't attached to mdb package. Please, look at these forum threads: https://mdbootstrap.com/support/jquery/how-can-i-set-the-active-state-in-the-sidenav/, https://mdbootstrap.com/support/general/sidenav-keep-selected-item-highlighted/, https://mdbootstrap.com/support/jquery/selected-item-sidenav/.Best,Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No