|
這是一個完全用CSS實現(xiàn)的中英文雙語導(dǎo)航菜單，無腳本和圖片，初始時，菜單語言是英文，當(dāng)鼠標(biāo)懸停在菜單上時，其變成中文，當(dāng)然你也可以反過來做。
實現(xiàn)原理：
XHTML
<ul id="nav">
<li><a class="bi" href="index.html">Home<span>首 頁</span></a></li>
</ul>
從上面代碼可以看出，中文放在 span 標(biāo)簽里，關(guān)鍵是需要在初始時，使其的屬性不可見。
CSS
.bi{
position: relative;
z-index: 0;
}
.bi:hover{
z-index: 99;
}
.bi:hover span{
visibility: visible;
top: 0;
left: 0;
cursor: pointer;
}
.bi span{
position: absolute;
left: -999em;
visibility: hidden;
}
#nav li a,.bi:hover span{
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
}
#nav li a:hover,.bi:hover span{
color: #FFFFFF;
background: #DC4E1B;
}
.bi:hover span{
padding-top: 2px;
}
鏈接的屬性是相對定位，那在此標(biāo)簽里的元素可將其作為參照點。 在 span 元素里的中文因其設(shè)定了不可見，所以在初始狀態(tài)時，只能顯示英文。而當(dāng)鼠標(biāo)懸停在菜單上時， span 元素里的設(shè)定變?yōu)榭梢�，Z軸為99 ，覆蓋在英文上面，從而實現(xiàn)了語言文字的轉(zhuǎn)換。
缺點：因為中英文字的長度關(guān)系，不能實現(xiàn)自適應(yīng)寬度，只能固定寬度。
最終效果
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
經(jīng)典論壇討論帖：
http://www.95time.cn/bbs/NewsDetail.asp?id=2581976
出處：藍色理想
責(zé)任編輯：moby
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
