CSS橫向滾動菜單欄是通過CSS實現的趨勢菜單,它可以用于導航網站,也可以用于移動設備中的應用程序。下面是如何使用CSS創建橫向滾動菜單欄的示例代碼:
<div class="menu-container"> <div class="menu"> <a href="#">首頁</a> <a href="#">新聞</a> <a href="#">娛樂</a> <a href="#">體育</a> <a href="#">科技</a> <a href="#">財經</a> <a href="#">汽車</a> <a href="#">房產</a> <a href="#">影視</a> <a href="#">旅游</a> </div> </div>
上述代碼使用了兩個div元素,其中一個應用于外圍容器,另一個則應用于菜單欄本身。接下來,我們需要給menu容器添加CSS樣式來實現橫向滾動效果:
.menu-container { overflow-x: scroll; white-space: nowrap; } .menu { display: inline-block; } .menu a { display: inline-block; padding: 10px; color: #fff; }
上述CSS代碼中,menu容器設置overflow-x屬性為scroll,這樣就可以在菜單項目內容很多時造成橫向滾動效果。white-space屬性設置為nowrap,用于使menu容器不自動換行。接下來,我們使用display屬性為menu容器設置為inline-block,這樣就可以使菜單項目水平排列。最后,我們為鏈接設置padding和顏色屬性以優化顯示效果。
這就是通過CSS創建橫向滾動菜單欄的方法,你可以根據需要更改代碼以實現其它的效果和風格。
上一篇css橫向滾動盒子
下一篇css橫向滑動隱藏滾動條