SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    1 menu item having 4 images?

    I've never done this with images, but I have to for this project so I'm unsure what to do. the images I have are for inactive, hover, selected, and current (color for the current page)...how would I do this for each menu item?

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're only changing the colour you don't need images; just set the background colour with CSS.

    If the images aren't monochromatic, you still use CSS backgrounds. The hover and selected states can be specified with pseudo-classes (if I understand correctly what you mean by 'selected'). The inactive state would be the default background. I'll get back to the 'current' state in a minute.
    Code HTML4Strict:
    <ul id="nav">
      <li><a href="/">Start</a></li>
      <li><a href="/news">News</a></li>
      <li><a href="/about">About Us</a></li>
    </ul>
    Code CSS:
    #nav a:link, #nav a:visited {
      background:#666 url("/images/inactive.png") repeat-x 0 0;
      color:#fff;
    }
     
    #nav a:hover {
      background:#ccc url("/images/hover.png") repeat-x 0 0;
    }
     
    #nav a:active {
      background:#ff0 url("/images/selected.png") repeat-x 0 0;
    }

    If you generate the menu dynamically using server-side scripting, or if the menu is hard-coded on each page, the easiest way to handle the 'current' state is to set an ID of the 'current' menu item. Then add the image with CSS.
    Code HTML4Strict:
    <li><a href="/" id="current">Start</a></li>
    Code CSS:
    #nav #current {
      background:#00f url("/images/current.png") repeat-x 0 0;
    }

    If it's a simple include file, you can do this by a combination of body class and menu item ID.
    Code HTML4Strict:
    <body class="start">
      ...
      <ul id="nav">
        <li><a href="/" id="start-link">Start</a></li>
        <li><a href="/news" id="news-link">News</a></li>
        <li><a href="/about" id="about-link">About Us</a></li>
      </ul>
    Code CSS:
    body.start #nav #start-link,
    body.news #nav #news-link,
    body.about #nav #about-link {
      background:#00f url("/images/current.png") repeat-x 0 0;
    }

    A better option may be to combine all four images into one, and just change the background position for the states. That will eliminate the flicker that can otherwise occur on state changes.

    HTH
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    A better option may be to combine all four images into one, and just change the background position for the states. That will eliminate the flicker that can otherwise occur on state changes.

    HTH
    First, thx 4 the long reply! really helpful. I'm curious about this method though, what exactly do you mean by combine four images into 1 and then change the background position?

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What he means is to create a single image and then shift the position of the image depending on the current state.

    You can see a couple examples here (it's the menu) and here.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Here is a screencast that teaches you how to create a three-state menu by changing the position of an image.
    http://css-tricks.com/new-screencast-three-state-menu/

    You should be able to incorporate your needs very easily into this solution.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •