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.
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 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.
Not sure if the title is a little vague or not,
However, lets say you have..
.topactive a:focus, .topactive a:hover,
.sf-menu a:active:first-child, .sf-menu li.sfHover:first-child {
}
and in your html your looking at:
all the ul and li class declarations;
<ul class="sf-menu">
<li class="current">
<p class="topactive">About Us</p>
<ul class="menu2"><li>submenu</li></ul></li>
<li>something</li>
<ul><li>submenu</li></ul>
</ul>
I need it to target the left most li only.
Is the css selecting only "example", as in my current code it is, and i cannot select only the first level ul explicitly, its only selecting the first instance of ul.
I hope this makes sense, sorry for any ambiguity and thanks to those who helped on my other question.
To select only the first-level children of the top-most ul you need some way to explicitly reference the ancestor and the distance from said ancestor. I'd suggest using an id:
#idOfTopMostUL > li {
/* CSS for the first-level li-elements */
}
#idOfTopMostUL ul li {
/* CSS for other li elements, that are children of ul elements within the ul */
}
Which would require HTML such as:
<ul id="idOfTopMostUL">
<li>example
<ul><li>submenu</li></ul></li>
<li>something
<ul><li>submenu</li></ul></li>
</ul>
JS Fiddle demo.
Please note that I've corrected your HTML (a ul cannot be a direct child of another ul (or ol)).
If you don't want to, or can't, give your ul an id you can reference another ancestor outside of the ul (since the first-level li elements will be closer to that ancestor than the nested-lis):
<div id="parentDiv">
<ul>
<li>example
<ul><li>submenu</li></ul></li>
<li>something
<ul><li>submenu</li></ul></li>
</ul>
</div>
And CSS:
#parentDiv > ul > li {
/* CSS for the first-level li-elements */
}
#parentDiv ul ul li,
#parentDiv ul li ul li {
/* CSS for other li elements, that are children of ul elements within the ul */
}
JS Fiddle demo.
The specific CSS you'er showing isn't selecting anything in the HTML you've shown us. The first two rules both require .topactive and that isn't present in your HTML. The next two rules both require .sf-menu and that isn't present in your HTML either.
If you want only the first level of children on an object, use the direct child designator > in your rules.
In the HTML you've actually shown us, you can select all first level li elements of your top level ul with this CSS:
body > ul > li
But, in the real world, you would probably designate your top level ul objects with a class or id and do something like this:
#myTop > li
or
.myTop > li
Where you put the myTop class or id on the top level UL elements.
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');
}
});