Keep submenu open after hover - javascript

Website is Mariodidit.com
When hovering over "Portfolio" there is a submenu that appears.
However, if you do move the mouse directly over the center item, the menu just disappears, making it frustrating to navigate. I would like to use some javascript to keep it open after hovering "Portfolio"
$('.main-navigation li ul li a').hide();
$('.main-navigation').live('hover', function(e) {
$(this).addClass('activeitem');
$('.main-navigation li ul li a').show();
});
Ive tried a few different code snippets like this and have made no progress.
Also using "Header and Footer scripts" plugin to apply this script to my wordpress site.

You'll probably want to use on click instead of hover.
(function($) {
$('.main-navigation li a').on('click', function(e) {
e.preventDefault();
$(this).parent().toggleClass('active');
});
})(jQuery);
Then in CSS add styles for that class.
.main-navigation .active ul {
display: block;
}
.main-navigation ul ul {
display: none;
}

Related

how to remember the active menu

I have a menu with sub menu(vertical). My first li is active with the sub menu because i'm in the current page but My problem is when I hover in the next li I have the sub menu display it but if i lost the active li when i quits the menu
What I need is:
when my cursor is not hovering in my menu, i need the default sub menu that has the on class
This what i look do it
enter link description here
this link of my code in FIDDLE
enter link description here
I've changed your css so you don't need any js now.
It works this way:
In normal state an element with .on class is displayed;
When you hover #menu then we hide all the .niveau2 elements
When you hover some tab then we show only its .niveau2 element by adding an !important keyword to display property.
#menuu ul li:hover ul{
display: inline-block !important;
}
#menuu ul:hover .niveau2 {
display: none;
}
#menuu .on {
display: block;
}
Here is an example with my changes: http://jsfiddle.net/bymb6kvm/14/

hide drop down menu after clicking doesn't show it after rehover

my menu items don't redirect to another page, so after clicking them they don't hide. I can hide them using javascript or jquery, but they hide forever. I've tried every single suggestion out there but none of them work for me. this is my html:
<nav>
<ul>
<li class="windows">Windows
<ul>
<li>Tile</li>
<li>Close all</li>
</ul>
</li>
</ul>
</nav>
my css:
nav ul ul {
display: none;
position: absolute;
top: 100%;
z-index: 1003;
}
nav ul li:hover > ul {
display: block;
height: auto;
}
and my javascript for tile:
tileObject = $('a.tile');
tileObject.click(function () {
$('.windows ul').hide();
tileAction();
});
If you hide your menu using $('.windows ul').hide(); you will need to do a $('.windows ul').show();(or smething equivalent) to display it again.
As $('.windows ul') will be hidden. You will need do bind the event to another element, for example
$('li.windows').click(function(){
$('.windows ul').show()
});`
--EDIT--
For that effect you don't need javascript. Check the fiddle. Just use the selector :hover. Then, if you want to do some actions using JS, just use the hover event. Take a look to the docs
--EDIT 2--
I got it now. Check this. You need to unbind the hover event just before hide the element. Then after you hide the element you bind it again.
You can try this one:
$(document).ready(function(){
$("li a.tile").click(function(){
$("body").off("hover", "li.windows");
$("nav ul li ul").hide();
$("li.windows").hover(function(){
$("nav ul li ul").show();
});
});
});
DEMO
If you HIDE and element then you need to SHOW it back again. First of all you have top:100% in your css and you dont need this.

Working dropdown menu in Wordpress "dropped" out function/links

I followed this tutorial to a tee: http://mysitemyway.com/docs/index.php/Collapsible_sidebar_menus
My site here: http://inlightimage.com/
Links with # 'photography', 'design', and 'teaching' drop down beautifully and responsive, the pages listed below are not clickable/linked. Nothing moves.
If possible, I would love to know where I went wrong in copying and pasting.
I added to custom CSS:
.menu .dropdown .sub-menu { display: none; }
I added to custom JavaScript:
jQuery(document).ready(function(){
jQuery('.menu .dropdown a').click(function(e){
e.preventDefault();
if (jQuery(this).parent().children('.sub-menu:first').is(':visible')) {
jQuery(this).parent().children('.sub-menu:first').hide();
} else {
jQuery(this).parent().children('.sub-menu:first').show();
}
});
});
Perhaps it is not compatible with my theme? (Moka theme by ElmaStudio)
Thank you very much for any direction/help.
I'd try changing:
jQuery('.menu .dropdown a').click(function(e){
To:
jQuery('.menu .dropdown > a').click(function(e){
It looks like the selector was too generic and applying the preventDefault to all links instead of parent items.

Jquery: submenu appears with hover function but not click function

I have a multi-layered navigation the consists of 3 <ul>s nested in each other (obviously a menu with hidden submenus the show on click).
I have created a script to show the 2nd level <ul>s if one of the first is clicked. This works fine:
//CLICK MAIN NAV SHOW 2nd LAYER NAV
$("#ctamenu ul li").not("#ctamenu ul li ul li, .thirdsub").click(function() {
$(this).children('ul').stop().delay(200).slideDown(300);
});//END CLICK FUNCTION
But when I repeat this for the 3rd level <ul>s it does not work properly:
$("#ctamenu ul li ul li").click(function () {
$(this).find('.thirdsub').stop().show(300);
});
What is strange is that when I inspect the elements in the browser the display: none css is definitely removed from the thirdsub element. I even get a coloured outline where Chrome is showing me where the element should be.
What even weirder is that if I change .click to .hover it works fine:
$("#ctamenu ul li ul li").hover(
function () {
$(this).find('.thirdsub').stop().show(300);
},
function () {
$(this).find('.thirdsub').stop().hide(300);
}
);
Would anyone know why this could be working with hover but not click?
$("#ctamenu ul li ul li").click(function (e) {
$(this).find('.thirdsub').stop().show(300);
e.stopPropagation();
});
Try stopPropagation() because you also have assigned click handler to parent of that. Which will invoke also when you click on #ctamenu ul li ul li.

Drop-Down Menu with jQuery and css

why slideDown() and slideUp() does not work true on my menu?
They are repeated several times with mouseover().
see you: jsfiddle-my codes
You are hiding the ul:
#nav ul {
display: none;
But you want to slide in the li inside the ul:
$('#nav li ul li').slideDown();
Therefore,
$('#nav li ul').slideDown();
works fine.

Categories