CH4-2(模組化)手機版隱藏的左側三層選單
HTML(左側模組，可展開至第三層，透過JS將頁面內容append到右側)
<section class="container-fluid order_bg_sale"></section>
<section class="container-fluid page">
<div class="container">
<div class="row product_info">
<!--左側最外層-->
<ul class="menu">
<!--新品上市-->
<li><a data-toggle="collapse" href="#collapse1">新品上市</a>
<ul id="collapse1" class="panel-collapse collapse sub-menu">
<li><a href="">燒烤熟品/烤肉片</a></li>
<li><a href="">豬-排骨/湯骨</a></li>
<li><a href="">豬腳/滷肉飯專用</a></li>
<li><a href="">醬菜.小菜</a></li>
<li><a href="">NEW火鍋.丸子.炒物</a></li>
<li><a href="">高湯.高湯粉</a></li>
<li><a href="">新香主菜</a></li>
<li><a href="">新進鮮雞</a></li>
</ul>
</li>
<!--包山寶海-->
<li><a data-toggle="collapse" href="#collapse2">包山包海</a>
<ul id="collapse2" class="panel-collapse collapse sub-menu">
<!--小包裝-->
<li><a data-toggle="collapse" href="#collapse2_1">小包裝</a>
<ul class="third-menu panel-collapse collapse" id="collapse2_1">
<!--雞肉調理-->
<li><a data-toggle="collapse" href="#collapse2_1_1">雞肉調理(小)</a>
<ul class="fouth-menu panel-collapse collapse" id="collapse2_1_1">
<li><a href="">雞肉熟品</a></li>
<li><a href="">調味雞肉</a></li>
</ul>
</li>
<!--豬肉調理-->
<li><a href="">豬肉調理(小)</a></li>
<!--海鮮調理-->
<li><a data-toggle="collapse" href="#collapse2_1_2">海鮮調理(小)</a>
<ul class="fouth-menu panel-collapse collapse" id="collapse2_1_2">
<li><a href="">海鮮熟品</a></li>
<li><a href="">調味海鮮</a></li>
</ul>
</li>
<!--滷味小菜-->
<li><a href="">滷味小菜(小)</a></li>
<!--薯類製品-->
<li><a href="">薯類製品(小)</a></li>
<!--生鮮肉品-->
<li><a data-toggle="collapse" href="#collapse2_1_3">生鮮肉品(小)</a>
<ul class="fouth-menu panel-collapse collapse" id="collapse2_1_3">
<li><a href="">海鮮(小)</a></li>
<li><a href="">牛羊豬雞(小)</a></li>
</ul>
</li>
</ul>
</li>
<!--調理業務包裝-->
<li><a data-toggle="collapse" href="#collapse2_2">調理業務包裝</a>
<ul class="third-menu panel-collapse collapse" id="collapse2_2">
<li><a href="">調理雞肉(業)</a></li>
<li><a href="">調理豬肉(業)</a></li>
<li><a href="">調理海鮮(業)</a></li>
<li><a href="">油炸小品(業)</a></li>
</ul>
</li>
<!--生鮮食品-->
<li><a data-toggle="collapse" href="#collapse2_3">生鮮食品</a>
<ul class="third-menu panel-collapse collapse" id="collapse2_3">
<li><a href="">雞肉(生)</a></li>
<li><a href="">豬肉(生)</a></li>
<li><a data-toggle="collapse" href="#collapse2_3_1">海鮮(生)</a>
<ul class="fouth-menu panel-collapse collapse" id="collapse2_3_1">
<li><a href="">鮮魚</a></li>
<li><a href="">蝦貝軟體</a></li>
</ul>
</li>
<li><a href="">牛羊肉(生)</a></li>
</ul>
</li>
</ul>
</li>
<!--阿虎小廚房-->
<li><a data-toggle="collapse" href="#collapse3">阿虎小廚房</a>
<ul id="collapse2" class="panel-collapse collapse sub-menu">
<li><a href="">義大利調理包</a></li>
<li><a href="">中式調理包</a></li>
</ul>
</li>
<!--麥點麵坊-->
<li><a data-toggle="collapse" href="#collapse4">麥點麵坊</a>
<ul id="collapse4" class="panel-collapse collapse sub-menu">
<li><a href="">麵食小舖</a></li>
<li><a href="">港式點心</a></li>
</ul>
</li>
<!--丸子火鍋料-->
<li><a data-toggle="collapse" href="#collapse5">丸子火鍋料</a>
<ul id="collapse5" class="panel-collapse collapse sub-menu">
<li><a href="">鍋之湯物</a></li>
<li><a href="">小包裝-火鍋湯丸</a></li>
<li><a href="">業務包裝-火鍋湯丸</a></li>
<li><a href="">魚漿製品(業務)</a></li>
</ul>
</li>
<!--冷凍蔬菜-->
<li><a href="">冷凍蔬菜</a></li>
<!--醬菜-->
<li><a data-toggle="collapse" href="#collapse6">醬菜</a>
<ul id="collapse6" class="panel-collapse collapse sub-menu">
<li><a href="">小包裝(醬)</a></li>
<li><a href="">業務包裝(醬)</a></li>
</ul>
</li>
<!--素食蒟蒻-->
<li><a data-toggle="collapse" href="#collapse7">素食蒟蒻</a>
<ul id="collapse7" class="panel-collapse collapse sub-menu">
<li><a href="">蒟蒻</a></li>
<li><a href="">調味素食</a></li>
<li><a href="">其他素食</a></li>
</ul>
</li>
<!--休閒食品-->
<li><a href="">休閒食品</a></li>
<!--糕餅麵包-->
<li><a data-toggle="collapse" href="#collapse8">糕餅麵包</a>
<ul id="collapse8" class="panel-collapse collapse sub-menu">
<li><a href="">麵包蛋糕</a></li>
</ul>
</li>
<!--包便宜-->
<li><a href="">包便宜</a></li>
</div>
</ul>
<article class="col-sm-9 col-xs-12 append_right">
</article>
</div>
</div>
</section>
<!--手機版本的Click按鈕-->
<button class="mobile_list_button">
<p>
選<br>單<br>列<br>表
</p>
</button>
CSS
/*最外層往畫面左邊滑入，透過click拉出來*/
.left-menu{
position: fixed;
top: 0;
z-index:99;
background: #fff;
left: -100vw;
height: 100%;
width: 100%;
overflow: scroll;
z-index: 9999;
transition: .5s;
opacity: 0;
}
/*透過click加入class name來改變left方向*/
.left_menu_slide{
left: 0;
opacity: 1;
transition: .5s
}
/*內容預留放左邊80%，預留20%右邊的空間放close按鈕*/
.panel-group{
width: 80%;
overflow-y:scroll;
margin-bottom: 0;
height: 100vh;
}
/*左側選單的close按鈕*/
.mobile_list_button{
display: block;
position: absolute;
z-index: 9;
top: 3px;
left: 1px;
background: #ccccff;
border: 2px dashed #fff;
color: #fff;
padding: 7.5px;
box-shadow: 0px 0px 0px 3px #ccccff;
border-radius: 0px 10px 10px 0
}
/*展開選單用的按鈕*/
button.close{
position: absolute;
top: 7.5px;
right: 7.5px;
padding: 5px;
border: 2px dotted #fff;
background: rgba(255, 153, 204,1);
border-radius: 35px;
box-shadow: 0px 0px 0px 2px rgba(255, 153, 204,1);
display: block;
}
JS(透過click去toggleClass)
//animate感覺的fixed，此功能僅限於手機觸發
var windowWidth = $(window).width();
if(windowWidth < 767){
var $win = $(window),
$ad = $('.mobile_list_button').css('opacity', 0).show(), // 讓廣告區塊變透明且顯示出來
_width = $ad.width(),
_height = $ad.height(),
_diffY = 120, _diffX = 0, // 距離右及上方邊距
_moveSpeed = 800; // 移動的速度
// 先把 #abgne_float_ad 移動到定點
$ad.css({
top: _diffY, // 往上
right: $win.width() - _width - _diffX - 100,
opacity: 1
});
// 幫網頁加上 scroll 及 resize 事件
$win.bind('scroll resize', function(){
var $this = $(this);
// 控制 #abgne_float_ad 的移動
$ad.stop().animate({
top: $this.scrollTop() + _diffY, // 往上
right: $this.scrollLeft() + $this.width() - _width - _diffX - 100
}, _moveSpeed);
}).scroll(); // 觸發一次 scroll()
//click展開選單動作
$('.mobile_list_button').click(function(){
$('.left-menu').toggleClass('left_menu_slide');
$('.mobile_list_button').hide();
})
$('button.close').click(function(){
$('.left-menu').toggleClass('left_menu_slide');
$('.mobile_list_button').show(300)
})
/*三層選單*/
/*第一層動作*/
$('.menu > li > a').click(function(){
/*第二層ul*/
var subMenu = $('.sub-menu').each(function(){
$(this).attr('id')
});
var thirdMenu = $('.third-menu').each(function(){
$(this).attr('id')
});
var fouthMenu = $('.fouth-menu').each(function(){
$(this).attr('id')
});
/*第一層click的連結*/
var clickHref = $(this).attr('href');
if (subMenu !== clickHref){
$(subMenu).removeClass('in');
$(thirdMenu).removeClass('in');
$(fouthMenu).removeClass('in');
}
});
/*第二層動作*/
$('.menu li > ul.sub-menu > li >a').click(function(){
/*第三層ul*/
var thirdMenu = $('.third-menu').each(function(){
$(this).attr('id')
});
var fouthMenu = $('.fouth-menu').each(function(){
$(this).attr('id')
});
var clickHrefthird = $(this).attr('href');
/*第二層click的連結*/
var clickHref = $(this).attr('href');
if (thirdMenu !== clickHref){
$(thirdMenu).removeClass('in');
$(fouthMenu).removeClass('in');
}
});
/*第三層動作*/
$('.menu li > ul.sub-menu > li > ul.third-menu > li > a').click(function(){
/*第四層ul*/
var fouthMenu = $('.fouth-menu').each(function(){
$(this).attr('id')
});
var clickHrefthird = $(this).attr('href');
/*第三層click的連結*/
var clickHref = $(this).attr('href');
if (fouthMenu !== clickHref){
$(fouthMenu).removeClass('in');
}
console.log(clickHrefthird);
});
};