Menu icon Foundation
Megamenu works fine until I put it in a Drupal 8 template

Using Foundation 6.3.0 and jQuery 2.2.3 (same as Drupal 8.2.5 core), my test code for a very basic megamenu works. Here's the CodePen link.

I'm building a custom theme for Drupal 8, using Stable as the base theme. I drop my code into the page.html.twig just make sure it all works before trying to integrate it with the real menu and I'm seeing the weirdest thing. When I hover over one of the menu options, the dropdown pane doesn't appear.

I'm using Chrome, so I open up the Inspector and I can see DIV code changing when I hover over something. I tinkered with the CSS there and turned of visibility:hidden in .dropdown-pane so I could see what going on. I had to edit the positioning a little to move the pane up, back I can see the top of of it inside my menu. It's like it's trapped inside the top-bar DIV or something.

I'm guessing it's a JS thing that's over my head. Anyone seen this before?

Foundation 6.3drupal 8megamenu

Using Foundation 6.3.0 and jQuery 2.2.3 (same as Drupal 8.2.5 core), my test code for a very basic megamenu works. Here's the CodePen link.

I'm building a custom theme for Drupal 8, using Stable as the base theme. I drop my code into the page.html.twig just make sure it all works before trying to integrate it with the real menu and I'm seeing the weirdest thing. When I hover over one of the menu options, the dropdown pane doesn't appear.

I'm using Chrome, so I open up the Inspector and I can see DIV code changing when I hover over something. I tinkered with the CSS there and turned of visibility:hidden in .dropdown-pane so I could see what going on. I had to edit the positioning a little to move the pane up, back I can see the top of of it inside my menu. It's like it's trapped inside the top-bar DIV or something.

I'm guessing it's a JS thing that's over my head. Anyone seen this before?

Kay Beissert over 2 years ago

It is a while ago, but I had the same problem. In drupal you have to iniciate js the following way:

 

(function($) {
  $(document).foundation();
}(jQuery));