door

Using Sliding Doors With WordPress Navigation

Here is a version of the sliding doors technique that doesn’t require php expressions. Just use this code in place of your theme’s current page menu.
[php] <ul class="navigation">
<li class="<?php if ( is_home() ) { echo ‘current_page_item’; } ?>"><a href="<?php bloginfo(‘url’); ?>" title="Home"><span class="nav-left"></span>Home<span class="nav-right"></span></a></li>
<?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=&link_before=<span class="nav-left"></span>&link_after=<span class="nav-right"></span>’); ?>
</ul>
[/php]

All this does is give you the spans of “nav-left” and “nav-right” for you to use with your starting and ending images and code. The code above gives us the framework for the effect, but you’ll need to style it to fit your theme. Here is some CSS to get you started. This version of the technique uses a left, middle and right image with the middle image set to repeat.

[css] #navigation a, #navigation a:visited {
display:block;
}

.current_page_item {
background-image: url(images/navigation-repeat.png);
position: relative;
}

#navigation a:hover {
background-image: url(images/navigation-repeat.png);
position: relative;
}

.current_page_item .nav-right {
position: absolute;
display: block;
right: 0;
background: url(images/navigation-hover-right.png) right;
}

.current_page_item .nav-left {
position: absolute;
display: block;
left: 0;
background-image: url(images/navigation-hover-left.png);
}

#navigation a:hover .nav-right {
position: absolute;
display: block;
right: 0;
background: url(images/navigation-hover-right.png) right;
}

#navigation a:hover .nav-left {
position: absolute;
display: block;
left: 0;
background-image: url(images/navigation-hover-left.png);
}
[/css]

That’s it. You’ll want to use your own images and tweak the css to fit your theme, but now you can have some great navigation effects that will work in all browsers. I recently used this technique on a redesign of a2 Church that we have been developing. I could have created individual buttons, but this is so much more flexible, plus if we ever want to make a change, it will be a piece of cake.

4 Comments

Bob Martin May 23, 2010

I’ve always wondered how to do this. Thanks for the easy to follow tip.

Reply

Bob Martin May 23, 2010

I’ve always wondered how to do this. Thanks for the easy to follow tip.

Reply

Submit Your Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Promo 1: Get our lifetime membership, all themes, and updates forever for only 85 USD.
Promo 2: Get a free premium theme when you host with us.
+ +