html实现简单微博导航

发表于2015-08-01 14:37:55| 835次阅读| 来源webkfa| 作者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>

001<!DOCTYPE html>
002<html>
003 
004    <head>
005        <meta charset="utf-8" />
006        <title></title>
007        <script type="text/javascript">
008            var hiddenChild = function(obj) {
009                    var ul = obj.getElementsByTagName("ul")[0];
010                    ul.style.display = 'none';
011                }
012                /*
013                 *obj表示导航条中的直接li
014                 */
015            var showChild = function(obj) {
016                var ul = obj.getElementsByTagName("ul")[0];
017                ul.style.display = 'block';
018            }
019        </script>
020        <style type="text/css">
021            * {
022                margin: 0px;
023                padding: 0px
024            }
025            /*导航条*/
026             
027            #nav {
028                line-height: 60px;
029                list-style-type: none;
030                background-color: #0000FF;
031                text-align: center;
032            }
033            #nav a {
034                color: white;
035                text-decoration: none;
036                display: block;
037                width: 80px;
038                font-size: 20px;
039                font-weight: 800;
040            }
041            #nav a:hover {
042                background-color: #ccc;
043            }
044            #nav li {
045                background-color: blue;
046                float: left;
047                color: white;
048                list-style-type: none;
049            }
050            #nav li ul {
051                position: absolute;
052                display: none;
053                width: 130px;
054            }
055            .show {
056                display: block;
057            }
058        </style>
059    </head>
060 
061    <body>
062        <ul id="nav">
063            <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
064                <a href="#">首页</a>
065                <ul>
066                    <li>
067                        <a href="#">全部广播</a>
068                    </li>
069                    <li>
070                        <a href="#">好友</a>
071                    </li>
072                    <li>
073                        <a href="#">关注</a>
074                    </li>
075 
076                </ul>
077 
078            </li>
079            <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
080                <a href="#">微频道</a>
081                <ul>
082                    <li>
083                        <a href="#">微频道1</a>
084                    </li>
085                    <li>
086                        <a href="#">微频道2</a>
087                    </li>
088 
089                </ul>
090            </li>
091            <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
092                <a href="#">找人</a>
093                <ul>
094                    <li>
095                        <a href="#">明星</a>
096                    </li>
097                    <li>
098                        <a href="#">达人</a>
099                    </li>
100 
101                </ul>
102 
103            </li>
104            <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
105                <a href="#">微群</a>
106                <ul>
107                    <li>
108                        <a href="#">股票</a>
109                    </li>
110 
111                </ul>
112            </li>
113 
114        </ul>
115    </body>
116 
117</html>

html实现简单微博导航

发表于2015-08-01 14:37:55| 835次阅读| 来源webkfa| 作者js,javascript

相关文章

最新发布

阅读排行

热门文章

猜你喜欢