JavaScript下拉菜单

shirlly

浏览: 1647203 次
性别:
来自: 福州

最近访客更多访客>>

cyzy168

acxingyun

123456lllppp

梁静茹的小三

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javaScript

JavaScript CSS 浏览器 HTML XHTML

去年我曾经写过一篇 CSS 下拉菜单，其中完全只使用 CSS 实现了导航条鼠标悬停下拉菜单的效果（演示地址）。但是只用 CSS 实现起来比较麻烦，代码较多，而且为了浏览器的兼容性不得不使用了两个 CSS 文件，所以我把它叫做“探究”，实用性并不强。

最近我从 blog 的流量统计中发现，很多网友通过搜索“JS 下拉菜单”关键字访问到了我的那篇文章。不过很遗憾，那篇文章和 JavaScript 一点关系都没有，有误导网友之嫌。所以，昨天我花了一点时间把原来的代码做了一点修改，搞了一个简易版 JavaScript 下拉菜单。其实用 JS 实现下拉菜单比 CSS 简单多了，因为各个浏览器之间对 JS 支持的差异相比 CSS 来说要小一些，不需要花那么多心思用在对付浏览器上。如果 HTML 的结构良好，只需要很少的 JS 代码即可实现，而且可以实现多级下拉菜单的效果（我的示例中给出了二级下拉菜单，可以根据需要按照原来的 HTML 结构逐级添加）。

JavaScript 下拉菜单演示地址

页面源代码：

<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JavaScript下拉菜单</title>
    <style type="text/css">
        * {
            padding:0; 
            margin:0;
        }
        body {
            font-family:verdana, sans-serif; 
            font-size:small;
        }
        #navigation, #navigation li ul {
            list-style-type:none;
        }
        #navigation {
            margin:20px;
        }
        #navigation li {
            float:left;
            text-align:center;
            position:relative;
        }
        #navigation li a:link, #navigation li a:visited {
            display:block; 
            text-decoration:none; 
            color:#000; 
            width:120px; 
            height:40px; 
            line-height:40px; 
            border:1px solid #fff; 
            border-width:1px 1px 0 0; 
            background:#c5dbf2; 
            padding-left:10px; 
        }
        #navigation li a:hover {
            color:#fff;
            background:#2687eb;
        }
        #navigation li ul li a:hover {
            color:#fff;
            background:#6b839c; 
        }
        #navigation li ul {
            display:none;
            position:absolute; 
            top:40px;
            left:0;
            margin-top:1px;
            width:120px;
        }
        #navigation li ul li ul {
            display:none;
            position:absolute; 
            top:0px;
            left:130px; 
            margin-top:0;
            margin-left:1px;
            width:120px;
        }
    </style>
    <script type="text/javascript">
        function displaySubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "block";
        }
        function hideSubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "none";
        }
    </script>
</head>
<body>
    <ul id="navigation">
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            <a href="#">栏目1</a>    
            <ul>
                <li><a href="#">栏目1->菜单1</a></li>
                <li><a href="#">栏目1->菜单2</a></li>
                <li><a href="#">栏目1->菜单3</a></li>
                <li><a href="#">栏目1->菜单4</a></li>
            </ul>
        </li>
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            <a href="#">栏目2</a>    
            <ul>
                <li><a href="#">栏目2->菜单1</a></li>
                <li><a href="#">栏目2->菜单2</a></li>
                <li><a href="#">栏目2->菜单3</a></li>
                <li><a href="#">栏目2->菜单4</a></li>
                <li><a href="#">栏目2->菜单5</a></li>
            </ul>
        </li>
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            <a href="#">栏目3</a>    
            <ul>
                <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
                    <a href="#">栏目3->菜单1</a>
                    <ul>
                        <li><a href="#">菜单1->子菜单1</a></li>
                        <li><a href="#">菜单1->子菜单2</a></li>
                        <li><a href="#">菜单1->子菜单3</a></li>
                        <li><a href="#">菜单1->子菜单4</a></li>
                    </ul>
                </li>
                <li><a href="#">栏目3->菜单2</a></li>
                <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
                    <a href="#">栏目3->菜单3</a>
                    <ul>
                        <li><a href="#">菜单3->子菜单1</a></li>
                        <li><a href="#">菜单3->子菜单2</a></li>
                        <li><a href="#">菜单3->子菜单3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>
永久链接 | 引用 Trackback | 本文评论 RSS

转自：http://www.helloxudan.net/2008/04/09/javascript-drop-down-menu.html

分享到：

应用了UpdatePanel的页面异步回送时出现空 ... | 关于Asp程序的Server.CreateObject错误解 ...

2009-03-17 18:12
浏览 1990
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论