I tried to do a dropdown menu using Superfish. However, the drop down doesn't seems to be working. All scrips and link are directed to the js/css file. I have also done the script that needed to ready the function. But it doesn't seems to work. note I'm doing this on static html.
I have tried to change the source file name to check whether is it source issue, but doesn't seems to be, as I still can take in my main.css but not the superfish.css or .js file. I have also did comparison with some other website that uses superfish, seems to be the same.
<link href="http://localhost:8383/1004Project/public_html/css/superfish.css" rel="stylesheet" media="screen">
<script src="http://localhost:8383/1004Project/public_html/js/jquery.js"></script>
<script src="http://localhost:8383/1004Project/public_html/js/superfish.js"></script>
<script src="http://localhost:8383/1004Project/public_html/js/hoverIntent.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('ul.sf-menu').superfish();
});
</script>
<nav id="primary-menu">
<ul class="sf-js-enabled">
<li><div>Project's Stories</div></li>
<li><div>Menus</div></li>
<li><div>Promotions</div></li>
<li><div>Celebration Tips</div></li>
<li class="sub-menu">
<a href="#" class="sf-with-ul">
<div>Help</div>
</a>
<ul style="display: none;">
<li>
<div>FAQ</div>
</li>
<li>
<div>Feedback</div>
</li>
<li>
<div>Contact Us</div>
</li>
</ul>
</li>
</ul>
</nav>
I'm hoping the dropdown menu to work. It doesn't even have the dropdown.
Here is an working sample example
Your code need some css changes too so i referred some basic example from
here
Also make sure all the scripts are loading properly and you are not having any errors in browser console too regarding the scripts.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/css/superfish.min.css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/js/superfish.min.js">
</script>
</head>
<div id="sample1" class="clearfix">
<ul id="sample-menu-1" class="sf-menu sf-js-enabled sf-arrows" style="touch-action: pan-y;">
<li class="current">menu item
<ul style="display: none;">
<li>menu item</li>
<li class="current">menu item
<ul style="display: none;">
<li class="current">menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
</ul>
</li>
<li>menu item</li>
<li>menu item
<ul style="display: none;">
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
</ul>
</li>
<li>menu item</li>
</ul>
</div>
<script>
jQuery(document).ready(function () {
$('ul.sf-menu').superfish();
});
</script>
you need to make sure the document ready is placed after your html body.
if u place in top of body, it wont work because the dom element is not created yet.
Related
I have bare basic knowledge in JavaScript, and I'm trying to create a menu where :
Only the first level parents are visible.
Then when you click on them, their children will be displayed.
If you click on them again (or maybe click anywhere on the page) they will close
Must work for 2 level children (for example children of children)
This is what I have so far, and I know this is far from being right. I found a bunch of jQuery solutions online, but I want it pure JavaScript & CSS.
Note: I also need to keep the number of classes & id's used to a minimum as I want to be able to use this with the WordPress menu structure. But if I need to manually add a "parent" class to each parent that has children, then that will be fine.
My JavaScript :
var menuParents = document.querySelectorAll("#my-menu .parent");
menuParents.forEach(menuParent => {
document.querySelector("#my-menu .parent").addEventListener("click", ToggleMenu);
function ToggleMenu() {
document.querySelector("#my-menu .parent ul").style.display = 'block';
}
});
My CSS :
#my-menu .parent ul {display: none;}
And, finally, my HTML :
<ul id="my-menu">
<li>Standard Item</li>
<li>Standard Item</li>
<li class="parent">Item with children
<ul>
<li>child item</li>
<li>child item</li>
<li class="parent">child item with children
<li>second level child</li>
<li>second level child</li>
</li>
<li>child item</li>
<li>child item</li>
</ul>
</li>
<li>Standard Item</li>
<li>Standard Item</li>
<li class="parent">Item with children
<ul>
<li>child item</li>
<li>child item</li>
<li class="parent">child item with children
<li>second level child</li>
<li>second level child</li>
</li>
<li>child item</li>
<li>child item</li>
</ul>
</li>
<li>Standard Item</li>
<li>Standard Item</li>
</ul>
You need to use the specific element in the forEach, and then just get the firstElementChild of it, and toggle the display style:
const toggle = {
block: 'none',
none: 'block'
}
function ToggleMenu(event) {
event.stopPropagation();
event.target.classList.toggle('active');
event.target.firstElementChild.style.display = toggle[event.target.firstElementChild.style.display] || 'block';
}
var menuParents = document.querySelectorAll("#my-menu .parent");
menuParents.forEach(menuParent => {
menuParent.addEventListener("click", ToggleMenu);
})
#my-menu .parent ul {display: none;}
.active {
color: red
}
.active > * {
color: black
}
<ul id="my-menu">
<li>Standard Item</li>
<li>Standard Item</li>
<li class="parent">Item with children
<ul>
<li>child item</li>
<li>child item</li>
<li class="parent">child item with children
<ul>
<li>second level child</li>
<li>second level child</li>
</ul>
</li>
<li>child item</li>
<li>child item</li>
</ul>
</li>
<li>Standard Item</li>
<li>Standard Item</li>
<li class="parent">Item with children
<ul>
<li>child item</li>
<li>child item</li>
<li class="parent">child item with children
<ul>
<li>second level child</li>
<li>second level child</li>
</ul>
</li>
<li>child item</li>
<li>child item</li>
</ul>
</li>
<li>Standard Item</li>
<li>Standard Item</li>
</ul>
or without "parent" class
const toggle = {
block: 'none',
none: 'block'
}
function ToggleMenu(event) {
event.stopPropagation();
if (event.target.firstElementChild) {
event.target.classList.toggle('active');
event.target.firstElementChild.style.display = toggle[event.target.firstElementChild.style.display] || 'block';
}
}
var menuParents = document.querySelectorAll("#my-menu li > ul");
menuParents.forEach(menuParent => {
menuParent.parentElement.addEventListener("click", ToggleMenu);
})
#my-menu li > ul {display: none;}
.active {
color: red
}
.active > * {
color: black
}
<ul id="my-menu">
<li>Standard Item</li>
<li>Standard Item</li>
<li>Item with children
<ul>
<li>child item</li>
<li>child item</li>
<li>child item with children
<ul>
<li>second level child</li>
<li>second level child</li>
</ul>
</li>
<li>child item</li>
<li>child item</li>
</ul>
</li>
<li>Standard Item</li>
<li>Standard Item</li>
<li>Item with children
<ul>
<li>child item</li>
<li>child item</li>
<li>child item with children
<ul>
<li>second level child</li>
<li>second level child</li>
</ul>
</li>
<li>child item</li>
<li>child item</li>
</ul>
</li>
<li>Standard Item</li>
<li>Standard Item</li>
</ul>
Your HTML is slightly wrong: your parents inside parents don't have ul elements.
<ul id="my-menu">
<li>Standard Item</li>
<li>Standard Item</li>
<li class="parent">Item with children
<ul>
<li>child item</li>
<li>child item</li>
<li class="parent">child item with children
<!-- here -->
<ul>
<li>second level child</li>
<li>second level child</li>
</ul>
</li>
</ul>
</li>
<li>child item</li>
<li>child item</li>
<li>Standard Item</li>
<li>Standard Item</li>
<li class="parent">Item with children
<ul>
<li>child item</li>
<li>child item</li>
<li class="parent">child item with children
<!-- and here -->
<ul>
<li>second level child</li>
<li>second level child</li>
</ul>
</li>
</ul>
</li>
<li>child item</li>
<li>child item</li>
<li>Standard Item</li>
<li>Standard Item</li>
</ul>
JavaScript wise, your toggle function doesn't actually toggle anything, or it won't toggle more than once, anyway.
Another problem is that the click handler will also get called when you click on a parent of a parent, which this code accounts for too.
Here I used an anonymous function. You don't have to do this, a named function would work just fine, but it doesn't clutter your only namespace.
This will also work with any level of parents: the attached snippet has second level parents.
var menuParents = document.querySelectorAll("#my-menu .parent");
menuParents.forEach(
menuParent => {
menuParent.addEventListener(
"click",
// inline, anonymous function
// also accepts an event parameter
function (event) {
// check if the parent element was actually clicked (prevent parent of parent from toggling display)
if (event.target == this) {
// this == menuParent
// select ul from menuParent
var menuChild = this.querySelector("ul");
// toggle child menu display, based on it's current display
if (menuChild.style.display == "block") {
// here, you could also set the display to null, since your CSS sets the display to none anyway
menuChild.style.display = "none";
} else {
menuChild.style.display = "block";
}
}
}
);
}
);
Tested on Chrome 87.0.4280.88.
var menuParents = document.querySelectorAll("#my-menu .parent");
menuParents.forEach(
menuParent => {
menuParent.addEventListener(
"click",
// inline, anonymous function
// also accepts an event parameter
function (event) {
if (event.target == this) {
// this == menuParent
// select ul from menuParent
var menuChild = this.querySelector("ul");
// toggle child menu display, based on it's current display
if (menuChild.style.display == "block") {
// here, you could also set the display to null, since your CSS sets the display to none anyway
menuChild.style.display = "none";
} else {
menuChild.style.display = "block";
}
}
}
);
}
);
#my-menu .parent ul {
padding-left: 16px;
display: none;
}
<ul id="my-menu">
<li>Standard Item</li>
<li>Standard Item</li>
<li class="parent">Item with children
<ul>
<li>child item</li>
<li>child item</li>
<li class="parent">child item with children
<ul>
<li>second level child</li>
<li>second level child</li>
<li class="parent">second level parent
<ul>
<li>third level child</li>
<li>third level child</li>
</ul>
<li>second level child</li>
<li>second level child</li>
</ul>
</li>
<li>child item</li>
<li>child item</li>
</ul>
</li>
</li>
<li>Standard Item</li>
<li>Standard Item</li>
<li class="parent">Item with children
<ul>
<li>child item</li>
<li>child item</li>
<li class="parent">child item with children
<ul>
<li>second level child</li>
<li>second level child</li>
<li class="parent">second level parent
<ul>
<li>third level child</li>
<li>third level child</li>
</ul>
</li>
<li>second level child</li>
<li>second level child</li>
</ul>
</li>
<li>child item</li>
<li>child item</li>
</ul>
</li>
<li>Standard Item</li>
<li>Standard Item</li>
</ul>
I have two buttons and two list. This is my code code:
$(document).on('hover','.select-user-type-js',function(){
if($(this).hasClass('select-user-type_customer')){
$('#buyer').show();
$('#seller').hide();
$($this).addClass('active');
$('.select-user-type_performer').removeClass('active');
}
else{
$('#buyer').hide();
$('#seller').show();
$($this).addClass('active');
$('.select-user-type_customer').removeClass('active');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Customer
Seller
<ul id="buyer">
<li>Menu for buyer #1</li>
<li>Menu for buyer #2</li>
<li>Menu for buyer #3</li>
</ul>
<ul id="seller" style="display: none;">
<li>Menu for seller #1</li>
<li>Menu for seller #2</li>
<li>Menu for seller #3</li>
</ul>
I need on hover buttons change specific menu for seller or buyer. How I can do it? My code is not working..
First, you have 2 id="seller". An id should always be unique.
Second, you should use mouseenter.
Third, you have a spelling error in $($this) it should be $(this)
$(document).on('mouseenter', '.select-user-type-js', function() {
$('.select-user-type-js.active').add($(this)).toggleClass('active');
if ($(this).hasClass('select-user-type_customer')) {
$('#buyer').show();
$('#seller').hide();
} else {
$('#buyer').hide();
$('#seller').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Customer
Seller
<ul id="buyer">
<li>Menu for buyer #1</li>
<li>Menu for buyer #2</li>
<li>Menu for buyer #3</li>
</ul>
<ul id="seller" style="display: none;">
<li>Menu for seller #1</li>
<li>Menu for seller #2</li>
<li>Menu for seller #3</li>
</ul>
Seller
---^^^^^^^-----
<ul id="seller" style="display: none;">
---^^^^^^^-----
<li>Menu for seller #1</li>
<li>Menu for seller #2</li>
<li>Menu for seller #3</li>
</ul>
In above code you have duplicate ID values for DOM and DOM must have unique ID values. So try giving different IDs to DOM. It will work.
Also remove inline style from second UL.
JSFIDDLE LINK : https://jsfiddle.net/dipeshbeckham/qq617gs5/4/
plese try mouseover with jQuery on function.
$(document).on('mouseover','.select-user-type-js',function(){
if($(this).hasClass('select-user-type_customer')){
$('#buyer').show();
$('#seller').hide();
$(this).addClass('active');
$('.select-user-type_performer').removeClass('active');
}
else{
$('#buyer').hide();
$('#seller').show();
$(this).addClass('active');
$('.select-user-type_customer').removeClass('active');
}
});
$(".select-user-type_customer").hover(function() {
$('#buyer').show();
$('#seller').hide();
}, function() {
$('#buyer').show();
$('#seller').hide();
});
$(".select-user-type_performer").hover(function() {
$('#buyer').hide();
$('#seller').show();
}, function() {
$('#buyer').show();
$('#seller').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Customer
Seller
<ul id="buyer">
<li>Menu for buyer #1</li>
<li>Menu for buyer #2</li>
<li>Menu for buyer #3</li>
</ul>
<ul id="seller" style="display: none;">
<li>Menu for seller #1</li>
<li>Menu for seller #2</li>
<li>Menu for seller #3</li>
</ul>
You can use class selector element when the mouse pointer hovers over it:
I'm trying to add a scroll to a bootstrap dropdown menu. It's a vertical scroll and the code looks like below. First I have a dropdown that works but when I add the scroll like the second dropdown everything falls apart. How do I properly add a scroll to a dropdown the correct way. I want to use the plugin in my example.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.concat.min.js"></script>
<link href="https://raw.githubusercontent.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown works <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
<li>Menu item 6</li>
<li>Menu item 7</li>
<li>Menu item 8</li>
<li>Menu item 9</li>
<li>Menu item 10</li>
</ul>
</div>
<br>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown do not work <span class="caret"></span></button>
<ul id="myscrollid" class="dropdown-menu mCustomScrollbar" data-mcs-theme="dark">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
<li>Menu item 6</li>
<li>Menu item 7</li>
<li>Menu item 8</li>
<li>Menu item 9</li>
<li>Menu item 10</li>
</ul>
</div>
<script>
$("#myscrollid").mCustomScrollbar({
setHeight:"100px",
scrollbarPosition: "inside",
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="/PATH/TO/jquery.mCustomScrollbar.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/PATH/TO/jquery.mCustomScrollbar.concat.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown works <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
<li>Menu item 6</li>
<li>Menu item 7</li>
<li>Menu item 8</li>
<li>Menu item 9</li>
<li>Menu item 10</li>
</ul>
</div>
<br>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown do not work <span class="caret"></span></button>
<ul id="myscrollid" class="dropdown-menu mCustomScrollbar" data-mcs-theme="dark">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
<li>Menu item 6</li>
<li>Menu item 7</li>
<li>Menu item 8</li>
<li>Menu item 9</li>
<li>Menu item 10</li>
</ul>
</div>
<script>
$(document).ready(function() {
$("#myscrollid").mCustomScrollbar({
setHeight:"100px",
scrollbarPosition: "inside",
});
});
</script>
</body>
</html>
Download the source and specify the path to your plugin.
You should invoke jQuery as shown.
This worked for me.
Hope this helps
I'm trying to show sub navigation when tabbing on parent items and then hide when tabbing or shift+tabbing out of sub-menu.
Here's my JS. I have the first and last statements working, but can't get the last. What am I doing wrong?
// Show Child Navigation
jQuery('.has-child, .currenthas-child').keydown( function(e) {
if (e.keyCode == 9 && !e.shiftKey) {
jQuery(this).children().show();
}
});
//SHIFT + TAB BUTTON
jQuery('.submenu li:first-child').keydown( function(e) {
if (e.keyCode == 9 && e.shiftKey) {
jQuery(this).parent().hide();
console.log("tab first");
}
});
//TAB BUTTON
jQuery('.submenu li:last-child').keydown( function(e) {
if (e.keyCode == 9 && !e.shiftKey) {
jQuery(this).parent().hide();
console.log("tab last");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav role="navigation">
<button class="menu-toggle" aria-label="Navigation menu"></button>
<ul class="menu">
<li class="has-child">
Menu Item
<ul class="submenu" style="display: block;">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu" style="display: none;">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
</ul>
</li>
</ul>
</nav>
Something like this?
[Has sub-sub-menus and hides siblings when showing current. To not hide siblings, simply remove code after .end() in the li.keydown event]
/* Here i simply assign each event to a variable for easy implimintation. */
var myEvents = {
click: function(e) {
jQuery(this).children('ul').show().end().siblings('li').find('ul').hide();
},
keydown: function(e) {
e.stopPropagation();
if (e.keyCode == 9) {
if (!e.shiftKey && jQuery('nav li').index(jQuery(this)) == (jQuery('nav li').length-1)) jQuery('nav li:first').focus();
else if (e.shiftKey && jQuery('nav li').index(jQuery(this)) === 0) jQuery('nav ul:first > li:last').focus().blur();
}
},
keyup: function(e) {
e.stopPropagation();
if (e.keyCode == 9) {
if (myEvents.cancelKeyup) myEvents.cancelKeyup = false;
else myEvents.click.apply(this, arguments);
}
}
}
jQuery(document)
.on('click', 'li', myEvents.click)
.on('keydown', 'li', myEvents.keydown)
.on('keyup', 'li', myEvents.keyup)
// this is needed to keep tabbing focus correct
jQuery('nav li').each(function(i) { this.tabIndex = i; });
/* Below is simply for making menus with sub menues more noticable */
jQuery('li').each(function(i) { if (jQuery(this).children('ul').length) jQuery(this).addClass('highlight'); });
li ul { display: none; }
.highlight > a { background: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav role="navigation">
<button class="menu-toggle" aria-label="Navigation menu">Button</button>
<ul class="menu">
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
</ul>
</li>
</ul>
</nav>
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>