October 16, 2007
用 JavaScript 实现鼠标悬停时展开的菜单
虽然标题这样写，但实际上使用 JavaScript + DOM/CSS 组合可以实现很多强大的功能。昨天看到 fisio 提到这种鼠标悬停时展开的菜单，我原来也没有用过，经他一提醒觉得还是挺有用处的，尤其在有很多内容的页面上。
废话最后再说，直接给出代码先：
JavaScript
<script type="text/javascript">
function popMenu(objId) {
var obj = document.getElementById(objId);
if (obj.style.display == 'none') {
obj.style.display = 'block';
} else {
obj.style.display = 'none';
}
}
</script>
function popMenu(objId) {
var obj = document.getElementById(objId);
if (obj.style.display == 'none') {
obj.style.display = 'block';
} else {
obj.style.display = 'none';
}
}
</script>
在页面中使用
<div id="menuCaption" onmouseover="popMenu('menuLists');" onmouseout="popMenu('menuLists');">
<!-- 当鼠标悬停在这里时显示下面列表的内容 -->
<ul id="menuLists" style="display:none;">
<!-- 这里是鼠标悬停时显示的内容 -->
<li>菜单列表内容</li>
<li>菜单列表内容</li>
<li>菜单列表内容</li>
</ul>
</div>
<!-- 当鼠标悬停在这里时显示下面列表的内容 -->
<ul id="menuLists" style="display:none;">
<!-- 这里是鼠标悬停时显示的内容 -->
<li>菜单列表内容</li>
<li>菜单列表内容</li>
<li>菜单列表内容</li>
</ul>
</div>
原理
页面调用之初，只有 menuCaption 即菜单的标题显示，menuLists 这些菜单列表的内容不显示；但当鼠标进入菜单标题区域后，会激活 popMenu 函数把 menuLists 的样式从“display:none”改为“display:block”，这样 menuLists 的内容就显示出来了；鼠标离开菜单标题区域后再次隐藏列表内容。
SEO 方面的疑问
由于页面的代码中有“display:none”，相当于存在隐藏文字，我不敢确定 Google 对这类隐藏文字的态度，所以各位要使用的时候请务必小心，做好可能会被 Google 降权的心理准备。
Pocky at 22:40 Oct 16, 2007 ₪
seo对display:none也这么高的要求啊？
cosbeta at 09:36 Oct 17, 2007 ₪
哎！！哎！！ 哈哈 哈哈
北极冰仔 at 09:50 Oct 17, 2007 ₪
cosbeta > 别笑了，有好方法就拿出来吧！
cosbeta at 10:49 Oct 17, 2007 ₪
逗你玩玩的，呵呵！小伙子好久没有上gtalk了
北极冰仔 at 12:22 Oct 17, 2007 ₪
cosbeta > 呵呵，是啊，最近课多项目重有点忙不过来，更新也很少了。等有空了补上。
shukr at 01:21 May 25, 2008 ₪
新手，发现我的wordpress上无法使用啊。需不需要上床一个js脚本文件呢？