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.
Related
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;
}
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.
I made a custom drop down menu on a HTML page + JavaScript. I want that menu to act as following:
When the button "Freunde" gets clicked, the drop down menu appears
When the button gets clicked again, the drop down menu disappears
When the mouse curor leaves the "area" of button + drop down menu, it disappears
The drop down menu consists of a main div with multiple divs in it (the "menu items").
My first approach was to put a onmouseout() on the main div of the drop down menu, but there is following problem: As soon as I hover over an inner div, the onmouseout() is true, and since the inner divs fill the entire main div, the drop down menu is visible only as long as the user doesn't hover over it.
So I tried it to solve similiarly like a JQuery lightbox, namely to put a "background" div over the whole screen and paste the drop down menu in there, and set the onmouseover() there. That would be almost perfect, but the "Freunde" button is also affected from that.
So is there any way to combine an event from different elements? Like
if(cursor is not over Button && cursor is not over DDMenu) set invisible
I marked the desired are in following image
Assuming you're set up as
<ul>
<li></li>
<li></li>
</ul>
You could set up your CSS like this:
#nav ul li ul { display: none; }
#nav ul li.active:hover ul { display: block; }
And then set up your JS like this:
var menuClick = function() {
$(this).toggleClass('active');
menuHover();
};
var menuHover = function() {
$('#nav li.active').hover(function() {
}, function() {
$(this).removeClass('active');
});
});
$('#nav > ul > li').on('click', menuClick);
Granted, this is absolutely gross coding, but I think it should work. (this also assumes you're using the jQuery library).
Below is a preview of what I have:
On the right is when I hover. What I want is for the delete icon to only show for that hover item.
<script>
$(document).ready(function(){
$(".removeService").hide();
// Deleting an Individual Service
$("#dashboard ul li span").hover( function() {
$(".removeService").show();
});
});
</script>
This is probably a very simple fix, but if anyone could point me in the right direction I would really appreciate it.
Thanks!
If you want the delete span to show only when hovered over and hidden when the mouse exits, you can use an 'overload' for the .hover() function by providing a second function that hides the delete span.
See this fiddle here for an example.
A very simplified example could look like this:
$(document).ready(function(){
$('.remoteService').hide()
.click(function(){alert('delete!');});
$('#dashboard ul li span').hover(
function(){ //this is fired when the mouse hovers over
$(this).find('.remoteService').show();
},
function(){ //this is fired when the mouse hovers out
$(this).find('.remoteService').hide();
});
});
I hope this helps!
<script>
$(document).ready(function(){
$(".removeService").hide();
// Deleting an Individual Service
$("#dashboard ul li span").hover( function() {
$(this).find(".removeService").show();
});
});
</script>
This assumes that .removeService is nested within #dashboard ul li span. If this is not the case, please provide your html.
In the code this is the actual span which is hovered on. find will search within that span for all elements with the removeService class.
Edit:
Used image tag instead of background-image(see DEMO link at the bottom) to make it click-able.
DEMO here.
Why not use CSS :hover to get the same effect.
DEMO here
You have to do this with jQuery, you can achieve the same behavior with pure CSS:
#dashboard ul li .removeService {
display: none;
}
#dashboard ul li:hover .removeService {
display: inline;
}
Example on jsfiddle
im new to jQuery and have a slight issue with the following navigation:
http://jsfiddle.net/6Dh8j/7/
Essentially, I love the navigation in the Creative Production section of this lovely site: http://www.gainsburyandwhiting.com > see Portfolio > Fashion Show etc...
I need to hide the current ul and show a fresh one in its place. At the moment, they show until I un-click the parent.
Any thoughts?
Thanks,
Red
You need to hide all the ul elements that are descendant of the siblings of the current ul e.g.
$(this).siblings().find('ul').fadeOut('fast');
This finds each sibling of the clicked ul (all of which are ul in the example) and finds all the ul elements that are withing their bounds and fades them out.
In the context of your code:
$("nav ul li").find("ul").hide().end()
.click(function(e) {
if (this == e.target) {
$(this).siblings().find('ul').fadeOut('fast');
$(this).children('ul').fadeToggle('fast');
}
});