CODEWITHSUNDEEP
javascriptjquerycssmenu
JasonDavis
JasonDavis

Reputation: 48973

Best way to do a menu like this

Below is an image from a site that hase user photo's, they link to a profile but on the image you will see a + sign, this part links to add a friend.

I am wanting to do something similar but instead of just having the plus sign part be a link, I am wanting to click the plus sign and have a couple of links appear, kind of like a dropdown list.

Would something like this be possible with just CSS or would javascript be needed?

alt text http://img2.pict.com/e6/20/e8/1544808/0/screenshot2b28.png

Upvotes: 0

Views: 234

Answers (2)

David Thomas
David Thomas

Reputation: 253476

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

    <style type="text/css" media="all">

ul li ul {display: none; }

ul li {position: relative;
    display: block;
    height: 91px; /* the size of the image */
    width: 91px;
      }

ul li span
    {display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    border: 1px solid #f90;
    background-color: #fff;
    color: #000;
    z-index: 1000;
    width: 1em;
    height: 1em;
    }

ul li:hover ul
    {display: block; /* and style as you require */
    position: absolute;
    left: 91px; /* moving left by the width of the image for a 'flyout' effect. for drop down, use the height instead */
    top: 0;
    background-color: #fff;
    }

ul li ul li
    {display: block;
    height: 1.2em;
    width: 8em;
    }

#xx {background: #fff url(img/xx.jpeg) top left no-repeat;
    } /* I figure that it'd make sense to use the id of the user/person represented, you may disagree; amend as you require */

#joanne {background: #fff url(img/joanne.jpeg) top left no-repeat;
    }


    </style>

</head>

<body>


<div id="wrap">

    <ul>
    <li id="xx"><span>?</span>
        <ul>
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
        </ul></li>

    <li id="joanne"><span>?</span>
        <ul>
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
        </ul></li>
    </ul>

</div>

</body>

</html>

This makes the assumptions that the list of images are all part of the same list, and that you don't mind using plain css. Also, this being pure css, it relies on the :hover not any form of onClick event. For onClick you'd need js.

I haven't done a test-case yet, but I think this should work.

Test-case at: my site.

Upvotes: 2

Gordon Gustafson
Gordon Gustafson

Reputation: 41249

Yes, I believe javascript would be needed, but with the help of jquery, it wouldn't be immensely hard. You would create a drop down list normally (there's many tutorials on that), and position it where you wanted it. The interesting part would be opening the list when you clicked on the + sign part of the image. You could make the + sign be a separate image, positioned on top of the first. This would be easy to register clicks, otherwise you would have to use some other method of registering a click on a certain place, like an invisible element positioned relatively . :D

Upvotes: 0

Related Questions