js實現(xiàn)導(dǎo)航欄中英文切換效果
更新時間：2017年01月16日 16:12:17 作者：happyzgm
本篇文章主要分享了javascript實現(xiàn)導(dǎo)航欄中英文切換效果的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧
思路：
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>中英切換導(dǎo)航條</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>職業(yè)課程</i>
</a>
</li>
<li>
<a href="#">
<b>study</b>
<i>就業(yè)學(xué)習(xí)</i>
</a>
</li>
<li>
<a href="#">
<b>BBS</b>
<i>社區(qū)</i>
</a>
</li>
<li>
<a href="#">
<b>JiKe+</b>
<i>發(fā)現(xiàn)+</i>
</a>
</li>
</ul>
</div>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
您可能感興趣的文章:
- 原生JS實現(xiàn) MUI導(dǎo)航欄透明漸變效果
- JavaScript實現(xiàn)精美個性導(dǎo)航欄筋斗云效果
- JavaScript實現(xiàn)滑動導(dǎo)航欄效果
- JS滾動到指定位置導(dǎo)航欄固定頂部
- JavaScript實現(xiàn)鼠標(biāo)點擊導(dǎo)航欄變色特效
- js實現(xiàn)帶緩動動畫的導(dǎo)航欄效果
- Fullpage.js固定導(dǎo)航欄-實現(xiàn)定位導(dǎo)航欄
- 一步步教大家編寫酷炫的導(dǎo)航欄js+css實現(xiàn)
- js代碼實現(xiàn)微博導(dǎo)航欄
- js導(dǎo)航欄單擊事件背景變換示例代碼
- JavaScript滿天星導(dǎo)航欄實現(xiàn)方法
相關(guān)文章
本文主要是通過javascript實現(xiàn)禁止瀏覽器中復(fù)制文本內(nèi)容的方法，十分的簡單，而且兼容IE和FF，有需要的小伙伴可以參考下2015-06-06
這篇文章主要介紹了js中的內(nèi)部屬性與delete操作符的相關(guān)資料,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了原生js的RSA和AES加密解密算法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
thinkphp標(biāo)簽實現(xiàn)bootsrtap輪播carousel實例代碼
這篇文章給大家介紹thinkphp標(biāo)簽實現(xiàn)bootsrtap輪播carousel實例代碼，非常不錯，具有參考借鑒價值，需要的的朋友參考下2017-02-02
本文通過實例代碼給大家介紹了js實現(xiàn)彈出框的拖拽效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
這篇文章給大家結(jié)束了通過js實現(xiàn)抖動效果，非常不錯，具有參考借鑒價值，感興趣的朋友參考下吧2017-06-06
JavaScript 高仿真可控彈簧振子實現(xiàn)代碼
我剛學(xué)JavaScript ，看見一些牛人寫了許多特效，我也花了一天寫了一個彈簧振子，完全獨創(chuàng)，沒有借鑒任何人的代碼.2009-10-10
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)下拉列表選擇框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
JavaScript使用setInterval()函數(shù)實現(xiàn)簡單輪詢操作的方法
這篇文章主要介紹了JavaScript使用setInterval()函數(shù)實現(xiàn)簡單輪詢操作的方法,以實例形式分析了輪詢操作的原理與javascript實現(xiàn)技巧,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了JS實現(xiàn)碰撞檢測的方法,結(jié)合實例形式分析了javascript碰撞檢測的原理與相關(guān)操作技巧,需要的朋友可以參考下2018-01-01