Skip to content

Adding jQuery Mobile transitions to WordPress Custom Menus

July 11, 2012

jQuery mobile is a fantastic resource and generally it’s quite easy to use it alongside a WordPress installation.

One of it’s fancier client-impressing features is animated transitions between pages. These are easy to add to any link if you can directly edit the url, you just add data-transition=”flip” or whatever animation you are aiming for (see the full list on the jQuery Mobile Documentation) like so:

<a href="http://yourpage.com" data-transition="flip">Fancy flippin' link</a>

Appending WordPress Custom Menus

However the place where most people would like to use them in WordPress, their Custom Menus, is not directly editable.

Fortunately as you are already using jQuery Mobile it’s easy to add transitions to your nav links using some original flavoured jQuery, all we need to do is append the nav links with our data-transition attribute using the .attr function:

$(document).ready(function(){
jQuery('a').attr('data-transition','flip');
});

This little snippet will add the data-transition attribute to all of the links on your mobile site, if you want to narrow down your focus you simply need to change the ‘a’ selector. Note that as this is WordPress we’re using the ‘jQuery’ syntax rather than ‘$’.

This change is applied after the document is loaded so you won’t actually see it in your source code, to test it either use the DOM inspector or just click the link!

Now go and flip, fade and pop your WordPress Mobile site to your hearts content.

UPDATE:

After testing my mobile site some more I realised that if you are using a persistent header or footer menu in jQuery mobile the above code will only append your custom menu on first load.

To make sure it works on every page a user visits we need to change the commands a little (thanks to the people on this forum post for some pointers on this):

$(document).ready(function(){
('#wrapper').live('pagecreate', function(){
jQuery('a').attr('data-transition','flip');
});
});

Here I’ve added a additional nested function that targets my main wrapper div (‘wrapper’ this needs to be a div present on every page of your site to function correctly) and called the ‘pagecreate’ function in jQuery, this ensures that the code is run on first load and then on each subsequent page visit within your site.

Advertisements
No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s