这篇文章主要介绍了js代码实现微博导航栏的相关资料,需要的朋友可以参考下
微博导航看起来很美观，实现起来也不麻烦，直接写代码了
- <!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>
以上代码就是用js实现微博导航栏，需要的朋友可以来参考下。
新闻热点
疑难解答
图片精选
