带有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的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
CSS3弹性盒模型开发笔记(一)
Apr 26 HTML / CSS
CSS3对图片照片进行边缘模糊处理的实现
Aug 08 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
CSS3制作hover下划线动画
Mar 27 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
详解HTML5中ol标签的用法
Sep 08 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 HTML / CSS
分享几个实用的CSS代码块
Jun 10 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的类 功能齐全的发送邮件类
2006/10/09 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
python针对excel的操作技巧
2018/03/13 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
Python通过format函数格式化显示值
2020/10/17 Python
香港零食网购:上仓胃子
2020/06/08 全球购物
编写strcpy函数
2014/06/24 面试题
文明和谐家庭事迹材料
2014/05/18 职场文书
公司周年庆活动方案
2014/08/25 职场文书
2014年保卫工作总结
2014/12/05 职场文书
单位接收函范文
2015/01/30 职场文书
2015年计划生育责任书
2015/05/08 职场文书
《风筝》教学反思
2016/02/23 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技