First, I want to ask this. q1. Can we create CSS hover buttons? If so, … q2. Which should we use in order to create hover buttons, JavaScript or CSS?
You can use either, I think the best approach is to use CSS and then use a little javascript code to preload the hover image. So when they hover over your navigation it loads the image instantly.
q1. When you think about browser compatibility, which works better? CSS? q2. Also ... I just want to use a sample CSS / JavaScript to do this instead of writing a short code on my own. Is there a good sample CSS / JavaScript available? Where can I find it?
My friend used my method i suggested and it worked in IE6/IE7 And firefox, we didn't test the others but I'm pretty sure it will. www.leoncalder.com/gtasource/ Here you can see it, take whatever code you need and let me know how it goes.
You don't need to use Javascript to preload anything. I believe deathshadow does this by just slicing the whole navigation as one image (including hover states), and changing the position. So when the page is first rendered, that ONE image is already loaded and there is no need for any extra http requests/latency when hovering using the hover pseudo class (which only works on anchors in ie6 btw). This technique will only work if you're very experienced (and good at math) because there is some calculation required when changing the background position. I ran into issues the first time I tried this because I needed more space between my hover states and normal states. The most popular method nowadays, however, is just having an image that has the hover and normal state for each nav ITEM (not all the nav items) which is a little easier since you don't have to do any calculation provided you cut the image out the right way. This will work if you put the hover states on the lower 20 pixels, since your nav item image is 100x40 pixels.
u shouldn't use Javascript (unless if you want to use some fancy animation for your menu ) when there are better ways to do it in css. Check out this article:- http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/