Javascript 做这样的菜单最好的方法
下面是一张来自一个网站的图片，上面有用户的照片，他们链接到一个个人资料，但在图片上你会看到一个+符号，这部分链接到添加一个朋友 我想做一些类似的事情，但不只是有加号部分是一个链接，我想点击加号，并有一对夫妇的链接出现，有点像一个下拉列表 像这样的东西是否只需要CSS就可以实现，还是需要javascriptJavascript 做这样的菜单最好的方法,javascript,jquery,css,menu,Javascript,Jquery,Css,Menu,下面是一张来自一个网站的图片，上面有用户的照片，他们链接到一个个人资料，但在图片上你会看到一个+符号，这部分链接到添加一个朋友 我想做一些类似的事情，但不只是有加号部分是一个链接，我想点击加号，并有一对夫妇的链接出现，有点像一个下拉列表 像这样的东西是否只需要CSS就可以实现，还是需要javascript 是的，我认为需要javascript，但在jquery的帮助下，这并不难。通常情况下，您会创建一个下拉列表（有很多关于该列表的教程），并将其放置在您想要的位置。有趣的部分是当你点击图像的+符号
是的，我认为需要javascript，但在jquery的帮助下，这并不难。通常情况下，您会创建一个下拉列表（有很多关于该列表的教程），并将其放置在您想要的位置。有趣的部分是当你点击图像的+符号部分时打开列表。您可以将+符号设置为一个单独的图像，位于第一个符号的顶部。这将很容易注册单击，否则您将不得不使用其他方法注册对某个位置的单击，例如相对定位的不可见元素：D
<?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>
ul li ul{显示：无；}
ul li{位置：相对位置；
显示：块；
高度：91px；/*图像的大小*/
宽度：91px；
}
李斯潘
{显示：块；
位置：绝对位置；
底部：0；
右：0；
边框：1px实心#f90；
背景色：#fff；
颜色：#000；
z指数：1000；
宽度：1米；
高度：1米；
}
ul-li：悬停ul
{display:block；/*并根据需要设置样式*/
位置：绝对位置；
左：91px；/*按图像宽度向左移动以获得“弹出”效果。对于下拉，请使用高度*/
排名：0；
背景色：#fff；
}
ulli ulli
{显示：块；
高度：1.2米；
宽度：8em；
}
#xx{background:#fff url（img/xx.jpeg）左上角不重复；
}/*我认为使用所代表的用户/人员的id是有意义的，您可能不同意；按你的要求修改*/
#joanne{背景：#fff url（img/joanne.jpeg）左上角不重复；
}
- ？
- ？
：hover测试用例位于：。基于您希望单击加号并让其执行除转到另一页以外的其他操作的事实，需要使用JavaScript。而不是：hover，关于：focus呢？其次，这在IE6中不起作用（如果有必要的话），因为只有锚支持在那个垃圾浏览器中悬停。对于IE7，使用这种方法可能是安全的。