Topic: Fixed SideNav Animation on Load

drummondit pro asked 6 years ago


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>

Marta Wierzbicka staff answered 6 years ago


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


Marta Wierzbicka staff answered 6 years ago


Hi, If you don't want an animation of an anchor, go to 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?


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags