Align UL with grandparent UL - javascript

I have been trying to get this to work for a while with no success.
I have a multi-level navigation and I would like to align all child UL's with is main parent/grandparent UL.
right now the structure is something like this:
<ul class="first-menu">
<li class="has-children">
<a href="#">Page 1
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu first-submenu">
<li>Menu 1</li>
<li class="has-children">
<a href="#">Menu 2
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu3
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu 4
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu 5
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu 6
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu 7
<span class="arrow arrow-down"></span>
</a>
</li>
<li class="has-children">
<a href="#">Menu 8
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
</ul>
</li>
<li class="has-children">
<a href="#">Page 2
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu first-submenu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Page 3
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu first-submenu" value="hide/show">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</li>
<li>Page 4</li>
</ul>
so, I have it setup so the second submenu shows on hover, I was able to get the second-submenu size to its grandparent UL with this:
$('.first-menu').each(function(){
$(this).find('ul.second-submenu')
.css('min-height', $(this).outerHeight(true));
});
and its position is set to absolute, top: 0 , and left: 100%, display: inline-block ...
but I would like to align all the second-submenu uls with the grandparent ul up top.
right now I have:
But, I would like to get something like this:
Appreciate the help.


Here your main problem is the CSS part where the relative parent you are using to position the submenu, you don't need the JS part and you can get your result if you just avoid the relative be on the li and just ensure you have it on the main ul, check this snippet:
.first-menu {
position: relative;
height: 300px;
width: 150px;
background: orange;
}
.submenu {
display: none;
position: absolute;
left: 100%;
top: 0;
width: 100%;
height: 100%;
background: orange;
}
.has-children:hover>.submenu {
display: block;
}
li:hover {
background:green;
}
ul {
padding: 0;
list-style: none
}
li {
line-height: 30px;
padding: 5px;
background: tomato
}
a {
text-decoration: none;
color: white
}
<ul class="first-menu">
<li class="has-children">
<a href="#">Page 1
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu first-submenu">
<li>Menu 1</li>
<li class="has-children">
<a href="#">Menu 2
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu3
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu 4
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
</ul>
</li>
<li class="has-children">
<a href="#">Page 2
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu first-submenu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</li>
</ul>
Note:
Here is a snippet with relative position on the li element so you can see how this works wrong like your actual screenshots:
.first-menu {
position: relative;
height: 300px;
width: 150px;
background: orange;
}
.submenu {
display: none;
position: absolute;
left: 100%;
top: 0;
width: 100%;
height: 100%;
background: orange;
}
.has-children:hover>.submenu {
display: block;
}
li:hover {
background: green;
}
ul {
padding: 0;
list-style: none
}
li {
position: relative;
line-height: 30px;
padding: 5px;
background: tomato
}
a {
text-decoration: none;
color: white
}
<ul class="first-menu">
<li class="has-children">
<a href="#">Page 1
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu first-submenu">
<li>Menu 1</li>
<li class="has-children">
<a href="#">Menu 2
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu3
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu 4
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
</ul>
</li>
<li class="has-children">
<a href="#">Page 2
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu first-submenu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</li>
</ul>

Related

Show/Hide Tab Arrows to Navigate Additional Tabs on Overflow

Right now, I have a tab structure that looks like the following:
As you can see, when the tabs reach the end of the line they wrap to the next line. I know how to hide the additional tabs; however, I want to introduce an arrow system to navigate to the additional tabs when the tabs overflow. Something that looks like below depending on the screen resolution:
I only want to have the arrows appear if there are additional tabs that are being hidden, this leads me to my question: How do I detect when the tabs wrap and insert the arrows?
I need this to work with responsive layouts.
Here is the code I am using to create the tabs (note: it includes hard-coded list items for the arrows):
<ul id="tabs" class="tab-links">
<li class="">Tables & Views</li>
<li class="">ERD</li>
<li class=""><i class="fa fa-caret-left"></i></li>
<li class="active"><a class="query-tab" href="#query1">Query 1</a></li>
<li class="">Query 2</li>
<li class="">Query 3</li>
<li class="">Query 4</li>
<li class="">Query 5</li>
<li class="">Query 6</li>
<li class="">Query 7</li>
<li class="">Query 8</li>
<li class="">Query 9</li>
<li class=""><i class="fa fa-caret-right"></i></li>
<!-- Hidden Tabs -->
<li class="">Query 10</li>
<li class="">Query 11</li>
<li class="">Query 12</li>
</ul>

