Nobody told me there was going to be math…

I’ve been working on a project for a new franchising opportunity. It’s a rather graphics-heavy design, and anyone who knows me will tell you how I feel about working with graphics — it usually involves more than one four-letter word.

In this particular instance, the site owner wanted a horizontal navigation system, with an extended tab on the currently active page. Easy enough to do, except that the navigation items were also divided by a small graphic image (in this case a paw print). In order for the drop-down tab not to bisect the paw prints, the tab needed to be wider than the menu item. To further complicate things, the site is built using the content management system Joomla!, which means that simply styling each page differently wasn’t an easy option. I’d have to come up with something that could be controlled by the Joomla! template.

I first tried styling the navigation bar with different background images assigned to the various elements. But I quickly ran into problems with the width of the list items. I just couldn’t add the dropdown tab without messing up the pawprints.

What to do?

This morning I finally had a brainwave. I decided to create six different background images, with the tab spanning the pawprints. So, I fired up my image editor and set about lining things up. Or at least trying to. Let’s see, the nav bar was 868 pixels wide, and there were 7 paw prints to add, evenly spaced out, and I needed to indent the paw prints on the ends a little, and take into account the width of the paw prints … oy! Out came the calculator, and several not so successful attempts…until I got the idea to add different colored bars above the image to represent each of the navigation items. Once I did that, it became much easier to see where my calculations were off, and in short order I had my six background images.

Navigation Bar

The next task was to code the Joomla! template to assign the appropriate background image to each page. I named my images navbg-1.jpg, navbg-2.jpg, etc, where the number represents the matching page id in Joomla!

In the Joomla! template, I started by adding the following code to the top of the page (above the DOCTYPE):

$page_itemid = JRequest::getVar(‘Itemid’, ”);

Then the head tag section, I added a css styling as follows:

<?php if($page_itemid < '7') : ?>
<style type="text/css">
div.moduletable_menu {
  background:url(../images/navbg-<?php echo $page_itemid ?>.jpg) top left no-repeat
<?php endif; ?>

And the final result?
Navigation sample 1

Navigation sample 2

Navigation Sample 3

Navigation Sample 4

Navigation Sample 5
Navigation Sample 6

The only remaining detail was to add a css image preload to the bottom of the pages so that the background images would load quickly as the user navigates from page to page. I did this by creating a div at the bottom of the template that contains all of the navigation images, and setting its style to display:none.

It’s not a perfect solution, obviously, but it’s at least workable for now, and heaps better than the mess I had created before. If anyone has a better recommendation, I’d love to hear it.

Be Sociable, Share!

Comments are closed.