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.
Bob Martin May 23, 2010
I’ve always wondered how to do this. Thanks for the easy to follow tip.
Bill Robbins May 23, 2010
I’m glad you found it helpful.
Bob Martin May 23, 2010
I’ve always wondered how to do this. Thanks for the easy to follow tip.
Bill Robbins May 23, 2010
I’m glad you found it helpful.