The answer requested:
window.addEventListener('load', initTabs);
function initTabs() {
var listContainer = document.getElementById('tabs');
var buttonWidthCounter = 0;
var totalContainerWidth = listContainer.offsetWidth;
for (var i = 0; i < listContainer.children.length; i++) {
if (buttonWidthCounter + listContainer.children[i].offsetWidth > totalContainerWidth) {
//button overflow...add tab buttons
console.log('there is overflow...add tab arrow buttons...');
}
buttonWidthCounter += listContainer.children[i].offsetWidth;
}
}
li {
display: inline-block;
}
<ul id="tabs" class="tab-links">
<li class="">Tables & Views</li>
<li class="">ERD</li>
<li class=""><i class="fa fa-caret-left"></i></li>
<li class="active"><a class="query-tab" href="#query1">Query 1</a></li>
<li class="">Query 2</li>
<li class="">Query 3</li>
<li class="">Query 4</li>
<li class="">Query 5</li>
<li class="">Query 6</li>
<li class="">Query 7</li>
<li class="">Query 8</li>
<li class="">Query 9</li>
<li class=""><i class="fa fa-caret-right"></i></li>
<!-- Hidden Tabs -->
<li class="">Query 10</li>
<li class="">Query 11</li>
<li class="">Query 12</li>
</ul>
The answer I suggest:
Scrollbars are much easier to implement and are arguably better.
li{
display:inline-block;
}
ul{
white-space:nowrap;
}
html,body{
margin:0;
padding:0;
}
#container{
width:100vw;
overflow:scroll;
}
<div id="container">
<ul id="tabs" class="tab-links">
<li class="">Tables & Views</li>
<li class="">ERD</li>
<li class=""><i class="fa fa-caret-left"></i></li>
<li class="active"><a class="query-tab" href="#query1">Query 1</a></li>
<li class="">Query 2</li>
<li class="">Query 3</li>
<li class="">Query 4</li>
<li class="">Query 5</li>
<li class="">Query 6</li>
<li class="">Query 7</li>
<li class="">Query 8</li>
<li class="">Query 9</li>
<li class=""><i class="fa fa-caret-right"></i></li>
<!-- Hidden Tabs -->
<li class="">Query 10</li>
<li class="">Query 11</li>
<li class="">Query 12</li>
</ul>
</div>

Finding a better way to implement navigation bar which has subcategories

I'm building a navigation bar. The link below is what I just have completed so far.https://jsfiddle.net/dsdzyp23/2/
<div class="navbar-01">
<div class="navbar-01-container">
<div class="main-container">
<div class="logo-center">
<img style="width: 240px;" src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg">
</div>
<button class="nav-toggle-btn">
<img style="width: 50px;" src="https://cdn2.iconfinder.com/data/icons/ui-icon-part-2/128/navigation-512.png">
</button>
<ul class="nav-categories">
<li>RUNWAY</li>
<li>WOMEN</li>
<li>MEN</li>
<li>CHILDREN</li>
</ul>
</div>
</div>
<div id="runway" class="navbar-sub">
<div class="main-container">
<div class="nav-sub-list">
<ul class="nav-sub-categories">
WOMEN
<li>Cruise 2018</li>
<li>Fall Winter 2017 Runway</li>
<li>Pre-Fall 2017</li>
</ul>
<!--
-->
<ul class="nav-sub-categories">
MEN
<li>Cruise 2018</li>
<li>Fall Winter 2017 Runway</li>
<li>Pre-Fall 2017</li>
</ul>
<!--
-->
<ul class="nav-sub-categories">
UNSKILLED WORKER
</ul>
</div>
</div>
</div>
</div>
Cause my subcategories are not wrapped with anchors, when my mouse leaves the anchor, the subcategories div closes, therefore I cannot reach to the content which are wrapped in the subcategories div.
I' am wondering if wrapping subcategories with anchor is the best way to implement a navigation bar? (Considering to responsive web design, it seems like wrapping together is the most easiest way to implement?)

