Cum sociis｜Natoque pena

Lorem ipsu dolor
sit amet

Lorem ipsu
dolor sit amet

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Lorem ipsum dolor sit amet adipiscing elit. Aenean commodo ligula eget dolor.

Learn More Learn More

Button

按鈕設定

請在按鈕或 a 標籤連結文字的外層容器，
放置想添加的樣式 Class 名稱
(詳細也可以參考 code block 裡的語法註解說明)

樣式「btn-boxshadow-1」
針對使用 Button Row 元件的按鈕，設定外圍有色塊陰影(box-shadow)。

立即了解

樣式「link-border-style-1」
針對帶有 a 標籤的連結，製作 hover 時底部會有線段滑過。

Sustainability

Burger menu icon

漢堡選單圖示

想更改漢堡選單圖示樣式時，
請放入指定樣式裡的 code 到全站裡設置。

code 目前放在這區下方的 code block 裡用 div 包起來並設置隱藏，
可以從裡面複製（放置到全站時，請小心不要複製到前後包裹的 div 標籤）。

/* 漢堡選單 icon - 樣式 1 ：原本三條線的圖示變成兩條線，且前方有 Menu 字樣，選單按鈕本身是有背景色，呈圓角 */ /* 用偽元素在兩條線的 icon 前方加上 Menu 字樣 */ .av-hamburger::before { content: "Menu"; color: #ffffff; position: relative; font-size: 22px; font-weight: bold; top: -3.5px; margin-right: 10px; } /* 隱藏原本三條線裡的其中一條 */ .av-hamburger-inner::before { display: none !important; } /* 調整讓兩條線沒有圓角，高度細微增高 */ .av-hamburger-inner, .av-hamburger-inner::after { border-radius: 0 !important; height: .2rem !important; } /* 調整兩條線 icon 的位置 */ .av-hamburger-inner { top: -8px !important; } /* 為選單按鈕加上背景色與圓角 */ #header .av-main-nav > li.av-burger-menu-main > a { display: inline !important; background: #9C98C0 !important; /* 根據需要設置背景顏色 */ padding: 25px 25px 17px 25px !important; border-radius: 50px !important; } /* 調整漢堡選單打開後的叉叉位置 */ .av-hamburger.is-active .av-hamburger-box { top: 6px !important; } /* 以下分別設置兩條線 hover 時，不同速度的動畫效果 */ #header .av-main-nav > li.av-burger-menu-main > a .av-hamburger-inner, #header .av-main-nav > li.av-burger-menu-main > a .av-hamburger-inner::after { width: 100%; } #header .av-main-nav > li.av-burger-menu-main > a:hover .av-hamburger-inner { animation: shorten-then-grow-middle 0.8s forwards; } @keyframes shorten-then-grow-middle { 0% { width: 100%; } 30% { width: 0%; } 100% { width: 100%; } } #header .av-main-nav > li.av-burger-menu-main > a:hover .av-hamburger-inner::after { animation: shorten-then-grow-top 0.8s forwards !important; } @keyframes shorten-then-grow-top { 0% { width: 100%; } 50% { width: 0%; } 100% { width: 100%; } } /* ------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 漢堡選單 icon - 樣式 2 ：純兩條線的 icon 形式 */ /* 隱藏原本三條線裡的其中一條 */ .av-hamburger-inner::before { display: none !important; } /* 調整讓兩條線沒有圓角，高度細微增高 */ .av-hamburger-inner, .av-hamburger-inner::after { border-radius: 0 !important; height: .2rem !important; } /* 調整兩條線 icon 的位置 */ .av-hamburger-inner { top: 0px !important; }

漢堡選單 icon – 樣式 1
– 目前已將此樣式放至 Enfold 裡作套用，可縮小網頁寬度查看此樣式效果 –
原本三條線的圖示變成兩條線，且前方有 Menu 字樣，
選單按鈕本身是有背景色，呈圓角。（可參考下方圖片）

漢堡選單 icon – 樣式 2
純兩條線的 icon 形式。（可參考下方圖片）

Header menu

menu 型態（hover 時）

想更改 header 選單 hover 的樣式時，
請放入指定樣式裡的 code 到全站裡設置，
並且將原本模板裡「選單 hover 效果_線段漸變特效」這段語法註解掉或拔除。

code 目前放在這區下方的 code block 裡用 div 包起來並設置隱藏，
可以從裡面複製（放置到全站時，請小心不要複製到前後包裹的 div 標籤）。

/* menu 型態 hover 時 - 樣式 1 ：選單名稱底下的線段，hover 時會從中間往左右展開 */ /* 先將原有的底線隱藏 */ .header_color .avia-menu-fx { display: none; } .main_menu > .avia-menu > .av-main-nav > .menu-item > a > .avia-menu-text { position: relative; } /* 在選單的文字下方增加偽元素線段，初始還沒有展開 */ .main_menu > .avia-menu > .av-main-nav > .menu-item > a > .avia-menu-text::after { content: ''; position: absolute; bottom: 0; left: 0; top: 28px; width: 100%; height: 1px; background-color: #ffffff; transform: scaleX(0); transform-origin: center; transition: transform 0.4s ease; } /* 選單 hover 後，文字下方線段會由中間往左右展開 */ .main_menu > .avia-menu > .av-main-nav > .menu-item:hover > a > .avia-menu-text::after { transform: scaleX(1); } /* ------------------------------------------------------------------------------------------------------------------------------------------------ */ /* menu 型態 hover 時 - 樣式 2 ： hover 後，選單文字會有往上翻轉的效果。需在後台選單設定時，利用

兩個標籤分別包住一樣的選單名稱，比如：

關於我們

*/ /* 先將原有的底線隱藏 */ .header_color .avia-menu-fx { display: none; } /* 設定 dd 標籤內選單文字（第一個）的初始狀態 */ .main_menu > .avia-menu > .av-main-nav > .menu-item > a > .avia-menu-text > dd { height: 30px; transform: translateY(0); /* 初始位置 */ transition: transform 0.4s ease, opacity 0.2s ease; opacity: 1; } /* hover 後，dd 標籤內選單文字會往上移動並且消失 */ .main_menu > .avia-menu > .av-main-nav > .menu-item:hover > a > .avia-menu-text > dd { transform: translateY(-100%); opacity: 0; } /* 設定 dt 標籤內選單文字（第二個）的初始狀態 */ .main_menu > .avia-menu > .av-main-nav > .menu-item > a > .avia-menu-text > dt { height: 30px; transform: translateY(0); /* 初始位置 */ opacity: 0; transition: transform 0.4s ease, opacity 0.2s ease; } /* hover 後，dt 標籤內選單文字會往上移動並且出現 */ .main_menu > .avia-menu > .av-main-nav > .menu-item:hover > a > .avia-menu-text > dt { opacity: 1; transform: translateY(-100%); }

menu 型態 hover 時 – 樣式 1 ：
– 目前已將此樣式放至 Enfold 裡作套用，可移動到選單上查看效果 –
選單名稱底下的線段，hover 時會從中間往左右展開（下方為靜態圖片，較難看出實際效果）

/* menu 型態 hover 時 – 樣式 2 ：
hover 後，選單文字會有往上翻轉的效果。
需在後台選單設定時，利用 dd 、 dt 兩個標籤分別包住一樣的選單名稱（此動態效果難以用靜態圖片表示，請實際套用語法查看）
以下附圖為後台選單那邊需要做的設定（重要）。

Lorem ipsum

Lorem ipsum jviewhf dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

Learn More

Aenean commodo ligula

Lorem ipsum jviewhf dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

Learn More

Aenean commodo ligula

Lorem ipsum jviewhf dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

Learn More Learn More

Products

重點產品展示及說明

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

01

範例產品名稱

產品附註

Lorem ipsum jviewhf dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa.

02

範例產品名稱

產品附註

Lorem ipsum jviewhf dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa.

03

範例產品名稱

產品附註

Lorem ipsum jviewhf dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa.

04

範例產品名稱

產品附註

Lorem ipsum jviewhf dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa.

Comments