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.)
Related
I am trying to implement a basic toggle menu after the last has stopped working but no matter how much I try to narrow down the CSS selector, the sub menu items ALWAYS toggle the menu on click for the mobile menu and therefore you cannot click through.
My JS is:
jQuery(document).ready(function() {
jQuery('#menu-item-1837').click(function(e) {
jQuery('#menu-item-1837 > ul').slideToggle(500);
e.preventDefault();
});
});
jQuery(document).ready(function() {
jQuery('#menu-item-1832').click(function(e) {
jQuery('#menu-item-1832 > ul').slideToggle(500);
e.preventDefault();
});
});
I have tried all sorts of variations including targeting using:
#menu-item-1837 a:first-child
.menu-item-has-children > a
a#menu-item-1837
I can't work out why it isn't working
I have also tried variations of targeting the sub-menu but it never works
Any help would be appreciated
level menu with a unconventional html markup due to the responsive nature of the project. That means I cannot use nested ul and li like one usually does when creating nested menus.
I have created a fiddle which on mouseover loads the correct next menu but on mouseleave the menus stay.
I want the menus to act like a hover interaction and be hidden once the cursor leaves the correspondent sub-level
http://jsfiddle.net/umbriel/pqbvkuoy/
$('.level2').hide();
$('.level3').hide();
$('.level1').find('ul .active').mouseover( function(){
$('.level2').show();
});
$('.level2').find('ul .active').mouseover( function(){
$('.level3').show();
});
Thank you
You can use hover() event and toggle(). Try this:
$('.level1').find('ul .active').hover( function(){
$('.level2').toggle();
});
Check this DemoFiddle
ive got a drop down menu with form elements. the menu element gets set to
display:none
when anything outside the element is clicked ... or at least so i thought.
Here's my little function
$(function(){
$('#loginAcc').click( function(event){
event.stopPropagation();
//show
$('#auth-menu').css('display', 'block');
});
$(document).click( function(){
//hide when click anywhere out the menu
$('#auth-menu').hide();
});
})
the problem i have is that it also closes when i click inside the element, which makes it very difficult, pretty much impossible to complete a form.
#loginAcc
is a horizontal list item that gets clicked, and
#auth-menu
is
if i were to hazard a guess, i would like to think that .toggle() is the culprit, but that's a sheer guess and i wouldn't even know where to start if i were to reimplement it (a little bird told me that it's getting taken out of the spec anyway).
what i would like to happen is that when you click on the #loginAcc list item, the #auth-menu gets set to display:block, and can only be closed if you reclick #loginAcc or anywhere else outside of #auth-menu.
any help would be amazing. thanks
Use a not() selector to exclude the menu:
$(document).not('#auth-menu').click( function(){
//hide when click anywhere out the menu
$('#auth-menu').hide();
});
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!
is there a way to select the current anchor and have it visible on every section of a one page site? For example all my pages (home/contact/shop etc) are on one page, in a horizontally scrolling layout. When I select the anchor, it highlights the current anchor but does not keep that anchor highlighted when it scrolls to the next section of the page. Instead its highlighted and as the scroll begins the highlight of the anchor disappears. Here's the code I am using:
$('#nav a').click(function() {
alert($(this).attr('href'));
});
I had thought about using jquery ui to do it, but it seems a little too much just to carry out this operation. So highlight the current anchor of the item, in the same page, but when scrolling to a different section remaining highlighted. Thoughts?
Thanks in advance
I guess you are talking about the default overlay on focus that happens when you click an anchor?
How about adding a class to the currently active section instead:
$("#nav a").click(function() {
var self = $(this), className = "active";
self.addClass(className).siblings("."+className).removeClass(className);
...
});
You might also want to check this answer since it could be related. If this answer is not helpful to you my advice is to create a test case on jsFiddle to help you describe your problem further.
Like this?
JS:
$('#nav a').click(function(){
$('#nav a').removeClass('highlighted');
$(this).addClass('highlighted');
});
CSS:
.highlighted {
background: #ffffeo;
}