html实现简单微博导航

| 阅读数:--次| 作者:js,javascript
摘要:首页 全部广播 好友 关注 微频道 微频道1 微频道2 ...
html代码
运行代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">
            var hiddenChild = function(obj) {
                    var ul = obj.getElementsByTagName("ul")[0];
                    ul.style.display = 'none';
                }
                /*
                 *obj表示导航条中的直接li
                 */
            var showChild = function(obj) {
                var ul = obj.getElementsByTagName("ul")[0];
                ul.style.display = 'block';
            }
        </script>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px
            }
            /*导航条*/
            
            #nav {
                line-height: 60px;
                list-style-type: none;
                background-color: #0000FF;
                text-align: center;
            }
            #nav a {
                color: white;
                text-decoration: none;
                display: block;
                width: 80px;
                font-size: 20px;
                font-weight: 800;
            }
            #nav a:hover {
                background-color: #ccc;
            }
            #nav li {
                background-color: blue;
                float: left;
                color: white;
                list-style-type: none;
            }
            #nav li ul {
                position: absolute;
                display: none;
                width: 130px;
            }
            .show {
                display: block;
            }
        </style>
    </head>

    <body>
        <ul id="nav">
            <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
                <a href="#">首页</a>
                <ul>
                    <li>
                        <a href="#">全部广播</a>
                    </li>
                    <li>
                        <a href="#">好友</a>
                    </li>
                    <li>
                        <a href="#">关注</a>
                    </li>

                </ul>

            </li>
            <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
                <a href="#">微频道</a>
                <ul>
                    <li>
                        <a href="#">微频道1</a>
                    </li>
                    <li>
                        <a href="#">微频道2</a>
                    </li>

                </ul>
            </li>
            <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
                <a href="#">找人</a>
                <ul>
                    <li>
                        <a href="#">明星</a>
                    </li>
                    <li>
                        <a href="#">达人</a>
                    </li>

                </ul>

            </li>
            <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
                <a href="#">微群</a>
                <ul>
                    <li>
                        <a href="#">股票</a>
                    </li>

                </ul>
            </li>

        </ul>
    </body>

</html>
返回顶部
学到老代码浏览 关闭浏览