I'm trying to add both click and hover functionality to a menu. My existing Javascript that activates the menu drop down on click is:
<script type="text/javascript">
$(document).ready(function () {
$('#nav > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$('#nav li ul').slideUp();
$(this).next().slideToggle();
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
});
</script>
I tried to use jquery to add simultaneous hover triggering by putting into the head of the page:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>$("#nav").bind("click hover", fn);</script>
amongst other things, and predictably none of them worked. I clearly have no idea what I'm doing! The working page without the jquery additions is here and the menu is down the left hand side of the page. If anyone can spare me advice it would be much appreciated!
Try updating to latest Jquery, and then read about on:
.on( events [, selector] [, data], handler(eventObject) )
events: One or more space-separated event types and optional namespaces,
such as "click" or "keydown.myPlugin".
So basically I think you can exchange .click for .on, and use events click mouseover.
Edit
In your source page the Jquery version is 1.4.2, just for noticing.
You can use a pre-built solution instead of creating your own solution from scratch.
See Superfish - http://users.tpg.com.au/j_birch/plugins/superfish/.
Superfish is a jQuery plugin that handles click/hover dropdown menus.
For a css-only drop-down menu, search "Suckerfish". Superfish can be used on top of suckerfish for graceful degradation in case the user does not have javascript enabled.
I found this worked the best for my needs:
`<script type="text/javascript">
$(function(){
$('#nav > li > ul')
.hide()
.click(function(e){
e.stopPropagation();
});
$('#nav > li').toggle(function(){
$(this)
.removeClass('waiting')
.find('ul').slideDown();
}, function(){
$(this)
.removeClass('waiting')
.find('ul').slideUp();
});
$('#nav > li').hover(function(){
$(this).addClass('waiting');
setTimeout(function(){
$('#nav .waiting')
.click()
.removeClass('waiting');
},600);
}, function(){
$('#nav .waiting').removeClass('waiting');
});
});
</script>`
#Niloct helped me find a way to close the sub-menu of the previously triggered menu item but it resulted in the menu being a bit impractical. Thanks!
Related
My navigation links are in layout page and they look like:
<h3 id="my-navigation">
ANKETA
STATISTIKA
...
</h3>
I need active link to change color. CSS to achieve this:
#my-navigation a.active {
text-decoration:none;
color:#E0EBEB;
}
Since there are no navigation links in all html pages, but just in layout, I tried with javascript:
$('#my-navigation a').click(function () {
$('#my-navigation a').removeClass('active');
$(this).addClass('active');
});
Why doesn't this work?
EDIT:
I realised that this gives effect just temporary (at the time of click). For example:
$(document).ready(function () {
$('#my-navigation a').click(function () {
$('#my-navigation a').addClass('active');
});
});
blinks all links on click. So, what to do?
The jQuery script you've included works just fine on my end, so I'd say the issue is most likely either with the version of jQuery you've linked on your page or the script being loaded before the links fully render.
Try surrounding the script you listed with a document ready like this:
$(document).ready(function() {
$('#my-navigation a').click(function () {
$('#my-navigation a').removeClass('active');
$(this).addClass('active');
});
});
It is also acceptable to replace the first line with the shorthand version:
$(function() {
This will ensure the page's content is fully loaded before it assigns the on click trigger to the links, as the links must exist prior to that being defined.
Your code should work, at least it works here: https://jsfiddle.net/kvk1keds/
I just changed the click method for
$('#my-navigation a').on('click', function (ev) {});
You should make sure that the method is running and the class 'active' is being set.
I have my own drop down navigation working, so when a user clicks on one of the links a page overlay will appear. I just need when they click again the page overlay removes.
Here is my code to add the overlay
$('#nav li a').on('click', function(){
$('#page-overlay').addClass('active').siblings().removeClass('active');
});
And a working DEMO is here - http://dsm.fishtankcreative.co.uk/
I just need help for when a user clicks off the navigation the page overlay class disappear.
Thanks in advanced.
Use toggleClass()
$('#nav li a').on('click', function(){
$('#page-overlay').toggleClass('active').siblings().removeClass('active');
});
Note: I don't think there is a need to use .siblings().removeClass('active'), as you are not adding the active class to any other elements
I have a simple jQuery script. This is the script:
var menu = $('#nav .menu');
$('li', menu).mouseenter(function() {
$(this).find('.sub-menu').slideDown();
}).mouseleave(function(){
$(this).find('.sub-menu').slideUp();
});
This script open a submenu. But i have a problem with this script. If you go over it quickly. The script launch every time. When you go over the item verry quickly. The menu open a lot of times. How can i fix this?
Thank for help
use jQuery's .stop() function. Passing in the necessary arguments ex. .stop(true,true),.stop(true)
$('li', menu).mouseenter(function() {
$(this).find('.sub-menu').stop().slideDown();
}).mouseleave(function(){
$(this).find('.sub-menu').stop().slideUp();
});
or passing this as the context seems a little neater to me - it does the same thing as .find()
$('li', menu).mouseenter(function() {
$('.sub-menu',this).stop().slideDown();
}).mouseleave(function(){
$('.sub-menu',this).stop().slideUp();
});
Use this way:
$('#nav .menu li').hover(function() {
$('.submenu').stop().slideDown();
}, function(){
$('.submenu').stop().slideUp();
});
I have an expandable vertical drop down menu that currently expands when first level items are clicked, however I want it to expand when the menu item is hovered over instead. The original script is:
<script type="text/javascript">
$(document).ready(function () {
$('#nav > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$('#nav li ul').slideUp();
$(this).next().slideToggle();
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
});
</script>
I changed .click(function to .hover(function and this works, however I don't know if it is the best way to do it. Can anyone advise if there is a better way to acheive this? You can see a working example of the .click version of the menu on the left hand side of the page by clicking here. Thanks!
Changing it to hover is acceptable. It's definitely very readable code, which is the important thing. However, there is one issue - as Daniel comments, it'll make your menu impossible to navigate on a touch device, which means that you're making the site inaccessible on every mobile phone and tablet*. This is a very bad thing, but there are a few things you can do.
For instance, the jQTouch library has some awesome touch-specific event handling that would let you optimize your menu for mobile users. Otherwise, you could wrap your menu's JavaScript logic in a conditional, or you could assign each action to both touch and click.
*except for phones and tablets with mice (a very atypical use case.)
I have created 3 links which when hovered over fade, I have also added a click event that when clicked adds the class 'active' and then i want to remove the class when clicked again. I have read a few posts that seem to suggest that removeClass come before addClass but im not sure why. Also when I click the link and the addClass is implemented I would also like to disable the fadeTo on this?
If anyone could explain each of these processes that would be great as Im trying to learn jQuery.
Code is here http://jsfiddle.net/kyllle/FtUdN/
Try this for the click:
$('#nav li a').click(function(){
$(this).toggleClass('active')
});
Fiddle: http://jsfiddle.net/maniator/FtUdN/3/
Click here to see a working demo: http://jsfiddle.net/rVhte/
$('#nav li a').toggle(
function() {
$('.active').removeClass('active');
$(this).addClass('active');
$("#nav li a").unbind('mouseenter mouseleave');
}, function() {
$(this).removeClass('active');
$('#nav li a').hover(function() {
$(this).fadeTo(200, 0.5).end();
}, function() {
$(this).fadeTo(200, 1.0).end();
});
});
Edit: disabled mouseover events after a link is clicked
You can use the .toggleClass method. In your hover handlers, you can use the hasClass method to check if you should fade or not.
Updated fiddle: http://jsfiddle.net/rfvgyhn/FtUdN/13/