![]()
In today’s excercise, we are going to adapt some nice styles to the Drupal menu items. There is a widely known CSS technique called sliding doors which became very popular since it became published. We are going to spice this a little more with extra hover states and implement sprites to improve the performance a little. This will involve a little PHP code – overriding a themeable function, and some CSS markup.
Let’s start with a piece of generated html code:
<ul class="links-menu">
<li><a href="/free">Download templates</a></li>
<li><a href="/about">About</a></li>
<li class="active"><a href="/blog" class="active">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
This is how Drupal renders primary links. Notice the active menu item which is set by a CSS class active on both the <li> and <a> tags. Since the anchor element’s parent is set to a class, it makes extremely easy to theme nice menu items.
Let’s
create a background image for the tabs. Our tab will have four states:
one for a regular item, one for hover, and both of them once they’re .active.
I prefer using sprites as this will improve performance a little:
loading several little images takes more time than loading one bigger
image which holds all the necessary background elements.
So I decided to come up with this tab image.