1

hi i have a nav menu that hides off the side of the screen and can be toggled unfortunately it will not allow me to click on the anchor links inside (it just toggles instead is there something i can do to to override prevent default and get the anchor tags working?

var one = {queue:true, duration:1250, easing: 'easeInOutExpo'};
var two = {queue:true, duration:1500, easing: 'easeInOutExpo'};

$('nav').toggle(
function()  { showMenu() },
function()  { hideMenu() });

$(window).bind('load', function() {
setTimeout ( 'hideMenu()', 1000 );
});

function hideMenu()
{
$('nav').animate({ left: '-=270' },  one);
$('#container').animate({ left: '-=270' }, two);
}
function showMenu()
{
$('nav').animate({ left: '+=270' },  one);
$('#container').animate({ left: '+=270' }, two);
}
VisioN
  • 143,310
  • 32
  • 282
  • 281
Mitchell Bray
  • 558
  • 2
  • 14
  • 29

2 Answers2

1

Assuming the links are inside the nav element, and triggering the animations set on that element ?

$('a', 'nav').on('click', function(e) {
    e.stopPropagation();
});

will stop click on the anchors from bubbling up to the nav element.

adeneo
  • 312,895
  • 29
  • 395
  • 388
0

For anchor to work it must have provided a not empty href attribute

You prevent default behavior on .click() like that

$('a.optional-class').click(function(e){
    e.preventDefault(); // it's way more powerful than...
    // your code goes here
    return false; // ... than this
});

The thing is that both of above hacks(?) work in a different manner, 1) .preventDefault() simply tells browser that this anchor isn't actually an anchor and should not be treated as one; prevents ANY <a /> action 2) return false tells the browser that the user actually haven't clicked the link; this will not prevent from scrolling site if 

<a href="#some_id_here">
<!-- some code and height goes here... -->
<div id="some_id_here"></div>
meeDamian
  • 1,143
  • 2
  • 11
  • 24
  • Could you please explain why `e.preventDefault()` is way more powerful than `return false` ? – adeneo May 08 '12 at 23:57
  • Well, it seems I was wrong. In jQuery `return false` **is equal** to calling `e.preventDefault()` AND `e.stopPropagation()`. But when it comes to vanilla JS `return false` triggers only `e.preventDefault()`, so the event will still bubble up the DOM tree. Source: http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false – meeDamian May 10 '12 at 12:48