Bonjour,
Mon nom est Bruno et je suis le concepteur et le propriétaire de twistedmelon.com
J'écrirai en anglais parce que mon Français est terrible. I hope I'm not breaking a site rule...
The navigation of our site does not use any JavaScript - in fact the only JS on the entire site is one single line in the shopping cart to automatically refresh the page when you change the country of province in the form.
The navigation is specified 100% with CSS. As someone has mentioned, I have used a single image containing all the tabs as well as their different states. Using one image provides fast loading because loading a lot of small images takes much longer and also makes using CSS very simple.
Each tab area is currently a table cell unfortunately and it specifies that main image using different background coordinates to show the appropriate image.
The three states of the image are:
1. normal/collapsed
2. pulled/selected
3. depressed/shaded
To make a default tab selection each page is given an ID and that ID is used to select the appropriate tab based on the CSS hierarchy. Take a look at the CSS file - the navigation is all grouped together.
The states are all controlled with the various properties of the anchor element.
In addition to this graphical representation, each tab also contains a plain-text entry that is not shown when CSS is enabled. This means when you turn off CSS and therefore lose background images, you will still be able to navigate the text links.
The site is 100% accessible and meets many global standards for accessibility, including screen reader compatibility.
I wrote the word "unfortunate" above with regards to tables because since creating this site template early last year, I have more experience with CSS and can probably achieve the same thing using only CSS. Not as complicated a site,
http://derekstag.com is done using only CSS for layout.
Lastly, to find some tips written by other people about this type of functionality, search for "css rollover" - I did things a little differently than any of the tutorias or info I found, but if you look at both, you'll be more than ready to do your own versions.
Oh, one last bit of trivia... Photoshop was not used for any graphics on the web site. Everything was done in Adobe Illustrator. All PNG graphics have also been stripped of metadata, including icc profiles to make them appear as intended on every browser and every platform. If you're interested in compatibility with IE 6, make sure you look into "PNGhack" for compatibility with alpha in 32bit PNGs (I only use a couple).
Bruno
Modifié par TwistedMelon (23 Jul 2007 - 21:42)
