Since I’ve been reworking my blog I thought I’d include a quick tutorial on adding the YoYo effect(or so I call it) to your wordpress (or any site for that matter) sidebar. First you need to grab the jQuery Yoyo plugin I whipped together. Place this in your javascript file. Also make sure you have jQuery as well, duh..
Now we need to inspect the html format of our sidebar. Just view the source of your html where your sidebar is. Make a mental note of the structure of each module or widget with a list of links. Mine looks like the following:
<div class="sidebar">
<div class="Links">
<h3>Categories</h3>
<ul>
<li><a></a></li>
</ul>
</div>
</div>
So to access each link I would go from “sidebar Links ul li a”. So to tie it all together I will select these with my jQuery selector and apply the Yoyo function to it:
$(function(){ // wait until the page loads to apply effect
$('.sidebar .Links ul li a').yoyo('paddingLeft',{ range: 6,speed:'fast' });
});
To achieve our effect we want to use the paddingLeft attribute and make it yoyo 6 pixels. You can play with this number and the speed attributes to suite your needs, I thought this looked best for my blog. Enjoy!
Related posts:
Leave a reply