I've been looking at this for a while and I'm not sure how to target this.
When I have a menu where the top level menu items have dropdowns, I can write the CSS/JS so that when the button clicks, it shows the dropdown. But when you click one of the buttons, it opens up ALL the dropdowns.
How do I specifically target so that when you click a menu button, it only opens up the sub-menu for that specific button.
<li id="Menu-item-2135" class="menu-item">Menu 1
<ul class="sub-menu">
<li>list item 1</li>
<li>list item 2</li>
</ul></li>
//The JS
$('#menu-item-2135').click(function(){
$('.sub-menu').toggleClass('active');
});
//The CSS
.sub-menu {
display:none;
&.active {
display:flex;
}
}
I have been using the menu item ID to target the menu items and using toggleClass('active') for making the sub-menu appear/hide but this means that anytime I add a new menu item to the site that then has a sub-menu, I had to write the JS for that menu ID. Just wondering if there is a way to tweak this so it does all this without needing to specially write it for every menu ID.
I use .find() to find submenu on clicked element, then , if you need, close all opened submenus before with line $('.menu-item').each((i,e)=>{$(e).find('.sub-menu').removeClass('active')}) if you don't neeed that - just remove
$('.menu-item').each((index,element)=>{
$(element).on('click', ()=>{
$('.menu-item').each((i,e)=>{$(e).find('.sub-menu').removeClass('active')}) // if you need to close other sub-menu
$(element).find('.sub-menu').toggleClass('active')
})
})
.sub-menu {
display:none;
}
.sub-menu.active {
display:flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="menu-item">Menu 1
<ul class="sub-menu">
<li>list item 1</li>
<li>list item 2</li>
</ul>
</li>
<li class="menu-item">Menu 2
<ul class="sub-menu">
<li>list item 1</li>
<li>list item 2</li>
</ul>
</li>
Related
I have my html as follows:
<button id="hamburger-nav"></button>
<nav>
<ul>
<li>
<button>Sub Nav Item 1</button>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</li>
<li>
<button>Sub Nav Item 2</button>
<ul>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
</ul>
</li>
<ul>
</nav>
This is a mobile menu that has a hamburger button that activates the "nav" on click. How do I get the index of the sub nav buttons so I can active their sibling "ul" sub sub menu? Granted all of this has to be done on the onclick method since it is a mobile menu.
I was hoping to have a universal method that could find the index of (this), i.e., the item that is clicked, and then get the corresponding "ul", instead of individually naming these and creating a massive, duplication of code for each menu section.
I would like to use plain old JavaScript as I am trying to cut down on the dependencies of jQuery, etc. Something along the lines of:
var menuButtons = document.querySelectorAll("nav > ul > li > button");
var submenu = document.querySelectorAll("nav > ul > li > ul");
menuButtons.onclick = myFunction(this);
function myFunction(v) {
submenu[v].classList.add("open");
}
While I know this JavaScript doesn't work, accessing the index of the clicked button and opening its accompanying nav was my thought process. But perhaps I'm way of going about this.
Thank you in advance!
I may possible have a requirement where i have to link the parent menu to a link rather than showing sub menu. Right now i am using Slick Menu http://slicknav.com/
Logically parent menu should not be linked as it should show child menu on mobile device. while desktop version we can counter this with hover effect can show sub-menus and click on the parent menu can open link also but on small screen we can either open link or show submenu.
my question right now is that in fiddle example (http://jsfiddle.net/y1dLdd1f/1/) i am linking Parent 1 meny to google.com, but script is blocking this. How can i unblock it and when user click on it it opens the page rather than showing the sub menu if parent menu has a proper link
<ul id="menu">
<li>Parent 1
<ul>
<li>item 3</li>
<li>Parent 3
<ul>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
</li>
<li>item 4</li>
</ul>
</li>
<li>item 1</li>
<li>non-link item</li>
<li>Parent 2
<ul>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>
</li>
</ul>
Slick menu has a number of available options including "allowParentLinks", all you need should be,...
$(document).ready(function(){
$('#menu').slicknav({
allowParentLinks:"true"
});
});
But to show this working in JSFiddle you would need to add target="_blank" to you <a> tag.
I'm trying to select the content I click and this content has to be the first one to be selected. Like the select option.
This is the img.
I'm not quite sure how to make this, this is my demo: http://jsbin.com/jazej/1#0
Basically the part of the code is this.
<li class="dropdown">
Select Card <b class="caret"></b>
<ul class="dropdown-menu" id="indexCards">
<li class="active">Card 1</li>
<li class="">Card 2</li>
<li class="">Card 3</li>
<li class="">Card 4</li>
</ul>
</li>
But I can't get no event fire or something when I do $('#indexCards'). Any idea about this?
Try this : Read text of the clicked anchor inside indexCards and put it in selectCard
$(function(){
$('#indexCards li a').click(function(){
$('.active').removeClass('active');
$(this).closest('li').addClass('active');
var text = $(this).text();
$('#selectCard').html(text+'<b class="caret"></b>');
});
});
I have built a custom slide menu which is giving me a slight bit of grief. Click here for example when you click the menu button, the slide menu pushes the background image to the right and leaves and excess of x-scroll.
My objective for this function is to have sliding menu to sit on top of background image. Currently my background image is an <img> tag and is absolute positioned as the clients wants to update images manually. this maybe the main reason why this issue is occurring. Also the div id="right" is wrapping all the content, including the background image. I have trying placing around with where i wrap the content however i can't figure out a method to make this work correctly i am wondering if there is a way to to work around this Below is a snippet of code, both javascript and HTML structure.
$('#button').toggle(
function() {
$('#right').animate({ left: 400 }, 'slow', function() {
$('#button').html('Close');
});
},
function() {
$('#right').animate({ left: 0 }, 'slow', function() {
$('#button').html('Menu');
});
}
);
<div id="right">
<div id="menubar">
<div id="button">
Menu
</div>
</div>
<div id="menu">
<ul>
<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>
<li>Menu Item 11</li>
<li>Menu Item 12</li>
</ul>
</div>
can someone advise me on a way i can solve this issue?
Simpy add :
Body{
overflow-x:hidden;
}
So hide the body-s horizontal scroll.
More information about owerflow.
Please find my ul li here, This li is working for horizontal tab using a bootstrap tab. I'm trying to apply a class; when the 2nd and 3rd li have the class active, I want to apply a style class on the 1st li. simlarly for next 3 li and rest also. I've tried with jquery but didn't succeed.
<ul id="myTab" class="nav-tabs">
<li class="side-menu-grp">Group One</li>
<li>List One</li>
<li>List Two</li>
<li class="side-menu-grp">Group Two</li>
<li>List One</li>
<li>List Two</li>
<li class="side-menu-grp">Group Three</li>
<li>List One</li>
<li>List Two</li>
</ul>
I think that this is what you want:
$('.active').prev('.side-menu-grp').addClass('class');
It selects the elements with class active (the lis if you don't reuse the class) and locates the first previous sibling element with class side-menu-grp and add the class what you want to it.