2
alt text http://sites.google.com/site/yanchengcheok/Home/google-drop-down-menu.png谷歌喜欢下拉菜单
您好，每当我们去谷歌页面和“更多”，在菜单上单击将被丢弃了。我想在我的网站上也有以下效果。我可否知道哪个JavaScript库可以帮助我实现类似的效果？
Q
谷歌喜欢下拉菜单
A
回答
0
alt text http://sites.google.com/site/yanchengcheok/Home/google-copy-cat.png
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
background: #fff;
font: .74em "Trebuchet MS", Verdana, Arial, sans-serif;
line-height: 1.5em;
}
/* Help Menu Section. */
a#help-menu:hover {
color: #3B6EBF;
}
#help-menu {
text-decoration: none;
}
#help-menu u {
text-decoration: underline;
}
#jsddm
{ margin: 0;
padding: 0}
#jsddm li
{ display: -moz-inline-box; /* For FF */
display: inline-block; /* IE <8 needs this tripped back to display: inline; to make it work on blocks */
list-style: none;
}
#jsddm li a
{
display: block;
white-space: nowrap}
#jsddm li ul
{ margin: 0;
padding: 0;
background:none repeat scroll 0 0 #FFFFFF;
border-color:#C9D7F1 #3366CC#3366CC#A2BAE7;
border-style:solid;
border-width:1px;
text-align: left;
position: absolute;
display: none;}
#jsddm li ul li
{
float: none;
display: inline}
#jsddm li ul li a
{
padding:0.2em 0.5em;
text-decoration: none;
background: #FFFFFF}
#jsddm li ul li a:hover
{
color: #FFFFFF;
background: #3366CC}
.jsddm-seperator {
border-top:1px solid #C9D7F1;
font-size:1px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var ddmenuitem = 0;
function jsddm_open()
{ ddmenuitem = $(this).find('ul').eq(0).toggle();}
function jsddm_close(evt)
{
if (ddmenuitem) ddmenuitem.hide();
}
$(document).ready(function()
{
$('#jsddm > li').bind('click', jsddm_open);
//$(this).bind('click', jsddm_close);
});
</script>
</head>
<body>
<div style="text-align:center">
<ul id="jsddm">
<li><a href="#">Home</a></li>
<li> · </li>
<li><a href="#">Main Menu1</a></li>
<li> · </li>
<li><a href="#">Main Menu2</a></li>
<li> · </li>
<li><a href="#">Main Menu3</a></li>
<li> · </li>
<li><a href="#">Main Menu4</a></li>
<li> · </li>
<li><a href="#" id="help-menu"><u>Help</u><small>▼</small></a>
<ul>
<li><a href="#">Install</a></li>
<li><div class="jsddm-seperator"></div></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
</ul>
</div>
</body>
0
你只需要添加监听器点击事件“更”元素：
elementRef.addEventListener("click", function() {
// listener code here
}, false);
（你可以在任何JS库，如果你想这样做）。此侦听器现在应该只显示另一个元素（即，<div id="more" />），将CSS属性display从none更改为block。此外，您还为点击事件添加了另一个侦听器，但这次是为body元素（隐藏菜单）。
最终的代码可能看起来像以下：
的JavaScript：
document.getElementById("toggle-more").addEventListener("click", function(e) {
document.getElementById("more").style.display = "block";
e.stopPropagation();
}, false);
document.body.addEventListener("click", function() {
document.getElementById("more").style.display = "none";
}, false);
HTML：
<span id="toggle-more">More...</span>
<div id="more">
<ul> ... </ul>
</div>
CSS：
#more {
display: none;
position: absolute;
top: 15px;
left: 150px;
}
1
任何JavaScript库，可以帮助你在这样的situat离子。
您可能想看看下面的例子，我希望可以让你在正确的方向前进：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Drop down demo</title>
</head>
<body style="font-family: Arial; font-size: 11px; margin: 0 auto;">
<div id="menu_bar" style="height: 25px; width: 100%; position: absolute;">
<a href="#" style="float: left; margin-right: 10px;">Menu Item 1</a>
<a href="#" style="float: left; margin-right: 10px;">Menu Item 2</a>
<a href="#" style="float: left; margin-right: 10px;">Menu Item 3</a>
<a href="#" style="float: left; margin-right: 10px;">Menu Item 4</a>
<div style="float: left;">
<a id="more_link" href="#" style="float: left;">more...</a>
<div id="more_menu" style="width: 95px; display: none;">
<a href="#" style="float: left; margin-right: 10px;">More Item 1</a>
<a href="#" style="float: left; margin-right: 10px;">More Item 2</a>
<a href="#" style="float: left; margin-right: 10px;">More Item 3</a>
<a href="#" style="float: left; margin-right: 10px;">More Item 4</a>
</div>
</div>
</div>
<div id="spacer" style="height: 30px;"></div>
Here goes the body
<script type="text/javascript">
document.getElementById('more_link').addEventListener('click', function(e) {
document.getElementById('more_menu').style.display = 'block';
e.stopPropagation();
}, false);
document.body.addEventListener('click', function() {
document.getElementById('more_menu').style.display = 'none';
}, false);
</script>
</body>
</html>
截图从上面的例子：
Drop down demo http://img31.imageshack.us/img31/7576/menuxs.png
4
谷歌发布他们的closure libray，我认为你的问题菜单如下
http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/submenus.html
希望它有助于
干杯
1
Similar menus, very well documented and flexible.只有丹尼斯的回答 - 用实际封库 - 更好，但我怀疑它是有据可查的。
+0
你说得对。没有很好的记录。 – 2010-03-13 15:50:17
0
在几个星期前我曾穿过的博客文章无意中发现了类似菜单 创建谷歌可能是能帮助你：
它使用jQuery的，但你发布的图像看起来像旧的谷歌菜单，因为新的菜单是黑色的，甚至这篇博客文章在同一个新菜单上，但它也包括下拉菜单，所以我认为这可能会帮助你ü。
更新
Here是创建旧的菜单以及博客文章，你也可以看看这个，但这并不具有下拉功能，你所要求的，可能是前一个更好。
相关问题
- 1. 谷歌喜欢下拉框当用户搜索
- 2. 谷歌工具动态下拉菜单
- 3. Tweetie喜欢滑动菜单
- 4. 安卓菜单喜欢facebook
- 5. 制作搜索引擎喜欢谷歌
- 6. 对话框喜欢谷歌地图Android
- 7. json.parse不喜欢谷歌地图建议
- 8. 谷歌街景喜欢引擎
- 9. 谷歌+喜欢android上的单元格背景
- 10. 安卓：DatePicker的下拉喜欢微调
- 11. facebook主页喜欢下拉div
- 12. 喜欢在菜单上显示
- 13. 谷歌地图，Z索引和下拉Javascript菜单
- 14. 更改谷歌地图图标下拉菜单
- 15. jQuery插件，允许像谷歌翻译下拉菜单翻译
- 16. 获取谷歌扩展弹出下拉菜单
- 17. 如何使下拉菜单像“美味”和“谷歌”？
- 18. css下拉菜单落后于谷歌图表
- 19. 你如何格式下拉菜单与谷歌的CSS？
- 20. 谷歌广告下的css菜单？
- 21. Facebook喜欢不拉标题
- 22. 下拉菜单
- 23. 下拉菜单？
- 24. 下拉菜单
- 25. 下拉菜单
- 26. 下拉菜单
- 27. 安卓谷歌播放自动安装apk喜欢谷歌驱动器
- 28. SEO谷歌子菜单
- 29. SQL不喜欢和喜欢
- 30. mySQL喜欢，但不喜欢
我非常喜欢你的解决方案。不过，我意识到子菜单显示后，menu_bar的div高度也会扩大，这并不是我想要的：请参阅http://sites.google.com/site/yanchengcheok/Home/before-click.png和http ：//sites.google.com/site/yanchengcheok/Home/after-click.png – 2010-03-13 15:51:48
@Yan Cheng CHEOK：通过给menu_bar指定宽度和高度可以很容易地解决这个问题，比如'height：25px;宽度：100％;'。查看更新的示例。 （为了不使用水平滚动条，我还在'body'中添加了'margin：0 auto;'）。 – 2010-03-13 16:13:08
@Yan Cheng CHEOK和@Daniel Vassallo，这可能是一个很好的答案，但它可能不是。在所有浏览器上尝试，等等......这就像在家里做寿司一样。可能是伟大的，可能包含未知的寄生虫:) – 2010-03-13 16:44:10