I'm not a design or CSS expert, so I made use of a handy free tool available for Mac OS to create the code for me. The tool - CSS3Menu - is available for Windows and Mac, and has a free version, which I used, and a paid version that includes more menu templates. I use the free version because I'm too tight to buy it.
The tool allows you to select a template and add buttons to the menu, specifying links. I actually tweaked the CSS code later in the project to adjust the colours but the screen shot below gives you an idea:
The tool is so simple to use that A) even I can use it and B) there's no point me explaining it - you'll all work it out no problem!
Once I'd added all the buttons I needed, I clicked on the big 'publish' button at the top and saved the created files to a folder on my desktop. I copied the contents of this folder - another subfolder - to where the project is. This sub-folder contains some .png files and a stylesheet that needs to be linked to when using the menu. To link to this, I just added a line to one of the include files, it was included in all pages in the project:
The code to use to link to the stylesheet can be copied and pasted from the html file that gets created alongside the images and the stylesheet.
The code for the menu itself needs to be added to every page. It's all been created for you, it just needs to be copied / pasted into place. In the folder the tool saved its files to, there will be a <your_saved_name>.html file. Open that in a text editor, and it'll show the coded menu.
I copied the code from the comments 'Start css3menu.com BODY section' to 'End css3menu.com BODY section' into my 'template.php' page under the '<div class="divMenu">' tag:
It would have been better to have put this code in an 'include' file, so if any changes needed to be made, such as adding a new menu item, it could have been changed in one place. However, because the menu highlights the selected page, it wasn't as simple as that. I had set the 'Home' button as active in the tool, which made the button blue, compared with the inactive buttons. Examining the code shows that the '<a href=' part of the code for the active button adds in the code 'class="pressed"' in order to style the link differently. On each page a different button is 'active', so this attribute needs changing on each page. For future projects, I may consider modifying the code and adding in a javascript to work out which button should be active and set the class, but time constraints meant I didn't this time round.
When the project was almost complete I modified the colours, so changed the CSS selectors very slightly by replacing the RGB hex colours within the style sheet, hence why the screen shots above don't quite match up. I also needed to add a few buttons after, which was just a case of copy/pasting the code from the button above and modifying it's href attributes and name. But here's the finished menu, created with minimal coding, thanks to the developers at CSS3Menu.com:
 |
| CSS3Menu |
Once I'd added all the buttons I needed, I clicked on the big 'publish' button at the top and saved the created files to a folder on my desktop. I copied the contents of this folder - another subfolder - to where the project is. This sub-folder contains some .png files and a stylesheet that needs to be linked to when using the menu. To link to this, I just added a line to one of the include files, it was included in all pages in the project:
The code to use to link to the stylesheet can be copied and pasted from the html file that gets created alongside the images and the stylesheet.
The code for the menu itself needs to be added to every page. It's all been created for you, it just needs to be copied / pasted into place. In the folder the tool saved its files to, there will be a <your_saved_name>.html file. Open that in a text editor, and it'll show the coded menu.
I copied the code from the comments 'Start css3menu.com BODY section' to 'End css3menu.com BODY section' into my 'template.php' page under the '<div class="divMenu">' tag:
It would have been better to have put this code in an 'include' file, so if any changes needed to be made, such as adding a new menu item, it could have been changed in one place. However, because the menu highlights the selected page, it wasn't as simple as that. I had set the 'Home' button as active in the tool, which made the button blue, compared with the inactive buttons. Examining the code shows that the '<a href=' part of the code for the active button adds in the code 'class="pressed"' in order to style the link differently. On each page a different button is 'active', so this attribute needs changing on each page. For future projects, I may consider modifying the code and adding in a javascript to work out which button should be active and set the class, but time constraints meant I didn't this time round.
When the project was almost complete I modified the colours, so changed the CSS selectors very slightly by replacing the RGB hex colours within the style sheet, hence why the screen shots above don't quite match up. I also needed to add a few buttons after, which was just a case of copy/pasting the code from the button above and modifying it's href attributes and name. But here's the finished menu, created with minimal coding, thanks to the developers at CSS3Menu.com:
 |
| Completed CSS Menu |
Part 4 - Login System - coming soon.....
:)
No comments:
Post a Comment