Question

以下是来自用户照片的网站的图片，他们链接到个人资料但在图片上您会看到一个+号，此部分链接以添加朋友。

我想做类似的事情，但我不想只是将加号部分作为链接，我想点击加号并显示几个链接，有点像下拉列表。

只有CSS才能实现这样的事情，或者需要javascript吗？

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

Answer 1

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

这使得假设图像列表都是同一列表的一部分，并且您不介意使用普通的CSS。此外，这是纯粹的CSS，它依赖于:hover而不是任何形式的onClick事件。对于onClick，你需要js。

我还没有做过测试用例，但我认为这应该可行。

测试用例位于：my site。

Answer 2

是的，我相信需要javascript，但在jquery的帮助下，它不会非常难。您通常会创建一个下拉列表（有很多教程），并将其放在您想要的位置。有趣的部分是当你点击图像的+符号部分时打开列表。您可以将+符号设置为单独的图像，位于第一个图像的顶部。这很容易注册点击，否则你将不得不使用一些其他方法来注册某个地方的点击，比如相对定位的不可见元素。：d

做这样菜单的最佳方式

2 个答案: