In order to have a tidy and structured menu different CSS techniques will need to be implemented onto the html coding. Using <ul> and <li> tags the categories are divided from each other or grouped accordingly. The menu was labelled with a class in order to identify it in the coding and the CSS page. The whole menu is placed inside a <ul> tag, each section of the menu then has an <li> tag although the section which have more than one category have been divided into another <ul> tag in order to group them together. With the title names in place an <a> tag has been implemented which creates links. Each link leads to the page accordingly.
HTML
Below was the initial HTML code designed to construct the drop down menu. Here the sections are broken down into smaller ones in order to avoid pages being clattered with information. Looking back at the post based on the website's image gallery I stated that I will keep to one page instead of multiple ones therefore the code needs adjusting. The press release page will be converted to news allowing the client to display any news about the team, races etc...The car page will not be broken down to previous and present models as the client has not provided me with the information and images of the previous models. The sponsors page will also be kept to just one as it will only consist of the sponsors logos placed around with a team message.
Below was the initial HTML code designed to construct the drop down menu. Here the sections are broken down into smaller ones in order to avoid pages being clattered with information. Looking back at the post based on the website's image gallery I stated that I will keep to one page instead of multiple ones therefore the code needs adjusting. The press release page will be converted to news allowing the client to display any news about the team, races etc...The car page will not be broken down to previous and present models as the client has not provided me with the information and images of the previous models. The sponsors page will also be kept to just one as it will only consist of the sponsors logos placed around with a team message.
In order to change the menu I decided to use a template from http://css-tricks.com to allow me to do this. The template was used as a guide as I had not produced my own drop down menu before.
Below is an example of the updated code:
As you can see there have just been some minor changes in the html code, the functionality of the menu relies on the jQuery which has been implemented at the top of the code in the script section as a link to the file. This method is to avoid having a mixture of different types of code in a HTML page. I also wrapped the menu in a <nav> tag which i had not done previously.
CSS
Before the menu's adjustments were decided upon, I had implemented CSS techniques to the design.
On Hover:
In the menu tab I decided to add an "on hover" event in order to incorporate other colours onto the website
The purpose of using other colours on the "on hover" event is because of colour deficiency. Looking back at the previous post where I research into the topic it seems that the colours red and green are the most common type of colour deficiency. These are also the colours of the University's logo so they need to be implemented either way. This brings us to the "on hover" event, I thought it would be better to incorporate the colours on events within the website in order to keep it to a minimum amount. As I am using dark colours for the backgrounds and features I decided to use a white font as it stands out from bold colours like red and black because of this I felt that it was the most appropriate colour to use for the menu and footer text.
Below is the menu after the changes have been implemented. In order to successfully construct a drop down menu the initial one I developed had to be adjusted to cater for this feature. JQuery was required to allow this function, here I looked at several websites for ideas and came across a template from http://css-tricks.com/simple-jquery-dropdowns/ where they provided a simple method of using this feature and a plain design which allowed me to implemented my original CSS into the code.
Gradient
For the top bar, menu and footer I have used a gradient, this is make the website look bolder and less flat.
Below is the menu after the changes have been implemented. In order to successfully construct a drop down menu the initial one I developed had to be adjusted to cater for this feature. JQuery was required to allow this function, here I looked at several websites for ideas and came across a template from http://css-tricks.com/simple-jquery-dropdowns/ where they provided a simple method of using this feature and a plain design which allowed me to implemented my original CSS into the code.
For the top bar, menu and footer I have used a gradient, this is make the website look bolder and less flat.
Sources
Microsoft. (N.D.). CSS Gradient Background Maker. Available: http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html. Last accessed 13th March 2013.
Heng, C. (2008). How to Create 3D Buttons Using CSS. Available: http://www.thesitewizard.com/css/3d-buttons.shtml. Last accessed 13th March 2013.
Coyier, C. (2009). Simple jQuery Dropdowns. Available: http://css-tricks.com/simple-jquery-dropdowns/. Last accessed 14th March 2013].
No comments:
Post a Comment