I recently decided to give an overhaul to my site's look and feel. This was mostly due to an article that I read about the elements of Web 2.0 design. The full article can be found here:

Current style in web design.

When I started my site a little less than a year ago I purchased a commercial Joomla template and while it was... OK, I always felt that it lacked a certain panache.

After I read the article I realised why I felt that way.
This is what my website looked like before the makeover.

According to the article the elements of Web 2.0 style are:

1. Simple layout. Simple columnar layouts with text that read from top to bottom. Well, no problem here, my site follows a very traditional two column layout.

2.3d effects, used sparingly. Well, no. No 'subtle gradients', no shadows to give depth, no reflections.

3. Soft, neutral background colours, and especially greys and whites fading into each other. OK, no. My background was an old fashioned grey diagonal stripe design.

4. Strong colours, used sparingly. Strong splashes of colours work well against the soft neutral background (which I didn't have)

5.Cute Icons, used sparingly. No, no icons.

6. Lots of white space. I distinctly felt my site was crowded.

7. Nice big text, and bigger text for accents.

OK, got it.

Gradients, 3d effects, Icons. Roundedness (no square boxes - round corners are in!)

So I set out to remake my site in the image of Web 2.0

Firstly, I decided to change my colours to be lighter and softer. Here is a cute colour chart that someone set up that are purported to be typical of Web 2 colours. It was done a bit tongue in the cheek but on the other hand, it does give a nice idea of the Web 2.0 zeitgeist in colour!

http://miles.burke.id.au/blog/2006/02/03/the-web-20-secret-weapon/

OK, out with the dark, in with the light. I changed the dark blue 'Top menu' bar to be a lighter blue and decided to make the top menu items with round tabs.

This is where I first got stuck. Round menu tabs...There must be thousands of references out there! Well, there are. It is just that some work better than other.

I first tried The Ulitmate Tabbed Menu, by Dragon-Labs. http://www.dragon-labs.com/articles/utm/

Wow, these are cool. They are based on the Dynamic Drive 'Sliding doors' principle. I downloaded their package and immediately set about changing my top menus to look like their Basic Menu option. Of course the CSS involved with this is not simple and especially not if you need to integrate this with your Joomla Stylesheet. But hey, anything to be a slave of fashion.

I proudly tested my new menu, including trying it out on the new IE7 on my second machine. What do you know, it doesn't work in IE7! I supposed I could try and rectify the CSS but the problem is that one should try and use your time to the best advantage. I already spent a couple of hours on this - should I spend another couple or should I just get another solution. Sadly, another solution won out. This is really too bad, since their menus are REALLY snazzy.

This time round I tested the menus as a standalone first in IE7, as well as IE6, Firefox and Opera!

Now, here is the rub, the top menus in Joomla are generated with their class references 'built in', and most of these types of menus require some additional markup to cater for specific elements. In the end I changed my template to read the Top Menu elements from the database directly so that I could specifically add in the additional <code><span></code> elements.

Here is the code that I used to create the Top Menu directly from the database, instead of loading it through a module.

 
global $database, $my;
$Itemid = mosgetParam( $_REQUEST, 'Itemid', 0 );
$database->setQuery( "SELECT m.* FROM #__menu AS m"
. "\nWHERE menutype='topmenu' AND published=1 AND access <= $my->gid"
. "\nORDER BY sublevel,ordering");
$rows = $database->loadObjectList( 'id' );
$mytabs = count($rows);
$tabcounter = 0;
foreach ($rows as $row) { // insert main-menu items
if ($row->parent == 0 && (trim( $row->link ))) {
 $name = addslashes( $row->name );
 $alt = addslashes( $row->name );
 $link = $row->link ? "$row->link" : "null";
 if ($row->type != "url") {
  $link .= "&Itemid=$row->id";
 }
 $link = sefRelToAbs($link);
 if ($tabcounter==0) {
     print '<li style="margin-left: 1px">
         <a href='.$link.'><span>'.$name.'</span></a></li>'."\n";
 } elseif ($tabcounter==$mytabs-1) {
     print '<li><a href='.$link.'>
         <span>'.$name.'</span></a></li>'."\n";
 } else {
     print '<li><a href='.$link.' class="">
         <span>'.$name.'</span></a></li>'."\n";
 }
$tabcounter++;
}
 

Not very elegant, but it works!

So which menu did I use in the end?
First, here are a couple of references to some menu related sites that I found during my search for the perfect tabbed menu:

Listamatic - one list, many options: Although these do not really have rounded tabs, which is specifically what I was looking for, it is still a very comprehensive collection on various list based menus, both horizontal as well as vertical.

Here is a nice example of dynamically sized tabbed menus - hanging down!

But here it is, the creme de la creme of menu examples, as far as I am concerned!

Wow, if you can't find something to suit you here, you won't find it. Their examples include the graphics that you need for each menu. In the end I went for the DD Color Tabs

Well, that is all for now - watch out for installment 2 - more about Icons!

TrackBack URI for this entry

Comments (0)