Here's the standard way to make a menu. It's also dependent on requirements.
ul {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.nav-list {
text-align: center;
}
.nav-list-item {
display: inline-block;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.nav-list-item:hover .subnav-list {
display: block;
}
.subnav-list {
display: none;
width: 100px;
transform: translateX(-50%);
position: absolute;
top: 100%;
left: 50%;
}
<nav class="nav">
<ul class="nav-list">
<li class="nav-list-item">
Nav 1
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 2
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 3
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 4
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 5
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 6
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 7
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 8
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 9
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 10
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
</ul>
</nav>

Keeping Bootstrap 3 dropdown open when clicked with slide up & down animation

I am using a Bootstrap dropdown as a vertical menu coming from a button clicked on the navbar. I added some jQuery to allow the dropdown to slide down smoothly rather than pop into existence, but now I've run into the problem of the dropdown closing when anywhere (inside or outside) is clicked.
Some of the "links" in the dropdown menu are actually accordion style headers that show a list of pages when clicked, so I need the dropdown to stay open when there is a click within.
My main problem is that I have found a few solutions that work, but they seem to overwrite the smooth slide functionality of the dropdown.
This is the code I'm using for the slide down:
$('.dropdown').on('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
$('.dropdown').on('hide.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
and this is the general structure of my menu:
<div class="dropdown">
<button type="button" class="dropdown-toggle nav-tog" id="dropdownMenu1" data-toggle="dropdown">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars" style="color: #A05317; font-size: 30px;"></i>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" id="mainMenu">
<ul id="main-nav">
<li class="nav-item">NAV HEADER (accordion)
<ul>
<li>Sub Nav 1</li>
<li>Sub Nav 2</li>
<li>Sub Nav 3</li>
<li>Sub Nav 4</li>
</ul>
</li>
<li class="nav-item">NAV HEADER (accordion)
<ul>
<li>Sub Nav 1</li>
<li>Sub Nav 2</li>
<li>Sub Nav 3</li>
<li>Sub Nav 4</li>
</ul>
</li>
<li class="nav-item">NAV HEADER</li>
<li class="nav-item">NAV HEADER</li>
<li class="nav-item">NAV HEADER</li>
<li class="nav-item">NAV HEADER</li>
<li class="nav-item">NAV HEADER (accordion)
<ul>
<li>Sub Nav 1</li>
<li>Sub Nav 2</li>
<li>Sub Nav 3</li>
<li>Sub Nav 4</li>
</ul>
</li>
</ul>
</ul>
</div>
Any help would be greatly appreciated!

wordpress foundation accordion mobile submenu

I am trying to integrate the accordion feature to wordpress menu.
i came across with a code but it didn't give me the full expectation(not really a js guru).
here is the html code:
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>Option 1</li>
<li>Option 2 <span class="right"> + </span></li>
<ul class="off-canvas-submenu">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
<li>Option 3</li>
<li>Option 4 <span class="right"> + </span></li>
<ul class="off-canvas-submenu">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</aside>
<section class="main-section">
Content
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
and here is the jscript:
$(document).foundation();
$(".off-canvas-submenu").hide();
$(".off-canvas-submenu-call").click(function() {
var icon = $(this).parent().next(".off-canvas-submenu").is(':visible') ? '+' : '-';
$(this).parent().next(".off-canvas-submenu").slideToggle('fast');
$(this).find("span").text(icon);
});
this works perfectly only for a static page, also work a bit in wordpress but the stuggle is that when you click on item in the menu all the li with submenu opens instead of one at a time. take attention of the html structure of the menu:
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>Option 1</li>
<li>Option 2 <span class="right"> + </span></li>
<ul class="off-canvas-submenu">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
<li>Option 3</li>
<li>Option 4 <span class="right"> + </span></li>
<ul class="off-canvas-submenu">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</aside>
the ul submenu is in the same level with the li menu.
in wordpress the ul.submenu is inside the parent li menu.
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>Option 1</li>
<li>
Option 2 <span class="right"> + </span>
<ul class="off-canvas-submenu">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
</li>
</ul>
</aside>
the curent code is actually working a bit, but we don't want to open all the submemnu by only clicking a single li.
here is the codepen

$(document).foundation();
$(".off-canvas-submenu").hide();
$(".off-canvas-submenu-call").click(function() {
var icon = $(this).parent().find(".off-canvas-submenu").is(':visible') ? '+' : '-';
$(this).parent().find(".off-canvas-submenu").slideToggle('fast');
$(this).find("span").text(icon);
});
Made it worked this way using .find(), you will need to style the .off-canvas-submenu since its not on the same level as the other elements anymore therefor not inheriting the style of first level <ul> but in all you should me good.
Edit:
Works with multiple submenu
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>Option 1</li>
<li>
Option 2 <span class="right"> + </span>
<ul class="off-canvas-submenu">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
</li>
<li>
Option 3 <span class="right"> + </span>
<ul class="off-canvas-submenu">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
</li>
</ul>
</aside>

Float left and right in same UL

I have a unordered list
<ul id="smart-menu">
<li class="left">item 1</li>
<li class="left">item 2</li>
<li class="left">item 3</li>
<li class="right">item 4</li>
<li class="right">item 5</li>
</ul>
I want the items to be displayed horizontal. The items with the left class on the left site and the others on the right site.
I want to use smartmenus, for this reason I need a unordered list.
Here is the plunkr: http://plnkr.co/edit/GhgAWHv78qerLDcKgKDm?p=preview

On the basis of my understanding from your post, this is your desired result
.left{float:left}
.right{float:right}
ul{list-style:none}
<ul id="smart-menu">
<li class="left">item 1</li>
<li class="left">item 2</li>
<li class="left">item 3</li>
<li class="right">item 4</li>
<li class="right">item 5</li>
</ul>

You can use flex-box if you can have a "filler" element between left and right.
ul {
display: flex;
list-style: none;
}
.filler {
flex: 1 0 auto;
}
<ul id="smart-menu">
<li class="left">item 1</li>
<li class="left">item 2</li>
<li class="left">item 3</li>
<li class="filler"></li>
<li class="right">item 4</li>
<li class="right">item 5</li>
</ul>
check out this pen: http://codepen.io/anon/pen/pJpBjq
and here is a guide to flex-box

Categories