Friday, 5 March 2010

Client Project - Website drop down menu

Well it has taken me nearly 7 hours to create the final version of the drop down menu but it's now done and I am happy with the outcome but below is a short story board on how I got to my final stage.



1) First attempt of creating the drop down menu proved to be harder then anticipated, working with the alignment seemed to be impossible to get right, I found the code via the web (see previous post) however once opened the code there were many CSS elements that I did not understand even when I played around with every CSS rule.



2) As you can see I continued to work on this drop down menu and managed to get it to work to the websites look. The sub menus aligned well in firefox however, when I opened it in Internet Explorer I found that it did not work correctly. The 'hover' statement doesn't work on Internet Explorer and so after an hour or so of trying to tackle the problem I had to admit defeat and try a new piece of code.



3) Finding another code I thought more about the design, whenever I inserted a menu it would appear in a rectangle shape and it did not look right to me next to the logo, so I created a shape that I could put behind the menu giving it a more rounded edge effect. Finding a new code (WebDesignerWall) which I could easily implement meant that I could edit the code of the menu to blend in with the background.



4) As you can see in the image above the initial design had a pinky/red coloured background but it did not look right to me so working with a few colours I tried using it with a black background, and if you look below this is the most recent image of my work.



It may not look much but I'm happy with it and this is the actual site loaded onto Wordpress. I have been testing it across the browsers and apart from the background image on Internet Explorer like I previously mentioned it all seem to be working very well. My plans for the weekend now consists of getting the entire layout completed on Wordpress before tackling the plugins to get the gallery and comments up and running.

No comments: