js代码实现微博导航栏
更新时间：2015年07月30日 11:42:05 作者：dllling
这篇文章主要介绍了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实现微博导航栏，需要的朋友可以来参考下。
相关文章
这篇文章主要介绍了php配合jquery实现增删操作具体实例，有需要的朋友可以参考一下2013-12-12
这篇文章主要介绍了php中使用gd库实现下载网页中所有图片,本文直接给出实现代码,需要的朋友可以参考下2015-05-05
今天要探讨的是PHP网页导出Word文档的方法，使用其他语言的朋友也可以参考，因为原理是差不多的2012-05-05
本篇文章主要介绍了PHP实现阿里大鱼短信验证的实例代码的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了CI框架给视图添加动态数据的相关资料,需要的朋友可以参考下2014-12-12
有时上传图片时需要给网站加上水印，水印可以分为文字水印和图片水印,下面就实现这二种水印2013-12-12
这篇文章主要给大家汇总介绍了一些帝国cms常用标签以及使用小技巧，非常的实用，这里推荐给大家。2015-07-07
这篇文章主要介绍了php加密解密示例，大家参考使用吧2014-01-01
这篇文章主要介绍了PHP文件缓存smarty模板应用方法,结合实例形式较为详细的分析了smarty模板缓存的相关使用技巧,需要的朋友可以参考下2016-02-02
Apache+php+mysql在windows下的安装与配置(图文)
2008-02-02
最新评论