這篇文章主要介紹了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實現微博導航欄，需要的朋友可以來參考下。
新聞熱點
疑難解答
圖片精選
