Mega Menu - Scroll to ID


Topic: Mega Menu - Scroll to ID

ViS pro premium priority asked 4 years ago

If the Mega Menu contains a large number (10) of dropdown-toggle buttons, then the drop-down submenu is not visible in the mobile version. It is necessary that when you click on the dropdown-toggle button, the scroll to the ID is triggered.

In the previous version (MDB4 jQuery) it was implemented like this:

JS:

$(function () {
$("a.dropdown-toggle").click(function () { 
    if ($(".animated-icon3").hasClass("open")) { $("html, body").animate({ scrollTop: $('#CatalogMenu_open').offset().top - 5 }); }
});});

HTML:

<main id="CatalogMenu_open">....</main>

How to solve this problem in MDB5, using Plain JS or jQuery?

Thanks.


ViS pro premium priority answered 4 years ago

The solution of the problem.

jQuery:

$("#CatalogMenu ul.navbar-nav li.nav-item a.nav-link.dropdown-toggle").on("mousedown", function () {
    if (!$(this).hasClass("show") && $(window).width() < 992) {
        $("html, body").animate({ scrollTop: $('#CatalogMenu_open').offset().top - 10 });
    }
});

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: 3.1.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No
Tags