Hi thank you for creating a mega menu that is so smart. I am try to incorporate this code into my jekyll site. I got the menu working but the js that triggers the submenus dont appear to be working. I was wondering if someone could point out where I went wrong. I included the jquery and megamenu.js and ioncon scripts but for some reason its not triggering the submenus. Maybe someone can take a look at my site: http://138.68.51.138:4000/ and my code, if it is not to much trouble. Otherwise i will eventually figure this out.

`<!DOCTYPE html>

View on GitHub

{% if site.show_downloads %}

Download this project as a .zip file Download this project as a tar.gz file

{% endif %}

Star and fork on github

megamenu.js - Last responsive megamenu you'll ever need

Features:

IE8 Compatible (jquery animated)
No classes! (for dropdowns)
Smart - knows when to show megamenu
100% responsive
Seamless wordpress integration
Open source!

{% if site.google_analytics %} {% endif %}

`

@import "jekyll-theme-slate"; .inner {max-width: 768px;}

/ –––––––––––––––––––––––––––––––––––––––––––––––––– megamenu.js STYLE STARTS HERE –––––––––––––––––––––––––––––––––––––––––––––––––– /

/ –––––––––––––––––––––––––––––––––––––––––––––––––– Screen style's –––––––––––––––––––––––––––––––––––––––––––––––––– /

.menu-container { width: 80%; margin: 0 auto; background: #e9e9e9; }

.menu-mobile { display: none; padding: 20px; }

.menu-mobile:after { content: "\f394"; font-family: "Ionicons"; font-size: 2.5rem; padding: 0; float: right; position: relative; top: 50%; -webkit-transform: translateY(-25%); -ms-transform: translateY(-25%); transform: translateY(-25%); }

.menu-dropdown-icon:before { content: "\f489"; font-family: "Ionicons"; display: none; cursor: pointer; float: right; padding: 1.5em 2em; background: #fff; color: #333; }

.menu > ul { margin: 0 auto; width: 100%; list-style: none; padding: 0; position: relative; / IF .menu position=relative -> ul = container width, ELSE ul = 100% width / box-sizing: border-box; }

.menu > ul:before, .menu > ul:after { content: ""; display: table; }

.menu > ul:after { clear: both; }

.menu > ul > li { float: left; background: #e9e9e9; padding: 0; margin: 0; }

.menu > ul > li a { text-decoration: none; padding: 1.5em 3em; display: block; }

.menu > ul > li:hover { background: #f0f0f0; }

.menu > ul > li > ul { display: none; width: 100%; background: #f0f0f0; padding: 20px; position: absolute; z-index: 99; left: 0; margin: 0; list-style: none; box-sizing: border-box; }

.menu > ul > li > ul:before, .menu > ul > li > ul:after { content: ""; display: table; }

.menu > ul > li > ul:after { clear: both; }

.menu > ul > li > ul > li { margin: 0; padding-bottom: 0; list-style: none; width: 25%; background: none; float: left; }

.menu > ul > li > ul > li a { color: #777; padding: .2em 0; width: 95%; display: block; border-bottom: 1px solid #ccc; }

.menu > ul > li > ul > li > ul { display: block; padding: 0; margin: 10px 0 0; list-style: none; box-sizing: border-box; }

.menu > ul > li > ul > li > ul:before, .menu > ul > li > ul > li > ul:after { content: ""; display: table; }

.menu > ul > li > ul > li > ul:after { clear: both; }

.menu > ul > li > ul > li > ul > li { float: left; width: 100%; padding: 10px 0; margin: 0; font-size: .8em; }

.menu > ul > li > ul > li > ul > li a { border: 0; }

.menu > ul > li > ul.normal-sub { width: 300px; left: auto; padding: 10px 20px; }

.menu > ul > li > ul.normal-sub > li { width: 100%; }

.menu > ul > li > ul.normal-sub > li a { border: 0; padding: 1em 0; }

/ –––––––––––––––––––––––––––––––––––––––––––––––––– Mobile style's –––––––––––––––––––––––––––––––––––––––––––––––––– /

@media only screen and (max-width: 959px) { .menu-container { width: 100%; } .menu-mobile { display: block; } .menu-dropdown-icon:before { display: block; } .menu > ul { display: none; } .menu > ul > li { width: 100%; float: none; display: block; } .menu > ul > li a { padding: 1.5em; width: 100%; display: block; } .menu > ul > li > ul { position: relative; } .menu > ul > li > ul.normal-sub { width: 100%; } .menu > ul > li > ul > li { float: none; width: 100%; margin-top: 20px; } .menu > ul > li > ul > li:first-child { margin: 0; } .menu > ul > li > ul > li > ul { position: relative; } .menu > ul > li > ul > li > ul > li { float: none; } .menu .show-on-mobile { display: block; } } `

marioloncarek / megamenu-js

Menu works, submenu js does not for me #23

{{ site.title | default: site.github.repository_name }}

{{ site.description | default: site.github.project_tagline }}

Star and fork on github

megamenu.js - Last responsive megamenu you'll ever need

Features:

`