js实现导航栏中英文切换效果
2017-01-16 16:12
691 查看
思路:
ul的高度为li的一半,ul{overflow:hidden}
li:hover{margin-top:-40px;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>中英切换导航条</title> <style type="text/css"> *{padding:0; margin:0;} li{ list-style:none; } a{ text-decoration:none;} .nav{ width:100%; height:40px; background:#222; margin-top:100px; overflow:hidden;} .list{ width:1000px; height:40px; margin:0 auto;} .list li{ float:left;} .list li a{ display:block; transition:0.3s;} .list b,.list i{ display:block; padding:0 30px; color:#aaa; line-height:40px; text-align:center;} .list b{ font-weight:100} .list i{ font-style:normal; background:#333; color:#fff;} .list a:hover{ margin-top:-40px;} </style> </head> <body> <div class="nav"> <ul class="list"> <li> <a href="#"> <b>Index</b> <i>首页</i> </a> </li> <li> <a href="#"> <b>course</b> <i>职业课程</i> </a> </li> <li> <a href="#"> <b>study</b> <i>就业学习</i> </a> </li> <li> <a href="#"> <b>BBS</b> <i>社区</i> </a> </li> <li> <a href="#"> <b>JiKe+</b> <i>发现+</i> </a> </li> </ul> </div> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
您可能感兴趣的文章:
相关文章推荐
- JS+Flash实现图片切换幻灯片效果
- Js实现类似图片相册左右切换效果
- JavaScript实现图片的滑动切换效果 的Js代码
- JS 实现导航栏悬停效果(续)
- JS实现Tab标签(选项卡)切换效果
- JS+DIV实现鼠标划过切换层效果
- JS实现flash效果切换图片源代码
- 简洁的JS实现Tab切换效果
- js实现图片渐隐渐显的切换效果
- JS 实现导航栏悬停效果(续2)
- 纯js实现背景图片切换效果代码
- 转:jquery实现tab切换效果及js css ajax推荐
- js(JavaScript)代码实现的TAB标签切换效果
- javascript实现tabs选项卡切换效果(自写原生js)
- JS+XMLDOM+XSL:实现中英文界面切换、排序、分页显示、增删改查XML文件数据源
- 实现JS标签切换效果【CSS图片切换】
- js实现的跟随鼠标移动的时钟效果(中英文日期显示)
- JS+DIV实现鼠标划过切换层效果
- JS 实现导航栏悬停效果
- 图片、切换-js实现图片轮换效果-by小雨