i have menu like this
<ul>
<li>
Home
<ul class="sub">
<li>Text</li>
<li>Test</li>
</ul>
</li>
<li>
About
<ul class="sub">
<li>Text</li>
<li>Test</li>
</ul>
</li>
<li>
Contact
<ul class="sub">
<li>Text</li>
<li>Test</li>
</ul>
</li>
</ul>
I am using hoverIntent plugin that cause the sub-menu to remain opened for 3 seconds. But i want to close the other opened sub-menu on hovering a main menu. How to close other sub-menus?
here is js code
$('ul > li').hoverIntent({
over: function(){
$(this).children('ul').slideDown('slow');
},
timeout: 3000,
out: function(){
$(this).children('ul').slideUp();
}
});
Try this:
$('ul > li').hoverIntent({
over: function(){
// slide up all submenus before opening this menu
$("ul.sub").slideUp();
$(this).children('ul').slideDown('slow');
},
timeout: 3000,
out: function(){
$(this).children('ul').slideUp();
}
});
Related
I have this HTML code
<ul>
<li>link
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</li>
<li>link
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</li>
</ul>
now I want -> hide all sub menus -> if I click to main li element -> show current li's sub menu and next if I click to another main li element show sub menu and hide previously displayed sub menu.
Can anyone help me?
You can do it like this DEMO
$('li ul').hide();
$('li a').click(function() {
$(this).next('ul').slideToggle();
$('ul li ul').not($(this).next('ul')).slideUp();
});
You can do something simple like this with click event
$('#main>li>a').click(function() { // bind click event to a tag
$(this)
.next() // get ul inside
.stop() // stop any previous animation
.slideToggle() // toggle the visibility
.end() // back to previous selector , here the clicked element
.parent() // get parent li
.siblings() // get its siblings
.find('ul') // get ul inside them
.stop() // stop any previous animation
.slideUp() // hide them
});
#main>li>ul {
/* hide sub ul initially */
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="main">
<li>link
<ul>
<li>link
</li>
<li>link
</li>
<li>link
</li>
</ul>
</li>
<li>link
<ul>
<li>link
</li>
<li>link
</li>
<li>link
</li>
</ul>
</li>
</ul>
Trying to make javascript horizontal menu, but can't get second button to open its own items, (when i click the second button it opens the items that are for the first button) here is current code:
JavaScript:
$(document).ready(function() {
$(".menu-button,.menu-button1").click(function() {
$(".menu-bar").toggleClass("open");
});
})
HTML:
<ul class="menu">
<li title="home">menu</li>
<li title="pencil">pencil</li>
<li title="about">about</li>
</ul>
<ul class="menu-bar">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
<ul class="menu-bar">
<li>Menu1</li>
<li>About</li>
</ul>
Before I start my answer, let me explain jQuery a bit.
$(".menu-button,.menu-button1").click(function() {
$(".menu-bar").toggleClass("open");
});
This broken down:
$(".menu-button,.menu-button1").click(function() { -> When any item with class menu-button OR class menu-button1 is clicked
$(".menu-bar").toggleClass("open"); ->Toggle the "open" class for all elements in your page with class menu-bar.
Since you call all the menus instead of the specific one you want, it opens both of them.
So, be more specific by - for starters - using IDs, or unique/identifying classes:
JS:
$(document).ready(function() {
$(".menu-button.home").click(function() {
$(".menu-bar.home").toggleClass("open");
});
$(".menu-button.pencil").click(function() {
$(".menu-bar.pencil").toggleClass("open");
});
})
HTML:
<ul class="menu">
<li title="home">menu</li>
<li title="pencil">pencil</li>
<li title="about">about</li>
</ul>
<ul class="menu-bar home">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
<ul class="menu-bar pencil">
<li>Menu1</li>
<li>About</li>
</ul>
I agree with M.Doye's comment about using .each (but sorry, I can't answer directly).
I want to add that, it will be much easier with that kind of HTML structure I think:
<ul class="menu">
<li title="home">
Show Menu 1
<ul class="menu-bar">
<li>Menu1
</li>
</ul>
</li>
<li title="pencil">
Show Menu 2
<ul class="menu-bar">
<li>Menu2
</li>
</ul>
</li>
</ul>
The, click on the link and use .next() or .siblings or closest... to show the right ul.
But of course you'll have to rewrite you CSS :)
Here is updated code
$(document).ready(function () {
$(".menu-button,.menu-button1").click(function () {
$(this).siblings(".menu-bar").toggleClass("open");
})
})
<ul class="menu">
<li title="home">menu
<ul class="menu-bar">
<li>Menu1</li>
<li>About</li>
</ul>
</li>
<li title="pencil">pencil
<ul class="menu-bar">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
</li>
</ul>
here is a jsfiddle
My website nav-menu uses slideToggle function in the mobile menu.It has a slide toggler which controls the open/close of menu.One of the menu has a sub-menu . When clicking on that menu having sub-menu(Contains ul) the sub-menu open and closes and opens 4/5 times and then it closes.
My codes are
<span class="menu-toggler"></span>
<ul class="nav-menu align-right">
<li class="current">home</li>
<li>about us</li>
<li>services</li>
<li>works</li>
<li>team</li>
<li>Blog</li>
<li>
Extra
<ul>
<li>blog grid 3</li>
<li>blog grid 4</li>
<li>blog single</li>
<li>portfolio 3</li>
<li>portfolio single</li>
</ul>
</li>
<li>contact</li>
<li><i class="fa fa-search"></i></li>
</ul>
And my js
$(document).on('click', '.menu-toggler' ,function(e){
$('.nav-menu').slideToggle();
$('.menu-toggler').toggleClass('open');
});
if($('.nav-menu li').find('ul')){
$('.nav-menu li ul').addClass('drop-menu');
}
$(window).on('load resize', function(){
if($(window).width() < 1000){
$('.drop-menu').parent('li').find('a').on('click', function(){
$('.drop-menu').slideToggle();
})
}
})
How can i stop repetating sliding of the sub-menu
It might be reading multiple clicks. Just do a slide down function on click and hide the menu with a separate function.
$(document).on('click', '.menu-toggler' ,function(e){
$('.nav-menu').slideDown();
$('.menu-toggler').toggleClass('open');
});
$('.open').on('click',function(){
$('.nav-menu').hide();
});
I have problems with creating a dropdown menu with jQuery.
This code shows the sub menus on hover but I couldn't get the sub sub menu to work too
$(document).ready(function() {
$("li").has(".sub").hover(function() {
$(this).find(".sub").toggle();
});
});
Here's the JS code
http://codepen.io/anon/pen/rVmabP
Lose the sub-sub class and use the immediate descendant selector to help you:
HTML
<ul id="nav">
<li>11111
<ul class="sub">
<li>2</li>
</ul>
</li>
<li>11111
<ul class="sub">
<li>2</li>
<li>22222
<ul class="sub">
<li>3</li>
</ul>
</li>
</ul>
</li>
</ul>
JavaScript
$(document).ready(function() {
$("li").has("> .sub").hover(function() {
$(this).find("> .sub").stop().slideToggle();
});
});
JSFiddle
Note that this would work for unlimited nested .subs.
I'm making a dropdown menu with jquery (some of the code is borrowed from a tutorial by someone, although I forget who...). When I use the dropdown, it slides up and down really fast, and I can't figure it out. What do you think?
HTML
<div id="nav">
<ul class="topnav">
<li><a class="selected" href="#" title="home">home</a></li>
<li>events</li>
<li>photos</li>
<li>staff
<ul class="subnav">
<li>Luke</li>
<li>Darth Vader</li>
<li>Princess Leia</li>
<li>Jabba the Hutt</li>
</ul>
</li>
<li>contact</li>
jQuery
$(document).ready(function(){
$("ul.subnav").parent() .hover(function() {
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on hover...
$(this).parent() .hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow');
});
$(this).parent().find("ul.subnav") .hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow');
});
}).hover(function() {
$(this).addClass("subhover");
}, function(){
$(this).removeClass("subhover");
});
You can use speed in milliseconds instead 'slow' and 'fast'. Try slideUp(1000) (or 2000-3000 for example). It's should slide up very smooth.
Here is a more simple version of a 1 lvl dropdown, for more levels, its as easy as copy and paste, with a little styles modification. Hope it helps you
<script type="text/javascript">
$(document).ready(function(){
$('.menu-option').hover(mouse_in, mouse_out);
function mouse_in(){
$(' > div', this).slideDown("normal");
}
function mouse_out(){
$(' > div', this).slideUp("fast");
}
});
</script>
<style type="text/css">
ul div
{
display: none;
}
div{
display :table-cell;
position: absolute;
}
.menu-option{
display: block;
float: left;
width: 120px;
}
.menu-option ul{
z-index: 100;
}
</style>
<ul> <li class="menu-option"> MENU 1
<div>
<ul>
<li>sub menu 1 1 </li>
<li>sub menu 1 2 </li>
<li>sub menu 1 3 </li>
</ul>
</div> </li> <li class="menu-option"> MENU 1 <div>
<ul>
<li>sub menu 1 1 </li>
<li>sub menu 1 2 </li>
<li>sub menu 1 3 </li>
</ul>
</div> </li>
<li class="menu-option"> MENU 1 <div>
<ul>
<li>sub menu 1 1 </li>
<li>sub menu 1 2 </li>
<li>sub menu 1 3 </li>
</ul>
</div> </li>
<li class="menu-option"> MENU 1 <div>
<ul>
<li>sub menu 1 1 </li>
<li>sub menu 1 2 </li>
<li>sub menu 1 3 </li>
</ul>
</div> </li> </ul>