滑鼠懸浮中英文切換橫向導航選單
分享一段程式碼例項,它實現了橫向導航選單。
當滑鼠懸浮,可以實現中英文切換效果,更多導航選單效果可以參閱:
(1).導航選單特效分類。
(2).下拉選單特效分類。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .top-nav { font-size: 12px; font-weight: bold; list-style: none; border-bottom: 8px solid #DC4E1B; overflow: auto; } .top-nav li { float: left; margin-right: 1px; } .top-nav li a { line-height: 25px; text-decoration: none; background: #DDDDDD; color: #666666; display: block; width: 80px; text-align: center; } .top-nav li a span { display: none; } .top-nav li a:hover span { display: block; } .top-nav li a:hover { margin-top: -25px; background-color: #DC4E1B; color: #FFF; } </style> </head> <body> <ul class="top-nav"> <li><a href="#">螞蟻部落一<span>Home</span></a></li> <li><a href="#">螞蟻部落二<span>Course</span></a></li> <li><a href="#">螞蟻部落三<span>Learn</span></a></li> <li><a href="#">螞蟻部落四<span>About</span></a></li> </ul> </body> </html>
相關文章
- 滑鼠懸浮底部有橫條伸展的導航選單
- 滑鼠懸浮背景上下翻滾切換導航
- 滑鼠懸浮緩慢下拉導航選單
- 滑鼠懸浮可以上下伸縮的導航選單
- css3滑鼠懸浮展開收縮導航選單CSSS3
- 中英文切換導航選單實現詳解
- JavaScript滑鼠懸浮展開側欄導航JavaScript
- CSS滑鼠懸浮圖片模糊切換效果CSS
- css滑鼠懸浮下拉選單效果CSS
- JavaScript橫向二級導航選單效果JavaScript
- CSS3橫向導航選單效果CSSS3
- 簡單介紹Vue實現滑鼠懸浮切換圖片srcVue
- 滑鼠懸浮導航欄背景和字型變色效果
- JavaScript實現HTML導航欄下拉選單[懸浮顯示]JavaScriptHTML
- CSS 滑鼠懸浮橫條從中間向兩邊擴充套件CSS套件
- 滑鼠懸浮連結底部出現橫線
- 底部導航欄懸浮效果
- HTML橫向導航欄HTML
- CSS3滑鼠懸浮橫條從中間向兩邊擴充套件效果CSSS3套件
- 來個橫向電梯導航
- 點選導航欄切換背景色效果
- HTML+CSS+JQuery實現下拉選單滑鼠懸浮顯示下拉選單,取消隱藏HTMLCSSjQuery
- bootstrap 選單導航選單nav li滑鼠移入hover下拉顯示boot
- PbootCMS導航選單-導航選單的使用教程boot
- Vue 資料雙向繫結實現二級下拉懸浮選單Vue
- jQuery滑鼠懸浮翻牌效果詳解jQuery
- jQuery滑鼠懸浮聚焦效果詳解jQuery
- 滑鼠懸浮圖片旋轉效果
- 滑鼠懸浮tr行高亮變色
- JavaScript滑鼠懸浮出現下拉選單效果JavaScript
- css滑鼠浮劃過切換按鈕背景圖片CSS
- css橫向導航欄製作流程詳解CSS
- 2020 用html jQuery實現廣告輪播圖自動切換 滾動頁面 滑鼠懸浮下標且左右切換圖片HTMLjQuery
- 滑鼠懸浮div實現旋轉效果
- 滑鼠懸浮div動畫改變尺寸動畫
- 滑鼠懸浮連結動畫高亮效果動畫
- 滑鼠懸浮電風扇旋轉效果
- CSS3滑鼠懸浮元素放大效果CSSS3