带有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 中的@keyframes介绍
Sep 02 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
Ratchet 模态框的实现
Aug 19 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 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
PHP5/ZendEngine2的改进
2006/10/09 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
Javascript String.replace的妙用
2009/09/08 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
node跨域请求方法小结
2017/08/25 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
python实现外卖信息管理系统
2018/01/11 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
异步传递消息系统的作用
2016/05/01 面试题
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
党支部先进事迹材料
2014/12/24 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL
MySQL 5.7常见数据类型
2021/07/15 MySQL
Python 数据可视化之Bokeh详解
2021/11/02 Python