Marvellous Menu Bars

Adding customised design to web menu bars can really improve the appearance of your website and the clients love it. Even a simple line drawing in a pastel coloured menu can add effectiveness and individuality to the viewers first impression of your website.

The menu I am about to show you was created in 2005 for The Knitters Choice website and the website itself is still a work in progress, for sale though the client absolutely adored the menu bar.

I needed to design a menu that was simple, unique to the business, fast loading and colourful. I began by creating a 170 pixel wide basic table in Adobe GoLive CS, with the individual links in coloured cells. I then used the GoLive CSS Editor to make the settings for the rollovers:

a: link (shows the style you want to display for the link)
a: visited (shows what happens when the link has been viewed)
a: active (shows what happens just after the mouse has clicked on the link)
a: hover (this is the rollover state, and the one I changed the most)

I used the same properties for each one and then modified the hover function to turn yellow and display the text in capitals. This meant that when a visitor put the mouse over the link it turned yellow and in caps. I would recommend making the menu bar using CSS to keep loading times faster (much faster than using rollover images) and also because one adjustment to the CSS editor means you can change everything on the page.

The highest computer resolution I try to fit in with when designing for the web 1024 x 768 pixels, so this meant the menu was at least 768 pixels high (including the logo up the top) but the part of the menu most commonly viewed would be at the lowest screen resolution (600 pixels). For the excess part which wouldn’t be seen at 800 x 600 resolution, I just had a colour or simple graphic that was not important and didn’t matter if it was chopped off at the bottom.

Since the viewer landed on the “Home” page when they first entered the site, I felt that I would separate the “Home” link so that the viewer could immediately go somewhere else if they desired. I moved the “Home” link to the top of the menu as it is a universal link that the viewer would want in an easy-to-find position.

Next, I looked through the multitude of photos included with the original material and decided to include a photo of the client’s child (the couple often remarked how sweet their little girl looked in the knitted jumper they made). I decided to make this into a mini-ad, since there was no catchline, tagline or subheading with the logo, so I added the words “be inspired” on it and placed a brief caption with the type of wool used (available from The Knitters Choice store) underneath.

One of the photos had a great picture of shelves of coloured wool, which didn’t seem to fit well anywhere in the rest of the website, so I cropped it and placed it under the menu to add more colour to the whole thing. Then, to fill in the last bit of space, I created another mini-ad with a bit of a joke “Come in and have a good yarn”!

All images were saved as medium resolution jpgs, using the “Save for web” function in Photoshop (this makes the file size smaller and therefore faster loading).

The sky is certainly the limit when it comes to designing interesting menus. Your websites will appear much more customised and personalised, as well as being a step above the common menu content that is freely available for beginners on the internet.

PS – Don’t forget to upload your CSS style sheet to the cgi-bin or Generated Items folder of your website for it to work!