源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 190|回复: 11

[CSS] 带有css3动画效果的兼容多浏览器简单导航条示例

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2014-1-26 10:16:39 | 显示全部楼层 |阅读模式
用原生JS写了一个简单的导航,下拉菜单加了一点CSS3动画效果,兼容IE6-10、FIREFOX、CHROME、OPERA、SAFARI等主流浏览器

CSS样式:

复制代码代码如下:
<style>
*{margin:0;padding:0;}
a{text-decoration:none;color:#666;}
li{list-style:none;}
body{font-family:Verdana,SimSun;font-size:12px;color:#666;text-align:center;background:#EEE;}
#box{width:760px;margin:100px auto 0 auto;text-align:center;background:#A33236;}
#nav{width:720px;height:30px;margin:0 auto;line-height:30px;}
#nav a{display:block;width:90px;height:30px;text-align:center;color:#FFF;}
#nav li{float:left;}
#nav li ul{display:none;position:absolute;margin-left:-20px;}
#nav li ul li{clear:both;}
#nav li ul a{width:130px;border-top:1px solid #FFF;text-align:center;background:#A33236;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;}
#nav li ul li a:hover{background:#FFF;color:#A33236;}
</style>


JAVASCRIPT:

复制代码代码如下:
<script>
/*-----显示子菜单-----*/
function display(li) {
var subNav = li.getElementsByTagName("ul")[0];
subNav.style.display = "block";
}</p> <p>/*-----隐藏子菜单-----*/
function hide(li) {
var subNav = li.getElementsByTagName("ul")[0];
subNav.style.display = "none";
}
</script>


复制代码代码如下:
<div id="box">
<div id="nav">
<ul>
<li onmouseover="display(this)" onmouseout="hide(this)">
<a href="javascript:;">学校概况</a>
<ul>
<li><a href="#"><span>学校简介</span></a></li>
<li><a href="#">学校领导</a></li>
<li><a href="#">机构设置</a></li>
<li><a href="#">院系设置</a></li>
<li><a href="#">创新平台</a></li>
<li><a href="#">师大印象</a></li>
<li><a href="#">校标释义</a></li>
</ul>
</li>
<li onmouseover="display(this)" onmouseout="hide(this)">
<a href="javascript:;">教学科研</a>
<ul>
<li><a href="#">教务处</a></li>
<li><a href="#">教务教学管理系统</a></li>
<li><a href="#">精品课程</a></li>
<li><a href="#">科学技术处</a></li>
<li><a href="#">社会科学处</a></li>
<li><a href="#">实验教学示范中心</a></li>
<li><a href="#">语言文字网</a></li>
<li><a href="#">实习支教专题网</a></li>
</ul>
</li>
<li onmouseover="display(this)" onmouseout="hide(this)">
<a href="javascript:;">招生就业</a>
<ul>
<li><a href="#">研究生招生</a></li>
<li><a href="#">普高招生</a></li>
<li><a href="#">高职本科招生</a></li>
<li><a href="#">成教招生</a></li>
<li><a href="#">就业指导</a></li>
</ul>
</li>
<li onmouseover="display(this)" onmouseout="hide(this)">
<a href="javascript:;">学生工作</a>
<ul>
<li><a href="#">共青团</a></li>
<li><a href="#">学工在线</a></li>
<li><a href="#">学生工作管理系统</a></li>
<li><a href="#">心理教育中心</a></li>
</ul>
</li>
<li onmouseover="display(this)" onmouseout="hide(this)">
<a href="javascript:;">信息服务</a>
<ul>
<li><a href="#">网络中心</a></li>
<li><a href="#">网络自助服务</a></li>
<li><a href="#">邮件系统</a></li>
<li><a href="#">选课系统</a></li>
<li><a href="#">财务信息</a></li>
<li><a href="#">VPN:教师专线</a></li>
<li><a href="#">后勤报修服务</a></li>
<li><a href="#">国内高校信息</a></li>
</ul>
</li>
<li><a href="#">图书资源</a></li>
<li><a href="#">校友工作</a></li>
<li><a href="#">招标信息</a></li>
</ul>
</div>
</div>

回复

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-8-13 09:50:02 | 显示全部楼层
啪啪啪生怕PSP怕
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

100

积分

注册会员

Rank: 2

积分
100
发表于 2023-2-4 18:10:59 | 显示全部楼层
为全额万千瓦
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-6-23 21:10:12 | 显示全部楼层
强烈支持楼主ing……
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

473

积分

中级会员

Rank: 3Rank: 3

积分
473
发表于 2023-8-31 16:27:52 | 显示全部楼层
需要很久了终于找到了
回复 支持 反对

使用道具 举报

5

主题

2万

回帖

183

积分

注册会员

Rank: 2

积分
183
发表于 2023-11-1 21:56:49 | 显示全部楼层
抽根烟,下来看看再说
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

301

积分

中级会员

Rank: 3Rank: 3

积分
301
发表于 2024-3-3 21:46:16 | 显示全部楼层
而非为吾问无为谓娃娃
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-4-24 15:42:10 | 显示全部楼层
非常vbcbvcvbvcb
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

50

积分

注册会员

Rank: 2

积分
50
发表于 2024-7-13 13:50:49 | 显示全部楼层
66666666666
回复 支持 反对

使用道具 举报

7

主题

2万

回帖

398

积分

中级会员

Rank: 3Rank: 3

积分
398
发表于 2024-8-13 13:57:17 | 显示全部楼层
数据库了多久撒快乐的健身卡啦
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-24 08:22 , Processed in 0.120133 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表