带有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 3D立方体效果示例-transform也不过如此
Dec 05 HTML / CSS
纯CSS3实现表单验证效果(非常不错)
Jan 18 HTML / CSS
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 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 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
PHP Undefined index报错的修复方法
2011/07/17 PHP
php的ajax简单实例
2014/02/27 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
JavaScript基本对象
2007/01/11 Javascript
js 日期转换成中文格式的函数
2009/07/07 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
养殖人员的创业计划书范文
2013/12/26 职场文书
教师开学感言
2014/02/14 职场文书
创业女性典型材料
2014/05/02 职场文书
简历自我评价优缺点
2015/03/11 职场文书
外科护士长工作总结
2015/08/12 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技