I need to open a submenu, clicking on the parent element. I could do it this way
$(function(){
$('li.dropdown > a').on('click',function(event){
event.preventDefault();
$(this).toggleClass('selected');
$(this).parent().find('ul').first().toggle(300);
$(this).parent().siblings().find('ul').hide(200);
//Hide menu when clicked outside
$(this).parent().find('ul').parent().mouseleave(function(){
var thisUI = $(this);
$('html').click(function(){
thisUI.children(".dropdown-menu").hide();
thisUI.children("a").removeClass('selected');
$('html').unbind('click');
});
});
});
});
But, sometimes I have an actual link as a parent element. And I'd want to go to that link on click. And open the dropdown otherwise. Tried with a click on dropdown:before/ dropdown:after pseudoelements with no luck. And I can't manage to do it adding a span inside dropdown div.
Thank you for any help.
LE: My HTML structure looks like this
<nav id="main-nav">
<ul>
<li>Home</li>
<li class="dropdown">Main Cat
<ul class="dropdown-menu">
<li>Sub Cat1</li>
<li>Sub Cat2</li>
<li>Sub Cat3</li>
</ul>
</li>
<li>Second Cat</li>
</ul>
</nav>
Related
I have a "dot" navigation on a site that has one link with a submenu. Originally, I had a simple JQ function that would slideToggle() the submenu on hover but that was causing some 'bouncing' issues. So, I reverted it back to click() function.
$("#troy-dot-nav li.menu-item-81 > a").click(function(e){
e.preventDefault();
$(this).siblings('.sub-menu').slideToggle('800');
});
In doing so, I need to add the preventDefault() so the submenu would open up on click, but disable the link.
Turns out, I need to keep the link on that active to navigate to that top-level page, but can't seem to figure out the best way to go about allowing the submenu to open (on click or hover; without bouncing) and keep the menu link active.
HTML for Menu
<div class="menu-primary-container">
<ul id="troy-dot-nav" class="menu reverse-dots">
<li class="...">About</li>
<li class="... menu-item-81">
Integrated Services
<ul class="sub-menu" style="display: none;">
<li class="...">EPC & Project Services</li>
<li class="...">Pipeline Construction</li>
<li class="...">Facility Construction</li>
<li class="...">Integrity Management</li>
</ul>
</li>
<li class="...">Safety & Quality</li>
<li class="...">Careers</li>
<li class="...">Contact Us</li>
</ul>
</div>
The CSS creates the dots on the li:after. Removed extra HTML for cleaner look here.
can't you just use css to add/remove an active class and also close all / open related submenu ?
Like so :
$(document).ready(function() {
$('.link').click(function() {
// Remove the "active" class from all links
$('.link').removeClass('active');
// Add the "active" class to the clicked link
$(this).addClass('active');
// Find the corresponding sublist
var sublistId = $(this).data('sublist');
var sublist = $('#' + sublistId);
// Close all sublists
$('.sublist').hide();
// Open the corresponding sublist
sublist.show();
});
});
with that kind of html :
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<ul id="sublist-1" class="sublist">
<li>Sublist item 1</li>
<li>Sublist item 2</li>
</ul>
<ul id="sublist-2" class="sublist">
<li>Sublist item 3</li>
<li>Sublist item 4</li>
</ul>
<ul id="sublist-3" class="sublist">
<li>Sublist item 5</li>
<li>Sublist item 6</li>
</ul>
I have the above code which ideally will slide toggle the ulContainer but it doesn't work as expected. I would like it so when I click on the selector above, it only toggles one of the ul#dropdown-download-links li > a one click at a time. Currently, obviously it toggles them all on click.
$(document).ready(function() {
$("ul#dropdown-download-links li > a").unbind().click(function(e) {
var ulContainer = $(this).closest("li");
e.preventDefault();
$(ulContainer).slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="dropdown-download-links">
<li>Test
<ul>
<li>Toggle on click etc</li>
</ul>
</li>
<li>Test
<ul>
<li>But don't toggle on click of first one</li>
</ul>
</li>
</ul>
I hope that makes sense, I feel like it's a super common probelm it's just hard to explain.
The event is bound on the 'a' element, to get and toggle the child items, you first need to go up one level with the 'parent()' method which returns the 'li' element. After that use the find method to get the child list items.
$(document).ready(function(){
$("ul#dropdown-download-links li > a").unbind().click(function(e) {
var ulContainer = $(this).parent().find("li");
e.preventDefault();
$(ulContainer).slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="dropdown-download-links">
<li>Test
<ul>
<li>Toggle on click etc</li>
<li>Toggle on click etc</li>
</ul>
</li>
<li>Test
<ul>
<li>But don't toggle on click of first one</li>
</ul>
</li>
</ul>
$(document).ready(function(){
$("ul#dropdown-download-links li:first-child >a").unbind().click(function(e) {
var ulContainer = $(this).closest("li");
e.preventDefault();
$(ulContainer).slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="dropdown-download-links">
<li>Test
<ul>
<li>Toggle on click etc</li>
</ul>
</li>
<li>Test
<ul>
<li>But don't toggle on click of first one</li>
</ul>
</li>
</ul>
I found a fiddle that has the functionality I want. However, I'm not sure how to adjust the code (css) to get it to drop down the menu links.
When I click on the = I want the menu to drop down. The original code works by clicking on the parent and showing the child links. I assume it could work for my instance but not sure how.
What I want to accomplish is clicking the = drops Item 1 and Item 2. Otherwise they are hidden.
HTML
<!-- original code -->
<ul id="nav">
<li>Home</li>
<li class="parent">About
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
<li>Contact</li>
</ul>
<!-- my code -->
<div class="header-nav">
<nav class="nav-menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</nav>
</div>
JS
$(document).ready(function() {
$('.parent').click(function() {
$('.sub-nav').toggleClass('visible');
});
});
// rename the JS to use the id/class for my script
The JSfiddle is here https://jsfiddle.net/cRsZE/982/
You have to update the click event in your jQuery to work for clicking the menu icon. This works:
$(document).ready(function() {
$('#menu-icon').click(function() {
$('.nav-menu ul').toggleClass('visible');
});
});
Edit As requested via the comments, to have the menu appear below the menu icon all you have to do is reposition the menu icon to be above the ul like so:
<div class="header-nav">
<nav class="nav-menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</nav>
</div>
And working Fiddle
Need To update Code Like That :
$(document).ready(function() {
$('#menu-icon').click(function() {
$('.nav-menu ul').toggleClass('visible');
});
});
For Documentation :https://jqueryui.com/menu/
Cleaned up code a little. Like this?
https://jsfiddle.net/cshanno/cRsZE/990/
$(document).ready(function () {
$('#menu-icon').click(function () {
$('.sub-nav').toggleClass('visible');
});
});
I am trying to achieve a simple drop-down menu with the following HTML structure. This structure is mandatory (I think) as explained in the illustrations below.
<nav role="navigation">
<ul id="main-menu" class="nav top-nav clearfix">
<li id="menu-item-1" class="menu-item">Menu 1</li>
<li id="menu-item-2" class="menu-item">Menu 2</li>
<li id="menu-item-3" class="menu-item">Menu 3</li>
</ul>
<ul id="sub-menu-1" class="sub-menu nav clearfix">
<li class="menu-item">Sub Menu 1.1</li>
<li class="menu-item">Sub Menu 1.2</li>
<li class="menu-item"><a href="#">Sub Menu 1.3/a></li>
</ul>
<ul id="sub-menu-2" class="sub-menu nav clearfix">
<li class="menu-item">Sub Menu 2.1</li>
<li class="menu-item">Sub Menu 2.2</li>
<li class="menu-item"><a href="#">Sub Menu 2.3/a></li>
</ul>
</nav>
To get a better idea of what I am trying to achieve I've made the following illustrations:
Simple menu with items arranged with inline blocks. As you can see, the menu scales to 100% of the container and has all the items arranged in center.
When hovering over a menu item which has a submenu. In the illustration that's Menu 1 which has Sub Menu 1 and it needs to display it on mouse hover, like a simple <ul><li><ul></ul></li></ul> would do. As you can see the submenu has to scale to 100% of the container and has all the items arranged in center.
I think the best approach is with javascript (not sure you can do this with only CSS), but I am kind off stuck. The sub menu appears on main menu item hover, but as soon as I hover out into the sub menu in order to navigate, the sub menu disappears. Anyway, this is the javascript:
$('nav #main-menu .menu-item a').hover(
function() {
var id = $(this).parent().attr('id');
id = id.substr(id.length - 1);
submenu = $('#sub-menu-' + id);
submenu.show();
},
function() {
var id = $(this).parent().attr('id');
id = id.substr(id.length - 1);
submenu = $('#sub-menu-' + id);
submenu.hide();
}
);
I am pretty sure that there is a better way to do this.
I've also set up a FIDDLE for better understanding.
//show sub menu when we hover over an item
$('nav #main-menu > .menu-item')
.on('mouseenter', function() {
$('.sub-menu').hide();
var id = $(this).attr('id');
id = id.substr(id.length - 1);
$('#sub-menu-' + id).show();
});
//hide submenu when the mouse goes away
$('nav').on('mouseleave', function() { $('.sub-menu').hide(); });
Modified your fiddle here: http://jsfiddle.net/3z8MR/10/
Edit
Add this line to conform to your specs in the comments
$('.sub-menu').on('mouseleave', function() { $(this).hide(); });
So I have this vertical menu that slides down when you click on the parent item to display the children elements and when you click on a child element it takes you to the link.
My problem is that when you click on the link the whole submenu slides up because of the slideToggle function on it - how can I stop the slide up from happening only if a link is clicked?
My Menu:
<ul id="menu-top" class="menu">
<li class="has-submenu">
Portfolio
<ul class="sub-menu" style="display: none;">
<li class="menu-item">
Book I
</li>
</ul>
</li>
<li class="has-submenu">
Headshots
<ul class="sub-menu" style="display: none;">
<li class="menu-item">
Men
</li>
</ul>
</li>
<li class="regular-link">
Personal Work
</li>
</ul>
JS:
jQuery('#menu-top').children().click(function(e){
var $next = jQuery(this).find('.sub-menu');
var $child =('.active-menu');
$next.stop().slideToggle('slow').toggleClass('active-menu');
jQuery(".sub-menu").not($next, $child).slideUp('slow').removeClass('active-menu');
});
jQuery('.has-submenu > a').click(function(e){
e.preventDefault();
});
Use stopPropagation to prevent the event from bubbling.
jQuery('.submenu a').click(function(e){
e.stopPropagation();
});
To stop the slideToggle menu from sliding up when clicking the ul's children links, you can use the jquery function stopPropogation() on the click event of the link itself.
$(".shop-by-dept ul li a").click(function(e){
e.stopPropagation();
});
This will prevent the slideToggle() action from sliding the menu up, while the browser loads the next page.