编程 Javascript

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>

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

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

- Author -

happyzgm

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

IE 当eval遇上function的处理

Aug 09 Javascript

输入自动提示搜索提示功能的使用说明:sugggestion.txt

Sep 02 Javascript

尝试动手制作javascript放大镜效果

Dec 25 Javascript

基于JavaScript实现根据手机定位获取当前具体位置（X省X市X县X街道X号）

Dec 29 Javascript

JS实现的走迷宫小游戏完整实例

Jul 19 Javascript

老生常谈ES6中的类

Jul 31 Javascript

JS实现table表格固定表头且表头随横向滚动而滚动

Oct 26 Javascript

AngularJS修改model值时,显示内容不变的实例

Sep 13 Javascript

彻底弄懂 JavaScript 执行机制

Oct 23 Javascript

详解如何在Angular优雅编写HTTP请求

Dec 05 Javascript

ES5新增数组的实现方法

May 12 Javascript

Vuex中的Mutations的具体使用方法

Jun 01 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