Results 1 to 4 of 4

Thread: [CSS] Horizontal CSS Image Menu v1.0

  1. #1
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default [CSS] Horizontal CSS Image Menu v1.0

    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 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.
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  2. #2
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    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, without the use of text in the buttons and Version 2 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.
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  3. #3
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    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!
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  4. #4
    Join Date
    Mar 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Not working

    Quote Originally Posted by BLiZZaRD View Post
    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •