Develop Reference

Universal method of dealing with mobile multi-level navigation menus using HTML, CSS and JavaScript

I have my html as follows:
<button id="hamburger-nav"></button>
<nav>
<ul>
<li>
<button>Sub Nav Item 1</button>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</li>
<li>
<button>Sub Nav Item 2</button>
<ul>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
</ul>
</li>
<ul>
</nav>
This is a mobile menu that has a hamburger button that activates the "nav" on click. How do I get the index of the sub nav buttons so I can active their sibling "ul" sub sub menu? Granted all of this has to be done on the onclick method since it is a mobile menu.
I was hoping to have a universal method that could find the index of (this), i.e., the item that is clicked, and then get the corresponding "ul", instead of individually naming these and creating a massive, duplication of code for each menu section.
I would like to use plain old JavaScript as I am trying to cut down on the dependencies of jQuery, etc. Something along the lines of:
var menuButtons = document.querySelectorAll("nav > ul > li > button");
var submenu = document.querySelectorAll("nav > ul > li > ul");
menuButtons.onclick = myFunction(this);
function myFunction(v) {
submenu[v].classList.add("open");
}
While I know this JavaScript doesn't work, accessing the index of the clicked button and opening its accompanying nav was my thought process. But perhaps I'm way of going about this.
Thank you in advance!

FOUC on foundation topbar dropdown menu

I'm trying to style a topbar menu with submenu items in Foundation. The code seems right, but the submenu items keep breaking the styling of the topbar on a page refresh, then going into place (hidden under the top menu item) when the javascript loads.
The docs address FOUC on the dropdown arrows, but not on the list items themselves.
Code:
<div class="top-bar">
<ul class="dropdown menu" data-dropdown-menu>
<li class="is-dropdown-submenu-parent">
Item 1
<ul class="menu">
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
<li>Item 1D</li>
<li>Item 1E</li>
<li>Item 1F</li>
<li>Item 1G</li>
<!-- ... -->
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
Codepen: https://codepen.io/anon/pen/gRowMw
This flashing also happens on the official codepen: https://codepen.io/IamManchanda/pen/XRYWPO

Responsive menu - parent menu with link

I may possible have a requirement where i have to link the parent menu to a link rather than showing sub menu. Right now i am using Slick Menu http://slicknav.com/
Logically parent menu should not be linked as it should show child menu on mobile device. while desktop version we can counter this with hover effect can show sub-menus and click on the parent menu can open link also but on small screen we can either open link or show submenu.
my question right now is that in fiddle example (http://jsfiddle.net/y1dLdd1f/1/) i am linking Parent 1 meny to google.com, but script is blocking this. How can i unblock it and when user click on it it opens the page rather than showing the sub menu if parent menu has a proper link
<ul id="menu">
<li>Parent 1
<ul>
<li>item 3</li>
<li>Parent 3
<ul>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
</li>
<li>item 4</li>
</ul>
</li>
<li>item 1</li>
<li>non-link item</li>
<li>Parent 2
<ul>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>
</li>
</ul>

Slick menu has a number of available options including "allowParentLinks", all you need should be,...
$(document).ready(function(){
$('#menu').slicknav({
allowParentLinks:"true"
});
});
But to show this working in JSFiddle you would need to add target="_blank" to you <a> tag.

Horizontal menu style "spill" over submenu

I have a horizontal menu with another horizontal submenu. The problem I have is with styling. I am trying to make it so that when a mainmenu element is activated and the corresponding submenu is shown then the mainmenu elements coloring kind of bleeds to cover the white-space between the two menus as in the following image:
Just to clarify the picture above is a rough image manipulated approximation on what I am searching for.
I am doing this in CMS Made Simple so this is only an approximation of the code:
<nav id="mainmenu">
<ul>
<li>Main Menu 1</li>
</ul>
</nav>
<nav id="submenu">
<ul>
<li>Submenu 1</li>
</ul>
</nav>

Since you have provided no code I have created with a vague idea :
http://jsfiddle.net/FLnke/
<nav id="mainmenu">
<ul>
<li onmouseover="javascript:opensub()" onmouseout="javascript:closesub()" >Main Menu 1 |
<div id="submenu"></br>
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
</ul>
</div>
</li>
<li>Main Menu 2</li>
</ul>

jquery hover open close miniature window

<div id="pop">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div id="info-1></div>
<div id="info-2></div>
And when you hover over one of the items a window is displayed with some info regarding the item. I have worked this out for one item, now I wanna know how I can make this work for the entire list.
My initial thought was to create one script per each item... but that seems a bit thick considering the functionality of js.
Javascript
$(function(){
$('pop il li').hover(function(){
$('#info-1').show();
},function(){
$('#info-1').hide();
});
});
Now I need the following. Once the "window" is displayed on hover, in I need the window to stay open in some way for me to be able to scroll through the content using my mouse. This is mainly because I have some links inside it and need to access them! Right now, As soon as i leave the li item, the window of course disappears... which is not fun. So, how can i solve it?

UPDATED
I would make one function to handle the action you want for these. Make sure the 'info' divs are in the same order as the 'pop' li's
Here is an example FIDDLE
<div id="pop">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
Then use this jquery
$('#pop li').mouseover(function() {
$('.info').hide();
var x = $(this).index();
$('.info').eq(x).show();
});
$('.info').mouseout(function(){
$(this).hide();
});