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实现微博导航栏,需要的朋友可以来参考下。

以上是 js代码实现微博导航栏 的全部内容, 来源链接: utcz.com/z/330289.html

回到顶部