Search code examples
jquerymenubar

jQuery menu bar - external links not working


I have a jQuery menu bar, but a problem with external links. I keep getting Error:

Syntax error, unrecognized expression: http://google.com

Any thoughts?

Here is my code:

<ul id="menu">
    <li><a href="#home">HOME</a></li>
    <li><a href="#about-us">ABOUT US</a></li>
    <li><a href="http://www.google.com" class="external">EXTERNAL</a></li>
    <li><a href="#contact">CONTACT</a></li>
</ul>

And the js:

var lastId,
topMenu = $("#menu"),
topMenuHeight = topMenu.outerHeight()+145,
menuItems = topMenu.find("a"),

scrollItems = menuItems.map(function(){
    var item = $($(this).attr("href"));
    if (item.length) { return item; }
});

$('a.external').click(function() {
    this.target = "_blank";
});

$('a[href*=#]').bind('click', function(e) {
    e.preventDefault();

    var target = $(this).attr("href");

    $('html, body').stop().animate({
        scrollTop: $(target).offset().top 
    }, 3000, function() {

    });
    return false;
});

Solution

  • The error is at line var item = $($(this).attr("href")), which means var item = $(http://www.google.com), which is a bad selector.