PDA

View Full Version : [CSS] Horizontal CSS Image Menu v1.0


BLiZZaRD
11-29-2006, 12:02 PM
1) CODE TITLE: Horizontal CSS Image Menu v1.0

2) AUTHOR NAME/NOTES: BLiZZaRD

3) DESCRIPTION: A pure CSS driven menu that enables dual image replacement for using custom images instead of text in your menus. Cross browser compatible and will degrade to a UL for text only. Can be altered to accommodate large or small pictures and can change images on the fly with a slight alter of CSS code.

4) URL TO CODE: Horizontal CSS Image Menu (http://outsidetheurl.com/FrozenCoyoteLabs/Codes/cssmenu.html) Includes instructions and explanations with each step of code :)

Note this is version 1. There are updates I am working on for a final release version, such updates include; removing the flicker form the image loading/caching, removing the dotted line from the visited links, and adding a working image/text replacement option.
BLiZZaRD
12-14-2006, 12:48 AM
I have edited and fixed the blink/flicker of the images by adding a simple preloader.

I also have 2 versions of the script, Version one as above (http://outsidetheurl.com/FrozenCoyoteLabs/Codes/cssmenu.html), without the use of text in the buttons and Version 2 (http://outsidetheurl.com/FrozenCoyoteLabs/Codes/cssmenuv2.html) which uses the defined text on the buttons.

Still working on a clean neat way to include the text in version 1 so it will degrade even better with older browsers, or when images are turned off. Version 2 of course handles this already.
BLiZZaRD
12-14-2006, 11:17 AM
And finally, after some thinking and action, the straight image version (#1) is complete as well. If a visitor hass CSS, and thus the images here) turned off, text links and a standard UL will appear in it's place!

Very nice!
chikkubhai
03-16-2008, 06:59 AM
And finally, after some thinking and action, the straight image version (#1) is complete as well. If a visitor hass CSS, and thus the images here) turned off, text links and a standard UL will appear in it's place!

Very nice!



The example link is not working. Could somebody please update the link and how it works please or at least a working example and code.

-Thanks