SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    how to create a advanced menu like this

    hello all,

    i want to create a menu like this

    doubt.png


    i want to build it using css. i want that when i hover over on a single block then it should show some color effect and it will be a link. how could i do that?

    see if i do slicing then i will be getting whole block as the link(the full image of a single block). this will be a problem to me. how can i achieve this?

    also what are the other ways i can create it for a php website.

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    If you want to use that design, you will need to use images throughout, because there is no reliable way to display text like that.

    (I'm not saying this is necessarily a good idea, but it is the best way I can think of to achieve the effect you're after)

    The good news is that you can make part of an image into a image map, which allows you to select areas to use as links, meaning that you don't need to slice the original image, you can just leave it there intact.

    For the hover effect, the best thing to do would probably be to make copies of the original image, highlight the item you want – on each copy, just do one item – and make the rest of the image transparent. Then you will have a series of images that you can overlay onto the original one, each one highlighting a different item. You can then apply these to area#item1:hover as appropriate.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    If you want to use that design, you will need to use images throughout, because there is no reliable way to display text like that.

    (I'm not saying this is necessarily a good idea, but it is the best way I can think of to achieve the effect you're after)

    The good news is that you can make part of an image into a image map, which allows you to select areas to use as links, meaning that you don't need to slice the original image, you can just leave it there intact.

    For the hover effect, the best thing to do would probably be to make copies of the original image, highlight the item you want – on each copy, just do one item – and make the rest of the image transparent. Then you will have a series of images that you can overlay onto the original one, each one highlighting a different item. You can then apply these to area#item1:hover as appropriate.
    Thanks Mr. Stevie. that was a good idea

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    also i would like to ask that what are the other ways i can do this? like jquery etc etc

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    The only way is images to make it. You can use css to make the link areas http://www.visibilityinherit.com/cod...ped-anchor.php


Tags for this Thread

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
  •