I am not sure if it is because I am using Wordpress but the this.href is not returning the href on the items that have them (for example on "contact" it returns opposed to ). If I remove the script the nav loads the href just fine.

Here is the JS

$(document).ready(function() {
      $('#page-wrap').delay(500).fadeIn(1000);

      $(".menu-item").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("#page-wrap").fadeOut(1000, redirectPage);        
    });

    function redirectPage() {
        window.location = linkLocation;
    }
});

Here is the php wordpress file

<div id="nav_wrap">
        <div id="nav"><?php wp_nav_menu( array( 'theme_location' => 'header-menu',) ); ?></div>
    </div>

Here is what wordpress returns in html format

<div id="nav_wrap">
        <div id="nav"><div class="menu-main-container"><ul id="menu-main" class="menu"><li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="">Home</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28"><a>Company</a>
<ul class="sub-menu">
    <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="/">Careers</a></li>
</ul>
</li>
<li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29"><a>Portfolio</a>
<ul class="sub-menu">
    <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a href="/">Breweries</a></li>
</ul>
</li>
<li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30"><a>Retailer Resources</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-31"><a>Community</a></li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="/">Contact</a></li>
</ul></div></div>
    </div>

I am not sure if it is because I am using Wordpress but the this.href is not returning the href on the items that have them (for example on "contact" it returns http://www.domain/undefined opposed to http://www.domain/contact). If I remove the script the nav loads the href just fine.

Here is the JS

$(document).ready(function() {
      $('#page-wrap').delay(500).fadeIn(1000);

      $(".menu-item").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("#page-wrap").fadeOut(1000, redirectPage);        
    });

    function redirectPage() {
        window.location = linkLocation;
    }
});

Here is the php wordpress file

<div id="nav_wrap">
        <div id="nav"><?php wp_nav_menu( array( 'theme_location' => 'header-menu',) ); ?></div>
    </div>

Here is what wordpress returns in html format

<div id="nav_wrap">
        <div id="nav"><div class="menu-main-container"><ul id="menu-main" class="menu"><li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="http://www.domain">Home</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28"><a>Company</a>
<ul class="sub-menu">
    <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="http://www.domain/jobs/">Careers</a></li>
</ul>
</li>
<li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29"><a>Portfolio</a>
<ul class="sub-menu">
    <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a href="http://www.domain/breweries/">Breweries</a></li>
</ul>
</li>
<li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30"><a>Retailer Resources</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-31"><a>Community</a></li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://www.domain/contact/">Contact</a></li>
</ul></div></div>
    </div>

• javascript
• jquery
• wordpress

• Have you tried event.target.href instead of this.href? I'm not sure, but this could refer to the li and not to the a – Niccolò Campolungo Commented Jul 30, 2013 at 22:22

5 Answers 5

This is because you are running the selector on .menu-item which is a <li>. It has no href attribute.

You need the select the <a> tag inside your <li> tag. This should do it:

$(".menu-item a").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("#page-wrap").fadeOut(1000, redirectPage);        
});

A bonus of doing this vs. the other answers of selecting <li> and then the child <a> is that this will only run when the user clicks the actual link. The others will run when anywhere in the <li> is clicked, which depending on your CSS, could be outside the actual link space.

jsFiddle with working example

Menu item is not returning the href because it's an <li/>.

You need to target the <a> child element of the menu item.

linkLocation = $(this).children('a').attr('href');

Change linkLocation = this.href; to linkLocation = $(this).attr('href'); or if that does not work try linkLocation = $(this).find('a').attr('href');

Since you are using jQuery you might want to go all jQuery:

linkLocation = $(this).children('a').attr('href');

Looks like your href property is only associated with the <a> tags, but the click event is being added to the <li> tags. Change your code to $(".menu-item a").click ...