Today i had un idea for css sprite menu . All i have seen are those menu with a lot of small images. And i thought that it would be better if you had one big image. So that was the thing i came up with. I no it’s not pretty but is for a proof of concept. http://dimbo.1gb.bg/nav/ And the image is that [img]http://dimbo.1gb.bg/nav/images/navBackground.jpg[/img]. Hopefully I’m not inventing the hot water. Cheers!
Its a great idea.. but I think TheDoc already used it in one of the sites he posted on the web design gallery here.. He used a bigger image with all the buttons of the navigation bar to achieve an awesome hover effect. But am not sure about it :P. Even I was thinking of using something similar like this to get a nice effect on a vertical menu.. But didn’t get time to try it out :( I was planning to move the highlighted part of the image using jQuery to where ever the mouse is positioned on the navigation bar.. But I think this technique can be used in many ways to give some awesome effects.. You guys wanna try out more..? You know with different types of images :P
An interesting idea, but basically it’s the same as regular sprites. Same load time for the user at the end of the day. Sprites, remember, aren’t multiple images, it’s just one big image, just like you’ve used here.
I like it though, it’s a slight shift from the norm.