slide navigation - javascript

I'm trying to make slide navigation. Here is my code
html
<li>
Services
<div class="subcategories">
Cleaning
</div>
</li>
The subcategories div is hidden.
js
$('li a').hover(function() {
$(this).next().slideToggle('fast', function() {
});
});
This code works. The problem is that when the mouse goes out of the li a the subcategories div disappears.
What i want is that when the user point the li a the subcategories div to be shown so the user be able to click on some link of the sub navigation.

Try this please Demo http://jsfiddle.net/QEkDa/ or http://jsfiddle.net/qmrHm/
Please let me know if I missed anything!
Hope rest fits the cause :)
code
$(".subcategories").hide();
$('li a').mouseover(function() {
$(this).next().slideToggle('fast', function() { // <== could use slideDown
}).mouseout(function() {
$(".subcategories").slideUp();
});
});​​

You use a:first
$('li a:first').hover(function() {
$(this).next().slideToggle('fast', function() {
});
});

$('li').hover(function(){
$(this).children('.subcategories').slideToggle('fast', function(){});
});
Try this, you need to put the hover action on li, or when you mouse over the div it will hide, because you are now on the div, not on the anymore.
With children() you select the action for the nodes that are class "subcategories" under that li, but you are still on li, so it won't hide

Related

Wordpress show sub navigation on click

I have the default wordpress menu which displays sub navigation links on hover but I'm wanting to show the sub navigation only when the user clicks the parent link. You can see my menu here https://jsfiddle.net/foley13/83sk1p1x/
I have a little javascript that should do this but isn't working.
$(function(){
//Hide all the sub menus
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
//Find the child ul and slideToggle
$(this).children("ul").slideToggle('fast');
$(this).toggleClass("down");
});
});
I don't know if CSS is preventing this working but I just want to remove the hover and just have click.
You have troubles with li:has(ul). Just add class "dropdown" to these li, which have dropdown. ;)
Here is the code that works for me, I turned on jQuery in jsFiddle:
https://jsfiddle.net/83sk1p1x/2/
(function(){
//Hide all the sub menus
$('li.menu-item-has-children').hover(function(){
$('li.menu-item-has-children').children("ul.sub-menu").css({"display":"none"});
return;
});
$("li.menu-item-has-children").click(function(e){
e.preventDefault();
//Find the child ul and slideToggle
$(this).children("ul").slideToggle('fast');
$(this).toggleClass("down");
});
})();
However, in WordPress (due to its issues with jquery's $) you will have to write the function this way:
(function($){ ...
// code
}(jQuery);
Try this
Script
$(function(){
$("li:has(ul)").click(function(){
$(this).toggleClass("hover");
});
});
And in css you need to replace :hover with .hover
Check working fiddle
Thankyou for your help but I managed to solve my issue by still having my original script:
$(function(){
//Hide all the sub menus
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
//Find the child ul and slideToggle
$(this).children("ul").slideToggle('fast');
$(this).toggleClass("down");
});
});
but I removed the left: -999em; from the .sub-menu and .sub-menu ul and this resolved the hover issue

jQuery toggle: Close all open li when another one is clicked

I've got an accordion menu which toggles on click.
This is the code :
$('ul.internal-nav-list li ').on('click', function () {
$(this).find('.internal-sub-list li ').toggle();
});
And the markup looks like this:
<div id="internal-nav">
<ul class="internal-nav-list">
<li><a>products</a>
<ul class="internal-sub-list">
<li>product1</li>
<li><a href="product2.aspx" >product2</a></li>
<li>product3</li>
</ul>
</li>
</ul>
</div>
Now I'm trying to enable that when an li element from the menu is open and the user clicks on another li, the open one will automatically close. Can anybody give me a suggestion on how to do this?
I'v I'm interpreting what you want correctly, try this:
var mainlis = $('.internal.nav.list > li'); // cache selector
mainlis.on('click', function(e) {
e.preventDefault();
var me = $(this);
mainlis.hide();
me.show();
});
The other existing answers come close, but it seems like what you want to do is hide the children of other menu items when the main menu items are clicked. If that is the case, the following will do:
$('.internal-nav-list > li > a').on('click', function () {
var $thisLi = $(this).parents('li');
$thisLi.siblings().find('.internal-sub-list').hide();
$thisLi.find('.internal-sub-list').show();
});
Note the first selector: this restricts the click handler to just the anchor, not the entire li. That means if they click on a child of the currently displayed main menu item, the function will not be called. That way you don't risk having a flicker as the click the submenu items...
In the handler itself, it traverses back to the parent li, finds its siblings and hides their children. Then is shows the submenu for the currently selected main menu.
Note that I took the liberty of hiding the entire ul of the non-selected menus; this should be faster than hiding each child. Perhaps not significantly, but I find it's best practice to perform these kinds of actions on the container rather than all children of the container.
The simplest solution is to close all lielements and open only the one clicked
$('ul.internal-nav-list > li').on('click', function () {
$(this).siblings('li').slideUp();
$(this).slideDown();
});
EDIT As Morfie pointed out, only the immediate children li of the internal-nav-list should be clickable, thus the > operator is used.
Thanks for the suggestions- I got it working this way in the end (in case it helps anyone)
$('ul.internal-nav-list li').on('click', function () {
$close = $(this).find('.internal-sub-list li ').toggle();
$('.internal-sub-list li').not($close).hide()
});

