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>
Related
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.
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'm trying to build a 'mega nav' only I'm running into some issues when I use a custom scrollbar.
My issue is that the custom scrollbar adds markup adding overflow hidden to my nav and as a result the .sub-nav element becomes hidden.
The only solution I can think of is to add position fixed to the .sub-nav element and then position it using JavaScript which very messy and not that reliable.
I've pasted 2 fiddles showing what I mean - I hope these make sense and any advice would be much appreciated!
Thanks
Without Plugin
http://jsfiddle.net/f4qh27n7/11/
With Plugin
http://jsfiddle.net/f4qh27n7/10/
Function to position element
function calcNav(){
if( $('#breadcrumb').length > 0 ){
var b = $('#breadcrumb').offset().top;
var w = $(window).scrollTop();
var x = b - w;
$('.sub-nav').css('top', x);
}
}
calcNav();
var scrollTimeout;
$(window).scroll(function() {
clearTimeout( scrollTimeout );
scrollTimeout = setTimeout( calcNav, 50 );
});
Pretty similar to #Lajon solution.
Just needed a little bit of restructuring:
http://jsfiddle.net/8zxq5jas/4/
Kind of what you where looking for?
$(".js-parent-category")
.on("mouseenter", function() {
var target = $(this).attr("data-sub-nav-target");
var element = $("." + target);
element.addClass("active");
})
.on("mouseleave", function() {
var target = $(this).attr("data-sub-nav-target");
var element = $("." + target);
element.removeClass("active");
});
$(".demo").customScrollbar();
<ul class="products-nav btcf">
<li>Products</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<!-- Products Mega Nav -->
<div class="mega-nav btcf">
<ul class="parent-cat demo gray-skin scrollable">
<li>Parent Category 1</li>
<li>Parent Category 2</li>
<li>Parent Category 3</li>
<li>Parent Category 4</li>
<li>Parent Category 5</li>
<li>Parent Category 6</li>
<li>Parent Category 7</li>
<li>Parent Category 8</li>
<li>Parent Category 9</li>
<li>Parent Category 10</li>
</ul>
<div class="js-sub-nav-1 sub-nav">
<h3>Sub Category 1</h3>
<ul>
<li>Child link</li>
<li>Child link</li>
<li>Child link</li>
</ul>
</div>
<div class="js-sub-nav-2 sub-nav">
<h3>Sub Category 2</h3>
<ul>
<li>Child link</li>
<li>Child link</li>
<li>Child link</li>
</ul>
</div>
<div class="js-sub-nav-3 sub-nav">
<h3>Sub Category 3</h3>
<ul>
<li>Child link</li>
<li>Child link</li>
<li>Child link</li>
</ul>
</div>
<div class="js-sub-nav-4 sub-nav">
<h3>Sub Category 4</h3>
<ul>
<li>Child link</li>
<li>Child link</li>
<li>Child link</li>
</ul>
</div>
<div class="js-sub-nav-5 sub-nav">
<h3>Sub Category 5</h3>
<ul>
<li>Child link</li>
<li>Child link</li>
<li>Child link</li>
</ul>
</div>
<div class="js-sub-nav-6 sub-nav">
<h3>Sub Category 6</h3>
<ul>
<li>Child link</li>
<li>Child link</li>
<li>Child link</li>
</ul>
</div>
<div class="js-sub-nav-7 sub-nav">
<h3>Sub Category 7</h3>
<ul>
<li>Child link</li>
<li>Child link</li>
<li>Child link</li>
</ul>
</div>
<div class="js-sub-nav-8 sub-nav">
<h3>Sub Category 8</h3>
<ul>
<li>Child link</li>
<li>Child link</li>
<li>Child link</li>
</ul>
</div>
<div class="js-sub-nav-9 sub-nav">
<h3>Sub Category 9</h3>
<ul>
<li>Child link</li>
<li>Child link</li>
<li>Child link</li>
</ul>
</div>
<div class="js-sub-nav-10 sub-nav">
<h3>Sub Category 10</h3>
<ul>
<li>Child link</li>
<li>Child link</li>
<li>Child link</li>
</ul>
</div>
</div>
My suggestion would be to move all your sub-nav's out of the demo parent.
I would change the DOM structure to something as:
<div class="mega-nav">
<div class="sub-nav"></div>
<div class="sub-nav"></div>
<div class="sub-nav"></div>
<ul class="parent-cat demo gray-skin">
<li>Parent Category</li>
<li>Parent Category</li>
<li>Parent Category</li>
</ul>
</div>
After changing the DOM structure to the one above you can use index() to target relevant content on hover:
var tid;
$('.sub-nav').hide();
$('.products-nav').delegate(".parent-cat .viewport .overview > li", "mouseenter", function () {
$('.sub-nav').hide();
clearTimeout(tid);
$($(".sub-nav")[$(this).index()]).show();
});
$('.products-nav').delegate(".parent-cat .viewport .overview > li", "mouseleave", function () {
tid = setTimeout(function () {
$('.sub-nav').hide();
}, 1000);
});
$(".demo").customScrollbar();
Working fiddle
I have a html dropdown menu. I want to select only the parent ul list items by jquery.
my menu code is:
<ul>
<li>list parent</li>
<li>list parent
<ul>
<li>list child</li>
<li>list child</li>
<li>list child</li>
<li>list child</li>
<li>list child</li>
</ul>
</li>
<li>list parent</li>
<li>list parent</li>
<li>list parent</li>
</ul>
I want to select only list parent to stylize. Not list child
You need to give your root ul a class or id here:
<ul id="rootUL">
Then you can use:
$('ul#rootUL > li').css(...);
The > selector helps you to select li elements which are the direct children of your list with id named rootUL
Add an identifier to the parent ul like an ID then use the child selector to select only its children
<ul id="nav">
<li>list parent</li>
<li>list parent
<ul>
<li>list child</li>
<li>list child</li>
<li>list child</li>
<li>list child</li>
<li>list child</li>
</ul>
</li>
<li>list parent</li>
<li>list parent</li>
<li>list parent</li>
</ul>
then
$('#nav > li')
The > selector allows you to select only the direct children of your elements.
So, assuming your root ul has a .root class set, you could use this :
$("ul.root > li")
I have a simple drop down menu. When you click .drop-down, a sub menu slides down. However, if you click any of the children of .drop-down, it slides back up again. I want only the .drop-down that was clicked to slide the menu, none of the its descendents.
Here it is in action: http://jsfiddle.net/tmyie/uXn5k/2/
<ul>
<li class="drop-down">
Main
<ul class="sub-menu">
<li>Sub </li>
<li>Sub </li>
<li>Sub </li>
</ul>
</li>
<li>Main </li>
<li>Main </li>
<li>Main </li>
<li>Main </li>
</ul>
jQuery
$( ".drop-down" ).click(function() {
$('.sub-menu').slideToggle();
});
$('.drop-down').fadeTo('slow', 0.3);
http://jsfiddle.net/tmyie/uXn5k/2/
Target the a specifically
$( ".drop-down>a" ).click(function() {
$('.sub-menu').slideToggle();
});
$('.drop-down').fadeTo('slow', 0.3);
Or, just move the class from the li to the a
<ul>
<li>
Main
<ul class="sub-menu">
<li>Sub </li>
<li>Sub </li>
<li>Sub </li>
</ul></li>
<li>Main </li>
<li>Main </li>
<li>Main </li>
<li>Main </li>
</ul>
EDIT:
By the way, you're going to run into trouble with multiple dropdowns using this script. Consider making the following changes:
$( ".drop-down>a" ).on("click", function() {
$(this).siblings('.sub-menu').slideToggle();
});
$('.drop-down').fadeTo('slow', 0.3);
http://jsfiddle.net/uXn5k/6/