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


Posted in HTML / CSS onJanuary 26, 2014

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>
HTML / CSS 相关文章推荐
CSS3弹性伸缩布局之box布局
Jul 12 HTML / CSS
CSS3中Color的一些特性介绍
May 27 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
Css预编语言及区别详解
Apr 25 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 #HTML / CSS
css图标制作教程制作云图标
Jan 19 #HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 #HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 #HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 #HTML / CSS
两种CSS3伪类选择器详细介绍
Dec 24 #HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 #HTML / CSS
You might like
php数字转汉字代码(算法)
2011/10/08 PHP
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
js注意img图片的onerror事件的分析
2011/01/01 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
python基于socket实现网络广播的方法
2015/04/29 Python
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
在Django的session中使用User对象的方法
2015/07/23 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
Python检查ping终端的方法
2019/01/26 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
利用python实现汉诺塔游戏
2021/03/01 Python
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
爱国主义教育演讲稿
2014/08/26 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
社会工作专业自荐信
2014/09/26 职场文书
2014年保育员工作总结
2014/12/02 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
Redis可视化客户端小结
2021/06/10 Redis
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript