Menu
I've looked through some of the other questions on this site that I thought might help, like this one and this one, but they don't seem to answer my question. What I have is the following:
$(document).ready(function() {
$(".has-submenu ul").hide();
$(".has-submenu").click(function() {
$(this).children("ul").toggle();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">Item 1</a></li>
<li class="has-submenu"><a href="#">Item 2</a>
<ul>
<li><a href="#">Sub Item 1</a></li>
</ul>
</li>
</ul>As you can see from this snippet, the submenu is hidden regardless of whether I click "Item 2" or "Sub Item 1". I realize this is because "Sub Item 1" is part of the <li class="has-submenu">, so of course once it's clicked it goes through and toggles the sub menu. The CSS is doing what it's supposed to be doing, I just don't know how to tweak the CSS to say "Only hide the submenu if the parent li was clicked. I tried modifying the JQuery click function to look for $(".has-submenu a") to specify that it should only do that if that specific element was clicked, but that didn't seem to help.
I'm sure it's an easy fix, I just don't know how to do it. Thanks!
808
Now, the submenu dropdown is hidden, but will be exposed and become visible when we hover over its correlating parent in the navigation bar. By styling ul li ul, we have access to that submenu, and by styling ul li ul li, we have access to the individual list items within it.
The submenu is just an nested unordered list. To change how the menu appear you would have to override the styles applied to them. It would probably be best to start by creating a child theme and doing a rewrite for the menu system in the style.css file. You may have to make several changes depending on how the menu is implemented.
I have main menu title Travel Blog. And under this submenu titles (e.g.) 1, 2, 3 I have main menu title Social Media Tools. And under this submenu titles 4, 5, 6. Submenus are ALL blog categories linked to/added to main menu.
This is because we can’t actually focus on the li (unless we add a tabindex="0" ). We’re actually focusing on the link ( a) within it. :focus-within allows us to still apply styles to the parent li when focusing on the link (pretty darn cool!):
You can use $(".has-submenu > a") for click to select a that is direct child of .has-submenu only and then use next() to target ul
$(".has-submenu ul").hide();
$(".has-submenu > a").click(function() {
$(this).next("ul").toggle();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">Item 1</a></li>
<li class="has-submenu"><a href="#">Item 2</a>
<ul>
<li><a href="#">Sub Item 1</a></li>
</ul>
</li>
</ul>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
