SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS dropdown navigation with shadow

    Hello,

    Anyone know how to achieve this (attached image) in css or maybe with a free javascript navigation?

    I've created the basics with css.

    [IMG]file:///C:/DOCUME%7E1/IDANAR%7E1/LOCALS%7E1/Temp/moz-screenshot.jpg[/IMG]http://www.arbel-designs.com/css_test/

    One main thing that's very important to me, is to be able to achieve the drop shadow effect on the navigation.

    Thanks

    Idan
    Attached Images Attached Images
    Idan Arbel
    Arbel Designs
    Email/msn idan@arbel-designs.com
    http://www.arbel-designs.com

  2. #2
    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)
    Apply the background image to the nested list container (nested UL element), then set the position to bottom left and have it repeat on an X axis. Also set the background color to white (I'm presuming that's white at the top). From there, you can declare a background color for the nested links' hover state.

  3. #3
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    thanks for the reply and the help.

    will this part: Apply the background image to the nested list container (nested UL element)

    be for the drop shadow part? How do I get the transparency right? png isn't really an option because of ie....

    Idan
    Idan Arbel
    Arbel Designs
    Email/msn idan@arbel-designs.com
    http://www.arbel-designs.com

  4. #4
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, i've been doing more research but I can't find a good drop shadow solution for the menu other than using pngs. The problem with png is that ie doesn't support them.

    Any one know of a solution? should I use a javascript menu?


    Thanks

    idan
    Idan Arbel
    Arbel Designs
    Email/msn idan@arbel-designs.com
    http://www.arbel-designs.com

  5. #5
    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)
    IE 6 doesn't support it natively. However, you can use a .htc file to trigger an IE only filter that will turn PNG alpha-transparency on.

  6. #6
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how does this work? what is an htc file?
    Idan Arbel
    Arbel Designs
    Email/msn idan@arbel-designs.com
    http://www.arbel-designs.com

  7. #7
    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)

  8. #8
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, i'll try to implement the drop down and post here my results.
    Idan Arbel
    Arbel Designs
    Email/msn idan@arbel-designs.com
    http://www.arbel-designs.com


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
  •