ansaurus

Question

Answer 1

A:

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

CrazyJugglerDrummer 2009-08-30 23:24:08

Answer 2

+1 A:

<?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"&gt;

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

David Thomas 2009-08-30 23:25:54

Instead of :hover, what about :focus? Secondly, this will not work in IE6 (if that matters) as only anchors support hover in that crap browser. As for IE 7, your probably safe using this method.

Zoidberg 2009-09-01 11:56:48

Yeah, `:focus` would likely work. Excepting, of course, IE6...

David Thomas 2009-09-01 12:26:53

ansaurus

tags:

views:

answers:

Best way to do a menu like this

related questions