js实现导航栏中英文切换效果


Posted in Javascript onJanuary 16, 2017

思路:

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js null undefined 空区别说明
Jun 13 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 Javascript
javascript几个易错点记录
Nov 26 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
js实现下一页页码效果
Mar 07 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
Bootstrap面板使用方法
Jan 16 #Javascript
codeMirror插件使用讲解
Jan 16 #Javascript
微信小程序 图片边框解决方法
Jan 16 #Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 #Javascript
微信小程序 video详解及简单实例
Jan 16 #Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 #Javascript
微信小程序 登录实例详解
Jan 16 #Javascript
You might like
PHP的FTP学习(四)
2006/10/09 PHP
php中文字母数字验证码实现代码
2008/04/25 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
python Django连接MySQL数据库做增删改查
2013/11/07 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
python样条插值的实现代码
2018/12/17 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
保护动物倡议书
2014/04/15 职场文书
学校食品安全责任书
2015/01/29 职场文书