2022-05-28

如何在 Oxygen Builder 設定水平滑動導覽列(Horizontal Scroll Menu)

在桌面版用標籤(Tabs) 呈現內容的方式,希望在手機看到一樣是一行水平呈現的效果,不要因為寬度限制而文字跳行,很醜,在 Oxygen Builder 可以很快透過兩個步驟實現。

為了符合手機寬度,文字強迫換行
維持在大螢幕的排版體驗,文字依然一行,標籤可以水平滑動

在 Oxygen Builder 的設定方式

1.在 Tabs 的區塊以 CSS 設定文字不換行,若超過寬度,觸發水平滑動軸

在該 ID 區塊加上以下 CSS:

overflow: auto; /*自動判斷是否觸發 X or Y 軸滑動功能*/
white-space: nowrap; /* 在任何裝置顯示,文字不都要換行*/

2.在自訂的樣式表,設定滑動軸的樣式

預設又粗又黑,可能有些人不喜歡,可以透過以下方式設定,讓 Scroll bar 融合整體設計風格。

::-webkit-scrollbar {
  height: 1px;              /* 設定水平 scrollbar 高度 */
  width: 1px;               /* 設定水平 scrollbar 寬度 */
  border: 1px solid #fff;   /* 設定水平 scrollbar 框線樣式 */
}

::-webkit-scrollbar-thumb:horizontal{
        background: #fff; /* 設定水平 scrollbar 背景色 */
}

就這樣,大功告成!🎉 文章分享的 CSS 語法原則上適用任何網站開發,並沒有侷限於 WordPress Oxygen Builder。

關於 Horizontal Scrolling, 在 Oxygen Builder 也有更酷的應用喔。

check it out 👉 Creating A Horizontal Card-Style Post List In WordPress With Oxygen

請我喝杯咖啡吧 ^^

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

PeiYing Tsai
author
愛藝術,喜歡以科技解決問題的數位產品設計師。 堅持信念,任何困難事,必有搞定的一天,Just try it! 隨手紀錄日常學習到的知識心得,希望對妳/你有幫助。
coffee-cup linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram