CODEWITHSUNDEEP
javascripthtmlcss
g.pickardou
g.pickardou

Reputation: 35822

Why this animation occurs in this web page?

I would like to understand why this menu animation occurs when I hoovering a navigation item on this web page. (hoovering over "Dashboards" or any other main navigation item opens the submenu)

Demo

What I've tried so far #1:

Using Chrome debugger tools I discovered the following lines in app.min.js (previously I formatted with {}):

   $('.navigation-menu li.has-submenu a[href="#"]').on('click', function (e) {
        if ($(window).width() < 992) {
            e.preventDefault();
            $(this).parent('li').toggleClass('open').find('.submenu:first').toggleClass('open');
        }
    });

I set a breakpoint there, the handler is called only when literally clicking, (not on hoover) and btw has no effect. So something else is running on hoover (this is according that the handler is installed in click)

What I've tried so far #2:

Search for navigation-menu or has-submenu classes in the source: No other usages found

What I've tried so far #3:

Tried to set Event Listener Breakpoint in Chrome in many things including mouse or animation, neither is activated when I hoovered on the "Dashboards" or any other main navigation items but the submenu opened.

Question

How this submenu open/close is implemented?

Upvotes: 0

Views: 50

Answers (1)

Shilly
Shilly

Reputation: 8589

The CSS stylesheet app.min.css contains a couple of the following rules for various screensizes:

.navigation-menu>li.has-submenu:hover>.submenu{
  visibility:visible;
  opacity:1;
  margin-top:0
}

One of those should be responsible for 'opening the submenu', which technically is 'making it visible', since the menu is always there, just transparent/invisible/not in the correct position.

Upvotes: 1

Related Questions