CODEWITHSUNDEEP
jqueryhtmlajaxwordpressnavigation
goodthngs
goodthngs

Reputation: 33

Adding active links and jquery slide toggle to custom ajax wordpress navigation on page reload

I have a fully ajaxed wordpress page and i am adding my navigation in wordpress via wp_nav_menu()

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

Wordpress outputs the following html structure: 

<div class="menu-header">
 <ul class="menu" id="menu-wordpress-navigation">
  <li class="menu-item menu-item-type-post_type menu-item-1271" id="menu-item-1271">
   <a href="#">Navigation 1</a>
   <ul class="sub-menu" style="display: none;">
    <li class="menu-item menu-item-type-post_type menu-item-1246" id="menu-item-1246"><a href="#">Subnavigation 1</a></li>
   </ul>
  </li>
  <li class="menu-item menu-item-type-post_type menu-item-1275" id="menu-item-1275">
  <a href="#" title="silly">Navigation 2</a>
  </li>
    </ul>
</div>

My Navigation toggles its submenu with Jquery and the following bit of code. 

   // close all subnavigation
    jQuery('ul.sub-menu').hide();

    // navi toggle
    jQuery('ul.menu li').click(function(){
     jQuery(this).siblings().find("ul.sub-menu").slideUp('normal');
        if (jQuery(this).find('ul.sub-menu').is(':hidden') == true) {
            jQuery(this).find('ul.sub-menu').slideDown('normal');
        }   
    });

So far so good. Everything works fine.

Now i want to add active color states and slidedown the correct subnavigation on a full page reload, and can´t really figure out how to grab specific selectors for all the elements. You can add the "title" attribute in the WP Backend, and i thought i could do something like this: 

if (url.indexOf("/navigation1/subnavigation1/") != -1) {
    if(jQuery('ul ul.menu li a').attr('title') == "subnavigation 1 title"){ 
     jQuery(this).slideDown('normal');
    }
   }

How can i set a active font color or slide down my subnavigation 1 if there´s no way to give it a unique ID or class??

Thanks in advance!

Upvotes: 0

Views: 1591

Answers (2)

goodthngs
goodthngs

Reputation: 33

Many thanks to Simon. Using the attribute selectors solved my problem:

if (url.indexOf("/navigation1/subnavigation1/") != -1) {
jQuery('a[title="subnavigation1"]').parents().slideDown('normal');              
jQuery('a[title="subnavigation1"]').addClass('active');
}

}

So everytime my hash history in the browser url (var url) contains "subnavigation1" the element with the title attribute "subnavigation1" is colored active.

At the Navigation Toggle i added: 

jQuery('ul.menu li').click(function(){    
        // remove active class
        jQuery('a').removeClass('active');
 });

...to remove the active class everytime a navigation element is clicked.

Upvotes: 0

sjockers
sjockers

Reputation: 53

Not sure if I completely understand the problem here, but Attribute Selectors are probably a good starting point:

a[title="foobar"] { ... }

That way you could do somethging like that:

body#currently_active_section a[title="currently_active_section"] { 
    /* styling rules for active navigation element go here */
}

You can also use Attribute Selectors with jQuery: 

$('a[title="foobar"]')

that way it should even work in IE6. Not to mention that jQuery has about a zillion other selectors that might come in handy when dealing with such problems: http://api.jquery.com/category/selectors.

Hope it helps,

Simon

Upvotes: 1

Related Questions