js代码实现微博导航栏，js微博导航栏
- WBOYOriginal
- 2016-06-13 08:56:58978Durchsuche
js代码实现微博导航栏，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实现微博导航栏，需要的朋友可以来参考下。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：1．PHP 教程_1．PHP 简介，1.php_1.phpNächster Artikel：Yii2-Redis使用小记，yii2-redis小记