用 JavaScript 实现鼠标悬停时展开的菜单 at catch the digita...

用 JavaScript 实现鼠标悬停时展开的菜单

Oct 16th, 2007 |  网页设计 Add a Comment  

相关的日志

• 使用DOM折叠网页上的元素
• DOM 加载事件：addDOMLoadEvent
• 如何限制页面中图片的大小
• 使用 document.write 输出 script 块
• CSS Sprites 生成器
• 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>

 

在页面中使用

<div id="menuCaption" onmouseover="popMenu('menuLists');" onmouseout="popMenu('menuLists');">
    <!-- 当鼠标悬停在这里时显示下面列表的内容 -->
    <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 降权的心理准备。