About Menu Child's Slide Toggle jQuery

I create a menu for mobile version, and I face some problems with my script.
This is my code of menu slideToggle(); function :
$('.menu ul li').on('click', function(){
$('.menu ul li ul').slideToggle();
});
Jsfiddle demo.
When I click on menu parent, all child's will appear, for example : I want to appear only the child's of the menu parent(1) clicked, and I want something like radio button when I click on another parent(2) the childs of parent(1) disappear and the childs of parent(2) appear.
That's it, thanks!
Note : Resize the window of result section to see the mobile version.
Check this Fiddle
Js:
$('.menu ul li').on('click', function(){
$(".menu ul li").not(this).find('ul').slideUp();
$(this).find('ul').slideToggle();
});

Simple issue with jQuery Accordion

I have a simple jQuery accordion which works... almost perfectly :)
As you can see from the demo, I currently have the navigation "open" as I'm in the "Team" page.
Is it possible when I click 'About Us', it closes the element altogether. As you can see from the demo it closes it, but then quickly re-opens it. I guess this occurs because of the code on line 27 of my CSS.
Here is my demo: http://jsfiddle.net/URYzK/5/
Here is my JavaScript:
jQuery(function($) {
$('#accordion > li > a').click(function (e) {
if ($(this).next('ul').length == 0) {
// link is for navigation, do not set up accordion here
return;
}
// link is for accordion pane
//remove all the "Over" class, so that the arrow reset to default
$('#accordion > li > a').not(this).each(function () {
if ($(this).attr('rel')!='') {
$(this).removeClass($(this).attr('rel') + 'Over');
}
$(this).siblings('ul').slideUp("slow");
});
//showhide the selected submenu
$(this).siblings('ul').slideToggle("slow");
//addremove Over class, so that the arrow pointing downup
$(this).toggleClass($(this).attr('rel') + 'Over');
e.preventDefault();
});
});
Many thanks for any help here.
Remove display:none from #accordian ul and remove the .children CSS entirely. I believe this creates the behavior you want. You were setting the children ul to be display:none, and then trying to force .children, which is a ul, to be display:block later, which is why they were fighting.
Updated your jsFiddle as well.

.each() on JQuery Dropdown

I'm trying to create a JQuery Dropdown similar to the one used in bootstrap.
The problem which arises is that when an individual list item is clicked, all sub navigation's display block.
Now I know this issue can be resolved with .each() but my code does not seem to work.
Please find the example here; http://jsfiddle.net/N7xgC/
Apologies if this question has already been asked before.
B
Try this modification:
http://jsfiddle.net/N7xgC/1/
$(function() {
$('.main > li > a').each(function() {
$(this).click(function() {
// When the anchor is clicked, find the next .sub element and toggle it
$(this).next('.sub').toggle();
});
});
});
I changed yours to toggle the element with the class .sub 'next' to the clicked anchor.
You cannot select all .sub and toggle them. You need to get only the one next to the a-element that is clicked.
Try this instead:
$(this).next(".sub").toggle();
Updated your fiddle so you can see it in action: http://jsfiddle.net/N7xgC/3/
$('.main li a').on('click', function() {
$(this).next('.sub').toggle();
});
JSFiddle Demo

Categories