#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep Power
    0

    CSS Image Menu - How to Have Button default to "down" if on that page


    I'm not exactly sure the best way to phrase this (and it is possible I will need jQuery or some such other to accomplish this). I searched for CSS navigation and didn't see any threads which answered.

    Recreating a menu that was hard coded per page.
    Buttons have 2 states, normal and hover/down.

    If you are on the home page, the button is 'down', all others are normal. If you're on About, the about button is 'down', all others are normal.

    I think I'm going to use this one image method to recreate the buttons (and get rid of the DW pre-loader originally used).

    Code:
    http://www.wellstyled.com/css-nopreload-rollovers.html
    Is there a way via CSS (or JS?) to tell the button to be in the down state if the url matches X?

    The menu has already been converted to the typical horizontal <li> .
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    716
    Rep Power
    442
    CSS can't read the url, but there are lots of ways to do this sort of thing via CSS or other means. One CSS only way is to give each menu item an id and then set an id on the body tag, i.e.

    Code:
    <body id="home">
    
    CSS:
    #home #homeLink {background: green} /* sets menu id "homeLink" background on home page */
    If you have a lot of menu items this can get tedious because you need a new line of code for each menu item.

IMN logo majestic logo threadwatch logo seochat tools logo