Designing my Navigation Bar

In a preivous post i looked at a number of diffrent navigation bars to see how styling with css and images could be used to create intresting designs.

Design 1-

For my first design i just wanted to keep it really simple and just change the colours and also the style of the text when hovered over to show that it is a link.

The above print screen shows how i changed the colours of the navigation bar to match the colour scheme of my website. I just chnged the colour of the background and the text but i wanted to experiment by adding a boarder.

I added a yellow boarder to the right of each link to seperate each link.

I then experimented by adding a full borderaround the whole button. I think that the border is usful for seperating each button, however i do not really feel that it is appropriate to my webpage as there are quite a lot of strong lines within the back ground image and anymore may look too much.

 I then experimented with changing the style of the text when the link is hovered over. This is very simple but i just wanted to experiement with this for my first design just to see how easy it would be to change the design using CSS.

Design 2 -

For my second design i wanted to look at changing the colour when hovered over. So i changed the colours around so it appears inverted when hovered over. i actually prefer this much more than just changing the text as this is much clearer that it is actually a link.

Design 3-

For my third design i wanted to experiment with adding these images. I quite liked the idea of changing the colours before.

I created these opposite images to use in my nav bar. I plan to repeat the first image across the whole nav bar and use the seconde image when hovering over the link.

And these print screens show the images im use in my web page. I am really pleased with this design actually and think i will use it in my website. I love how using a simple image can be really effective.