Develop Reference

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

drop down menu Foundation JavaScript tigger

I create simple drop down menu using Foundation 6
<ul class="dropdown menu" data-dropdown-menu>
<li>
Item 1
<ul class="menu">
<li>Item 1A</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Now i want to on different event ( like other button to hide or show menu.) But in doc there is no method to do this. When I use jquery trigger on click also not working is there any solution for this ?

Attach an event handler to an element (for example a button) and give it a function like hiding the dropdown menu:
$("button").click(function(){$(".dropdown").hide()})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown menu" data-dropdown-menu>
<li>
Item 1
<ul class="menu">
<li>Item 1A</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<button>
I'm a button
</button>
To allow it to come back again, try $("button").click(function(){$(".dropdown").toggle()})

Access new generated content in jQuery

In all the research I have found, they invoke binding an even to the element with .on(), but that not what I need. Here is a brief example:
<div id="myElement">
<ul id="myUl">
<li>content list 1</li>
<li>content list 2</li>
</ul>
</div>
After an ajax call, I replace the content of myElement using:
var div = $("#myElement");
div.replaceWith('<div id="myElement">
<ul id="myUl">
<li>new content list 1</li>
<li>new content list 2</li>
</ul>
</div>');
Now if I want to access the unordered list to add for example a class name: div.find("ul").addClass("myClass"); it doesn't work. Any idea how to solve this?

This works for me...
added a # to get the element using ID
used the ID again after replacing
escaped the newlines
changed className
Note you will have to do the replacement in the success of the Ajax
var div = $("#myElement");
div.replaceWith('<div id="myElement">\
<ul id="myUl">\
<li>new content list 1</li>\
<li>new content list 2</li>\
</ul>\
</div>');
$("#myElement").find("ul").addClass("myClass");
console.log($("#myElement").html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myElement">
<ul id="myUl">
<li>content list 1</li>
<li>content list 2</li>
</ul>
</div>

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>