WordPress Experiments

Last time I have described how to create tabs with background image that changes when moving mouse over it. Here is a short update for “none-WordPress powered” websites ;).
The only one challenge was to make ‘current page’ to work. It didn’t took me much time to find a solution.
Each php page need to start with: <?php $thisPage="index"; ?>
Of course name within quotation marks need to be unique for each page and it’s helpful if it reflects its content.
Then comes html markup for navigation tabs:

<div id="menu">
<ul id="tabs">
<li class="page"<?php if ($thisPage=="index") echo " id=\"currentpage\""; ?>>
<a href="http://website-url/index.php" title="Main Page">Main Page</a></li>
<li class="page"<?php if ($thisPage=="about") echo " id=\"currentpage\""; ?>>
<a href="http://website-url/about.php" title="About">About</a></li>
<li class="page"<?php if ($thisPage=="news") echo " id=\"currentpage\""; ?>>
<a href="http://website-url/news.php" title="News">News</a></li>
</ul>
</div>

And CSS stylization:

#menu {
margin: 0px auto 10px auto;
text-align: center; }
#tabs {
list-style: none;
margin: 0 0 0 3px;
float: right;
clear:both; }
#tabs li {
float: right;
height: 26px;
background: url(img/tabs_middle.png) top right no-repeat;
margin: 0 0 0 3px;
white-space: nowrap; }
#tabs .page a {
color: #000;
display: block;
background: url(img/tabs_left.png) top left no-repeat;
text-decoration: none;
padding: 0px 10px;
line-height: 26px;
font-weight: bold; }
#tabs li:hover {
background-position: 100% -26px; }
#tabs .page a:hover {
color: #ffffff;
background-position: 0px -26px;
border: none; }
#currentpage li {
color: #355ba4;
text-decoration: none;
background: url(img/tabs_middle.png) top right no-repeat; }
#currentpage a, #currentpage a:visited{
color: #355ba4;
text-decoration: none;
background: url(img/tabs_left.png) top left no-repeat;
border-bottom: 2px solid #ffffff; } /* to get rid of background image border-bottom */

Below are images I’ve used for it.

And final effect: white tabs that turn blue when hovering and “blend” into current page.