@charset "utf-8"; /* * Ghvzon * 導覽/選單高亮組件 navlight-v3.5 ******************************************************************* * --2019.03.26--新增可調整置頂偏移高度(v3.5) * --2019.02.27--修正快速置頂時，高亮顯示錯誤(v3.4) * --2019.01.11--修正回推高度(v3.3) * --2019.01.02--新增高亮選單滑動的色塊(v3.3) * --2018.11.23--新增垂直樣式(v3.2) ******************************************************************* */ /* CSS功能設定 ******************************************************************* * 【切換垂直】 在
加上Class:NavArea_vertical * * 【切換功能】 在
修改data屬性 * 不要展開按鈕:[data-Btn="off"] * 要前置標:[data-toptext="on"] * 要高亮選單滑動的色塊:[data-slidebg="on"] * * 【一般】
  • 一般用
    • * * 【切換高亮樣式】 在
    修改data-light=""值 * 底線: line * 色塊: box * 圖標: icon * * 【高亮選單滑動的色塊】Nav-slidebg ******************************************************************* */ /*選單外掛*/ .NavArea_menu { z-index:5; position:relative; display: block; margin-bottom:0px; text-align:left; font: 16px/44px "Century Gothic","微軟正黑體","Microsoft JhengHei", Arial, Helvetica;} .NavArea_menu * , .NavArea_menu *:before , .NavArea_menu *:after { margin:0; padding:0; -webkit-box-sizing:border-box; box-sizing:border-box;} /*【程式切換】cate-open 展開後*/ .NavArea_menu.cate-open { z-index:1000 !important;} /*選單_黑底*/ .NavAre_menua .Nav_bg {} /*【程式切換】cate-open 展開後*/ .NavArea_menu.cate-open .Nav_bg {position: fixed; top:0; left:0; display:none; width:100%; height:100%; background-color:rgba(0,0,0,0.8);} .NavArea_menu.cate-open .Nav_bg { display: block;} /*選單_保留區*/ .NavArea_menu .Nav_target { display:none; height:44px;} /*【程式切換】cate-fixed置頂後*/ .NavArea_menu.cate-fixed .Nav_target { display:block;} /*選單_選單區*/ .NavArea_menu .Nav_box { position:relative; } /*【程式切換】cate-fixed置頂後*/ .NavArea_menu.cate-fixed .Nav_box { position: fixed; top:0; width:100%; -position: absolute; -top: expression(eval(document.documentElement.scrollTop)); } /*前置標*/ .NavArea_menu .Nav_toptext { display:none; z-index:10; position: absolute; top:0; width:90px; height:100%; text-align:center; color:#E40580; letter-spacing:-0.5px;} .NavArea_menu .Nav_toptext a { color: inherit; } .NavArea_menu .Nav_toptext:after { content: ""; position: absolute; top:11px; right:0px; display:block; width:1px; height:22px; background-color:#000;!important} /*【程式切換】cate-open 展開後*/ .NavArea_menu.cate-open .Nav_toptext { display:none !important;} /* * ------------------------------------------- *【切換樣版】要前置標:[data-toptext="on"] * ------------------------------------------- */ .NavArea_menu[data-toptext="on"] .Nav_toptext { display: block;} /* * ------------------------------------------- *【切換高亮樣式】[data-light="line"] 高亮: 底線 * ------------------------------------------- */ .NavArea_menu[data-light="line"] .Nav_toptext:after { display:none;} .NavArea_menu[data-light="line"] .Nav_toptext i { z-index:-1; position: absolute; bottom:0%; left:50%; width:100%; height:10%; -webkit-transform:translate(-50%,0%); transform:translate(-50%,0%); background-color: #E40580;} /* * ------------------------------------------- *【切換高亮樣式】[data-light="box"] 高亮: 色塊 * ------------------------------------------- */ .NavArea_menu[data-light="box"] .Nav_toptext:after { display:none; } .NavArea_menu[data-light="box"] .Nav_toptext { margin-left:5px; width:85px;} .NavArea_menu[data-light="box"] .Nav_toptext, .NavArea_menu[data-light="box"] .Nav_toptext a { color:#fff;} .NavArea_menu[data-light="box"] .Nav_toptext i { z-index:-1; position: absolute; top:50%; left:50%; border-radius:44px; width:100%; height:70%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); border: 1px solid #F2235E !important; background-color:#F2235E !important;} /* * ------------------------------------------- *【切換高亮樣式】[data-light="icon"] 高亮: 圖標 * ------------------------------------------- */ .NavArea_menu[data-light="icon"] .Nav_toptext:after { display:none; } .NavArea_menu[data-light="icon"] .Nav_toptext i { z-index:-1; position: absolute; top:50%; left:0; width:12px; height:12px; -webkit-transform:translate(0%,-50%); transform:translate(0%,-50%); background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9Im5hdmxpZ2h0X2ljb24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCINCgkgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNFNDAwODAiIGQ9Ik0xMCwwQzYuMDIxLDAsMi43OTcsMy4yMjUsMi43OTcsNy4yMDNDMi43OTcsMTIuOTA2LDEwLDIwLDEwLDIwczcuMjAzLTcuMDk0LDcuMjAzLTEyLjc5Nw0KCUMxNy4yMDMsMy4yMjUsMTMuOTc5LDAsMTAsMHogTTEwLDExLjAwNWMtMi4xLDAtMy44MDMtMS43MDMtMy44MDMtMy44MDJDNi4xOTcsNS4xMDMsNy45LDMuNCwxMCwzLjRjMi4xLDAsMy44MDIsMS43MDMsMy44MDIsMy44MDMNCglTMTIuMSwxMS4wMDUsMTAsMTEuMDA1eiIvPg0KPC9zdmc+DQo=') no-repeat center center; background-size:100%;} /*按鈕區*/ .NavArea_menu .Nav_Btn { z-index:1; position:relative;} .NavArea_menu .Nav_Btn b { display:none; padding:0 10px; opacity:0.75;} .NavArea_menu .Nav_Btn b:before { content:attr(data-opentext); color:#000; } .NavArea_menu .Nav_Btn i { position: absolute; top:0; right:0; display:block; width:44px; height:44px; cursor:pointer; /*box-shadow:-1px 0 3px rgba(150,150,150,0.1);*/ } .NavArea_menu .Nav_Btn i:before { content: ""; position:absolute; top:50%; left:50%; display:block; border:1px solid #000; border-width:0 1px 1px 0; width:20%; height:20%; -webkit-transform:translate(-50%,-50%) rotate(45deg); transform:translate(-50%,-70%) rotate(45deg); -webkit-transition: all 0.3s ease; transition: all 0.3s ease;} /*【程式切換】cate-open 展開後*/ .NavArea_menu.cate-open .Nav_Btn {} .NavArea_menu.cate-open .Nav_Btn b { display:block; height:44px;} .NavArea_menu.cate-open .Nav_Btn i {} .NavArea_menu.cate-open .Nav_Btn i:before { -webkit-transform:translate(-50%,-50%) rotate(225deg); transform:translate(-50%,-30%) rotate(225deg);} /* * ------------------------------------------- *【切換樣版】不要展開按鈕:[data-Btn="off"] * ------------------------------------------- */ .NavArea_menu[data-Btn="off"] .Nav_Btn { display:none;} /*選單*/ .NavArea_menu .Nav { position:relative; margin:0; padding:0; overflow-y: hidden; width: calc(100% - 44px); height:100%; white-space: nowrap; -webkit-transition:0s; -moz-transition:0s; -ms-transition:0s; -o-transition:0s; transition:0s; -webkit-overflow-scrolling: touch; -moz-overflow-scrolling: touch; -ms-overflow-scrolling: touch; -o-overflow-scrolling: touch; overflow-scrolling: touch;} /*【程式切換】cate-open 展開後*/ .NavArea_menu.cate-open .Nav { overflow-y:initial; margin:0 !important; width:100% !important; height: inherit;} /* * ------------------------------------------- *【切換樣版】不要展開按鈕:[data-Btn="off"] * ------------------------------------------- */ .NavArea_menu[data-Btn="off"] .Nav { width:100%;} /* * ------------------------------------------- *【切換樣版】要前置標:[data-toptext="on"] * ------------------------------------------- */ .NavArea_menu[data-toptext="on"] .Nav { margin-left:90px; width: calc(100% - 134px);} /* * ------------------------------------------- *【切換樣版】不要展開按鈕:[data-Btn="off"]要前置標:[data-toptext="on"] * ------------------------------------------- */ .NavArea_menu[data-Btn="off"][data-toptext="on"] .Nav { margin-left:90px; width: calc(100% - 90px);} /*選單內容*/ .NavArea_menu .Nav ul { position:relative; list-style:none outside none; white-space: nowrap;} .NavArea_menu .Nav li, .NavArea_menu .Nav span, .NavArea_menu .Nav b { z-index:10; position:relative; padding:0; overflow:hidden; width:auto; height:auto; font-weight:inherit; text-align:center;} .NavArea_menu .Nav b a:after { content: ""; position:relative; top:3px; left:5px; display:inline-block; border:1px solid #000; border-width:0 1px 1px 0; width:7.5px; height:7.5px; -webkit-transform:translate(-50%,-50%) rotate(-45deg); transform:translate(-50%,-70%) rotate(-45deg);} .NavArea_menu .Nav a { display:block; position:relative; padding:0 12px; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); transform:translate3d(0,0,0); color:#da8c76; text-decoration:none;} /*【程式切換】cate-hover高亮*/ .NavArea_menu .Nav .cate-hover {} /*【程式切換】cate-open 展開後*/ .NavArea_menu.cate-open .Nav ul { display:block; overflow:hidden; width:100%; padding:1%; white-space: inherit;} .NavArea_menu.cate-open .Nav li, .NavArea_menu.cate-open .Nav span { float:left; padding:0 1%; width:33.3% !important;} .NavArea_menu.cate-open .Nav b { float:left; width:100%; text-align:left;} .NavArea_menu.cate-open .Nav b a:after { display:none;} /* * ------------------------------------------- *【切換高亮樣式】[data-light="line"] 高亮: 底線 * ------------------------------------------- */ .NavArea_menu[data-light="line"] .Nav li a i, .NavArea_menu[data-light="line"] .Nav span a i { z-index:-1; position: absolute; bottom:-2%; left:50%; width:100%; height:10%; -webkit-transform:translate(-50%,0%); transform:translate(-50%,0%);} /*【程式切換】cate-hover高亮*/ .NavArea_menu[data-light="line"] .Nav .cate-hover a { color:#E40580;} .NavArea_menu[data-light="line"] .Nav .cate-hover i {background-color: #E40580;} /*【程式切換】cate-open 展開後*/ .NavArea_menu[data-light="line"].cate-open .Nav li a i, .NavArea_menu[data-light="line"].cate-open .Nav span a i { z-index:-1; position: absolute; top:50%; left:50%; border-radius:44px;width:90%; height:70%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); background-color:#F6F7F9 ;} /* * ------------------------------------------- *【切換高亮樣式】[data-light="box"] 高亮: 色塊 * ------------------------------------------- */ .NavArea_menu[data-light="box"] .Nav ul { padding-left:0px; } .NavArea_menu[data-light="box"] .Nav li a i, .NavArea_menu[data-light="box"] .Nav span a i { z-index:-1; position: absolute; top:50%; left:50%; border-radius:60px; background-image: repeating-linear-gradient(180deg , #a7080f -1%, #150001 180%);border:solid:1px #fff; width:94%; height:72%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);box-shadow: 0px 0px 2px #ffbe76;} /*【程式切換】cate-hover高亮*/ .NavArea_menu[data-light="box"] .Nav .cate-hover a { color:#8d4701;} .NavArea_menu[data-light="box"] .Nav .cate-hover i { display:block !important;background-image:repeating-linear-gradient(180deg , #ffd09a -1%,#9a5c15 180%); border: 1px solid #fff;} /*【程式切換】cate-open 展開後*/ .NavArea_menu[data-light="box"].cate-open .Nav ul { padding-left:0; } .NavArea_menu[data-light="box"].cate-open .Nav li a i { width:90%; background-color:#ffcc4f;} /* * ------------------------------------------- *【切換高亮樣式】[data-light="icon"] 高亮: 圖標 * ------------------------------------------- */ .NavArea_menu[data-light="icon"] .Nav ul { padding-left:10px; } /*【程式切換】cate-hover高亮*/ .NavArea_menu[data-light="icon"] .Nav .cate-hover a { color:#ffa48a;} .NavArea_menu[data-light="icon"] .Nav .cate-hover i { z-index:-1; position: absolute; top:50%; left:0; width:12px; height:12px; -webkit-transform:translate(0%,-50%); transform:translate(0%,-50%); background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9Im5hdmxpZ2h0X2ljb24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCINCgkgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNFNDAwODAiIGQ9Ik0xMCwwQzYuMDIxLDAsMi43OTcsMy4yMjUsMi43OTcsNy4yMDNDMi43OTcsMTIuOTA2LDEwLDIwLDEwLDIwczcuMjAzLTcuMDk0LDcuMjAzLTEyLjc5Nw0KCUMxNy4yMDMsMy4yMjUsMTMuOTc5LDAsMTAsMHogTTEwLDExLjAwNWMtMi4xLDAtMy44MDMtMS43MDMtMy44MDMtMy44MDJDNi4xOTcsNS4xMDMsNy45LDMuNCwxMCwzLjRjMi4xLDAsMy44MDIsMS43MDMsMy44MDIsMy44MDMNCglTMTIuMSwxMS4wMDUsMTAsMTEuMDA1eiIvPg0KPC9zdmc+DQo=') no-repeat center center; background-size:100%;color:#ffa48a;} /*【程式切換】cate-open 展開後*/ /*2019.01.02--新增高亮選單滑動的色塊*/ .NavArea_menu .Nav-slidebg { position:absolute; left:0; top:0; width:100%; height:0;} .NavArea_menu .Nav-slidebg.cate-ing { -webkit-transition:all 300ms ease; transition:all 300ms ease;} /*【程式切換】cate-open 展開後*/ .NavArea_menu.cate-open .Nav-slidebg { display:none;} /*2018.11.23新增垂直樣式*/ .NavArea_vertical { position:absolute; left:0; text-align:center; font-size:13px; line-height:16px;} /*選單_保留區*/ .NavArea_vertical .Nav_target {height:0;} /*選單_選單區*/ .NavArea_vertical .Nav_box { width:44px; height: calc(100vh - 50px); background-color: transparent; height: calc(100vh - 50px - constant(safe-area-inset-bottom) ); height: calc(100vh - 50px - env(safe-area-inset-bottom) ); } /*【程式切換】cate-fixed置頂後*/ .NavArea_vertical.cate-fixed .Nav_box { left:0; width:44px;} /*選單*/ .NavArea_vertical .Nav { z-index:2; overflow: inherit; overflow-x:hidden; width:100%; height:100%; white-space: inherit; color:#fff;} /*按鈕區*/ .NavArea_vertical .Nav_Btn { display:none; z-index:1; position:relative;} .NavArea_vertical .Nav_Btn b { display:none; padding:0 10px; opacity:0.75;} .NavArea_vertical .Nav_Btn b:before { content:attr(data-opentext); color:#fff; } .NavArea_vertical .Nav_Btn i { position: absolute; top:0; right:0; display:block; width:44px; height:44px; cursor:pointer; /*box-shadow:-1px 0 3px rgba(150,150,150,0.1);*/ } .NavArea_vertical .Nav_Btn i:before { content: ""; position:absolute; top:50%; left:50%; display:block; border:1px solid #fff; border-width:0 1px 1px 0; width:20%; height:20%; -webkit-transform:translate(-50%,-50%) rotate(45deg); transform:translate(-50%,-70%) rotate(45deg); -webkit-transition: all 0.3s ease; transition: all 0.3s ease;} /*選單內容*/ .NavArea_vertical .Nav ul { padding-left:0 !important; white-space: inherit;} .NavArea_vertical .Nav li, .NavArea_vertical .Nav span, .NavArea_vertical .Nav b { display:block;; height: auto;} .NavArea_vertical .Nav a { padding:15px 8px;} /*2019.01.02--新增高亮選單滑動的色塊*/ .NavArea_vertical .Nav-slidebg { border-left: 2px solid #fff; background-color:#660e1d;} /*只顯示在手機版 @media screen and (min-width:768px){ .NavArea { display:none; width:960px;} }*/