js實(shí)現(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>首頁(yè)</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>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
- 原生JS實(shí)現(xiàn) MUI導(dǎo)航欄透明漸變效果
- JavaScript實(shí)現(xiàn)精美個(gè)性導(dǎo)航欄筋斗云效果
- JavaScript實(shí)現(xiàn)滑動(dòng)導(dǎo)航欄效果
- JS滾動(dòng)到指定位置導(dǎo)航欄固定頂部
- JavaScript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊導(dǎo)航欄變色特效
- js實(shí)現(xiàn)帶緩動(dòng)動(dòng)畫的導(dǎo)航欄效果
- Fullpage.js固定導(dǎo)航欄-實(shí)現(xiàn)定位導(dǎo)航欄
- 一步步教大家編寫酷炫的導(dǎo)航欄js+css實(shí)現(xiàn)
- js代碼實(shí)現(xiàn)微博導(dǎo)航欄
- js導(dǎo)航欄單擊事件背景變換示例代碼
- JavaScript滿天星導(dǎo)航欄實(shí)現(xiàn)方法
相關(guān)文章
微信小程序 云開(kāi)發(fā)模糊查詢實(shí)現(xiàn)解析
這篇文章主要介紹了微信小程序 云開(kāi)發(fā)模糊查詢實(shí)現(xiàn)詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09ionic js 模型 $ionicModal 可以遮住用戶主界面的內(nèi)容框
這篇文章主要介紹了ionic js 模型 $ionicModal 可以遮住用戶主界面的內(nèi)容框的相關(guān)資料,需要的朋友可以參考下2016-06-06高效的獲取當(dāng)前元素是父元素的第幾個(gè)子元素
例如處理事件的時(shí)候,有時(shí)候需要知道當(dāng)前點(diǎn)擊的是第幾個(gè)子節(jié)點(diǎn),而HTML DOM本身并沒(méi)有直接提供相應(yīng)的屬性,需要自己來(lái)計(jì)算。感興趣的朋友可以了解下本文2013-10-10BootStrap實(shí)現(xiàn)輪播圖效果(收藏)
這篇文章主要介紹了BootStrap實(shí)現(xiàn)輪播圖效果,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12javascript 判斷中文字符長(zhǎng)度的函數(shù)代碼
在很多時(shí)候,我們?cè)谶M(jìn)行數(shù)據(jù)提交數(shù)據(jù)庫(kù)時(shí).先會(huì)用javascript對(duì)其進(jìn)行有效性驗(yàn)證.如一個(gè)中文javascript為的length是1.但是數(shù)據(jù)庫(kù)中會(huì)占二個(gè)字節(jié).容易出錯(cuò)2012-08-08配置Grunt的Task時(shí)通配符支持和動(dòng)態(tài)生成文件名問(wèn)題
這篇文章主要介紹了配置Grunt的Task時(shí)通配符支持和動(dòng)態(tài)生成文件名問(wèn)題,需要的朋友可以參考下2015-09-09js實(shí)現(xiàn)文本框只允許輸入數(shù)字并限制數(shù)字大小的方法
這篇文章主要介紹了js實(shí)現(xiàn)文本框只允許輸入數(shù)字并限制數(shù)字大小的方法,涉及javascript對(duì)字符串正則判斷及數(shù)值大小判斷的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08微信小程序?qū)崿F(xiàn)文字長(zhǎng)按復(fù)制與一鍵復(fù)制功能全過(guò)程
微信小程序開(kāi)發(fā)是依托微信的,所以他的代碼是嵌入在微信的原始代碼之中的,這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)文字長(zhǎng)按復(fù)制與一鍵復(fù)制功能的相關(guān)資料,需要的朋友可以參考下2023-03-03JavaScript中的常見(jiàn)問(wèn)題解決方法(亂碼,IE緩存,代理)
這篇文章主要是對(duì)JavaScript中的常見(jiàn)問(wèn)題解決方法(亂碼,IE緩存,代理)進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所 幫助2013-11-11