風格 主頁面 內容 備註說明 問題 回覆

style01

便利繳款 門市繳款

◎ HTML部分 (除了項目改成兩個之外 在class menu之後各加一個css)
<div class="menu twochoice" data-mfx-top-position="64">
<ul>
<li id="menu01"><a href="#帳務資訊">帳務資訊</a></li>
<li class="active" id="menu03"><a href="#便利繳款">便利繳款</a></li>
</ul>
</div>
<div class="menu2 mtwochoice" data-mfx-top-position="59">
<div id="dd" class="wrapper-dropdown-2 menu03" tabindex="1" onclick="return true">便利繳款
<ul class="dropdown">
<li class="menu01"><a href="#帳務資訊">帳務資訊</a></li>
</ul>
</div>
</div>

◎ CSS部分 在css/style01.css 加上

/* menu 只有兩個選擇 */
.menu.twochoice ul{
max-width: 1006px;
margin-right: auto;
margin-left: auto;
display: inline-block;
width:100%;
}
.menu.twochoice ul li {
width: 50%;
}
.menu.twochoice ul li a {
padding-right: 0px;
padding-left: 0px;
width: 100%;
}
.menu.twochoice ul li::after {
display: none;
}
@media only screen and (max-width: 48em){
.menu.twochoice {
display: block;
top: 59px;
height: 44px;
}
.menu.twochoice ul li a{ padding: 14px 0px; font-size:16px;}
}
.menu2.mtwochoice{ display:none;}

   
風格 主頁面 內容 備註說明 問題 回覆

style02

便利繳款 門市繳款

◎ HTML部分 (除了項目改成兩個之外 在class menu之後各加一個css)
<div class="menu twochoice" data-mfx-top-position="64">
<ul>
<li id="menu01"><a href="#帳務資訊">帳務資訊</a></li>
<li class="active" id="menu03"><a href="#便利繳款">便利繳款</a></li>
</ul>
</div>
<div class="menu2 mtwochoice" data-mfx-top-position="59">
<div id="dd" class="wrapper-dropdown-2 menu03" tabindex="1" onclick="return true">便利繳款
<ul class="dropdown">
<li class="menu01"><a href="#帳務資訊">帳務資訊</a></li>
</ul>
</div>
</div>

◎ CSS部分 在css/style02.css 加上

/* menu 只有兩個選擇 */
.menu.twochoice ul{
max-width: 1006px;
margin-right: auto;
margin-left: auto;
display: inline-block;
width:100%;
}
.menu.twochoice ul li {
width: 50%;
}
.menu.twochoice ul li a {
padding-right: 0px;
padding-left: 0px;
width: 100%;
}
.menu.twochoice ul li::after {
display: none;
}
@media only screen and (max-width: 48em){
.menu.twochoice {
display: block;
top: 59px;
height: 44px;
}
.menu.twochoice ul li a{ padding: 14px 0px; font-size:16px;}
}
.menu2.mtwochoice{ display:none;}

   
風格 主頁面 內容 備註說明 問題 回覆

style03

便利繳款 門市繳款

◎ HTML部分 (除了項目改成兩個之外 在class menu之後各加一個css)
<div class="menu twochoice" data-mfx-top-position="64">
<ul>
<li id="menu01"><a href="#帳務資訊">帳務資訊</a></li>
<li class="active" id="menu03"><a href="#便利繳款">便利繳款</a></li>
</ul>
</div>
<div class="menu2 mtwochoice" data-mfx-top-position="59">
<div id="dd" class="wrapper-dropdown-2 menu03" tabindex="1" onclick="return true">便利繳款
<ul class="dropdown">
<li class="menu01"><a href="#帳務資訊">帳務資訊</a></li>
</ul>
</div>
</div>

◎ CSS部分 在css/style03.css 加上

/* menu 只有兩個選擇 */
.menu.twochoice ul{
max-width: 1006px;
margin-right: auto;
margin-left: auto;
display: inline-block;
width:100%;
}
.menu.twochoice ul li {
width: 50%;
}
.menu.twochoice ul li a {
padding-right: 0px;
padding-left: 0px;
width: 100%;
}
.menu.twochoice ul li::after {
display: none;
}
@media only screen and (max-width: 48em){
.menu.twochoice {
display: block;
top: 59px;
height: 44px;
}
.menu.twochoice ul li a{ padding: 14px 0px; font-size:16px;}
}
.menu2.mtwochoice{ display:none;}