網頁設計中，尤為重要的一個元素就是導航菜單。今天我們來討論一下如何使用CSS實現中英文雙語導航菜單。
<ul class="menu"> <li> <a href="#">首頁</a> <a href="#" class="en">home</a> </li> <li> <a href="#">關于我們</a> <a href="#" class="en">about</a> </li> <li> <a href="#">產品中心</a> <a href="#" class="en">products</a> </li> <li> <a href="#">聯系我們</a> <a href="#" class="en">contact</a> </li> </ul>
如上所示，我們使用<ul>和<li>標簽創建了一個基礎的導航菜單。為了實現雙語顯示，我們在每個菜單項中都添加了一個英文的<a>標簽，通過CSS來控制其顯示與隱藏。
.menu a.en {
display:none;
}
.lang-en .menu a.en {
display:inline-block;
}
.lang-en .menu a.zh {
display:none;
}使用上述CSS，我們可以實現在頁面右上角添加一個切換語言按鈕（這里不再贅述），并通過改變<body>的類名實現中英文之間的切換。在中文狀態下，.menu a.en標簽將不顯示，而.menu a.zh標簽將正常顯示；而在英文狀態下，.menu a.en標簽將正常顯示，而.menu a.zh標簽將不顯示。
通過這樣的方式，我們可以快速、簡便地實現中英文雙語導航菜單，并且不用擔心SEO的問題。不管你是做跨境電商還是海外宣傳，雙語導航菜單都是不可或缺的元素。趕緊嘗試一下吧！
上一篇MySQL更改全部默認值
下一篇css中自帶的字體有哪些