SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    menu active link help

    I have a horizontal menu.

    I want to set an image when it is active. But i want the image to be higher above

    Code:
    ------------------------------
         \  /                                
          \/
        Home Link1 Link2 Link3
    I basically have an arrow image that i want to place above the active menu item. Not exactly sure how i can go about this though.

    Thanks.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, the first thing I would do is use an unordered list to mark up the menu, then apply an ID of "menu" to the list itself.

    Instead of using images for the list items, I'd use plain text, and then combine them with an image substitution technique such as the one Paul O'B uses here:

    http://www.pmob.co.uk/temp/navimagereplace.htm (Note - I'd use the SPAN instead of EM, since it's not only semantically appropriate, but also because Mac-IE is a dead browser that no longer needs to nor should be supported.)

    Now, by active, do you mean when the person is hovering over the menu item (or has it "active" via the keyboard), or do you mean for the current page that the person is viewing? Both have slightly different implementations, which is why I'm asking.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is what i got.

    <ul id="headermenulist">
    <li id="active"><a href="#" id="current">Home</a></li>
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
    <li><a href="#">Link4</a></li>
    <li><a href="#">Link5</a></li>
    </ul>

    and yes active would be they are on the home page and the arrow shows that.

    as far as css i have

    #headermenulist li{
    display: inline;
    list-style-type: none;
    padding-right: 40px;
    }

    so its a horizontal list.
    When they are on say the home page the id would be active like shown above.

    But i dont know how to get just that to have an image above the text.

    As of right now i have a header area like

    Code:
    |-------------------------------------|
    |-------------------------------------|
    |                                     |
    |-------------------------------------|
    i want to do something like this.
    Code:
    |-------------------------------------|
    |-----\/------------------------------|
    |                                     |
    |     Home Link1 Link2 Link3          |
    |                                     |
    |-------------------------------------|
    Where the text is going to be vertically centered. But the image will be way at the top there.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    any ideas out there? thanks.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    bumping

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't forgotten, just got sidelined by work is all (typing this from the library on my way home from dinner).

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no problem, im working on some other stuff too but i cant seem to figure out how to do this menu thing or find anything on it. no rush.


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
  •