您的位置：首页 > Web前端 > JavaScript

javascript DOM 带下拉子菜单的导航菜单

2013-01-07 13:18 417 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

        body { font-family: Verdana; font-size: 12px; line-height: 1.5; }

        a { color: #000; text-decoration: none; }

        a:hover { color: #F00; }

        #menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}

        #menu ul { list-style: none; margin: 0px; padding: 0px; }

        #menu ul li { float:left; margin-left:2px;}

        #menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; font-size:14px;}

        #menu ul li a#current { font-weight:bold; color:#fff;}

        #menu ul li ul { border:1px solid #ccc; display:none; position:absolute;}

        #menu ul li ul li { float:none; width:87px; background:#eee; margin:0;}

        #menu ul li ul li a { background:none;}

        #menu ul li ul li a:hover { background:#333; color:#fff;}

        #menu ul li:hover ul { display:block;}

        #menu ul li.sfhover ul { display:block;}

    </style>

    <script type="text/javascript"><!--    //--><![CDATA[//><!--

        function menuFix() {

            var sfEls = document.getElementById("menu").getElementsByTagName("li");

            for (var i = 0; i < sfEls.length; i++) {

                sfEls[i].onmouseover = function () {

                    this.className += (this.className.length > 0 ? " " : "") + "sfhover";

                }

                sfEls[i].onMouseDown = function () {

                    this.className += (this.className.length > 0 ? " " : "") + "sfhover";

                }

                sfEls[i].onMouseUp = function () {

                    this.className += (this.className.length > 0 ? " " : "") + "sfhover";

                }

                sfEls[i].onmouseout = function () {

                    this.className = this.className.replace(new RegExp("( ?|^)sfhover\\b"),

    "");

                }

            }

        }

        window.onload = menuFix;

        //--><!]]>

    </script>

</head>

<body>

    <div id="menu">

        <ul>

            <li><a id="current" href="#">首页</a></li>

            <li><a href="#">网页版式</a>

                <ul>

                    <li><a href="#">自适应宽度</a></li>

                    <li><a href="#">固定宽度</a></li>

                </ul>

            </li>

            <li><a href="#">web教程</a>

                <ul>

                    <li><a href="#">新手入门</a></li>

                    <li><a href="#">视频教程</a></li>

                    <li><a href="#">常见问题</a></li>

                </ul>

            </li>

            <li><a href="#">web实例</a></li>

            <li><a href="#">常用代码</a></li>

        </ul>

    </div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航