https://www.accea.sg/js/megamenu_script.js?150

1
2
3$(function(){
4
5    var sl_flg = false; // 一覧ボタンへオーバーしたフラグ
6    var childOn_flg = false; //nav-childに載っているか
7    var si_flg = false; //横並びのメニュー項目にオーバーしたか？
8
9    // 横に並んだ親メニュー項目へマウスオーバーした際の処理
10    $('.nav-parent-item').on({
11        'mouseenter': navMenuListItem_mouseEnter_Wrapper,
12        'mouseleave': navMenuListItem_mouseLeave_Wrapper
13    });
14
15    // 親メニューへマウスオーバーしたときの処理
16    function navMenuListItem_mouseEnter_Wrapper(row) {
17        // console.log('navMenuListItem_mouseEnter_Wrapper');
18        // レスポンシブ状態かチェック
19        if( resChk() === false) {
20            //通常PC
21            navMenuListItem_mouseEnter(row);
22        }
23    }
24    // 親メニューからマウスアウトしたときの処理
25    function navMenuListItem_mouseLeave_Wrapper(row) {
26        // console.log('navMenuListItem_mouseLeave_Wrapper');
27        // レスポンシブ状態かチェック
28        if( resChk() === false) {
29            //通常PC
30            navMenuListItem_mouseLeave(row);
31        }
32    }
33
34    // 親メニューへのクリックイベントの処理
35    $('.nav-parent-item > .navLink').on('click', function(e){
36        // クリックされた nav-parent-item クラスのオブジェクトを変数に格納
37        var $row = $(e.target).parent('.nav-parent-item');
38        // クリックされた 要素の子要素の オブジェクトを変数に格納
39        var $submenu = $row.children('.nav-child');
40
41        // enableLinkクラスを持つ、nav-parent-item要素だったら子メニューの展開はない
42        if($row.hasClass('enableLink')) {
43            return;
44        } else {
45            // 子要素が表示中かで処理を分ける
46            if ($submenu.is(':hidden')) {
47                // 子要素が非表示のときは
48                // マウスオーバーの処理をして表示させる
49                navMenuListItem_mouseEnter(e);
50            } else {
51                // 子要素が表示中のときは
52                // マウスアウトの処理をして消す
53                navMenuListItem_mouseLeave(e);
54            }
55            return false;
56
57        }
58    });
59
60
61
62
63
64    // 横に並んだメニュー項目へマウスオーバーした際の処理
65    // または、子要素が非表示で親要素がクリックされた時の処理
66    function navMenuListItem_mouseEnter(e) {
67        // console.log('navMenuListItem_mouseEnter');
68
69        var animeVar = 0;
70
71        // クリックされた nav-parent-item クラスのオブジェクトを変数に格納
72        var $row = $(e.target).parent('.nav-parent-item');
73
74        var $submenu = $row.children('.nav-child'); // 当該の子メニューのオブジェクト
75
76        var navleft = $(e.target).parents(".nav").offset().left; //ナビゲーションの左端からの位置を取得
77
78        $('.nav-parent-item').removeClass("active-menu"); //どのメニューがアクティブかをリセット
79        $row.addClass("active-menu"); //オーバーしたメニューがアクティブであるクラスを追加
80
81        si_flg = true; //横並びメニューへマウスオーバーしているフラグをtrue
82
83        var height = $row.outerHeight(); // オーバーしたメニュー項目の高さ
84        var lefts = $row.offset().left; // オーバーしたメニュー項目の左からの位置
85        var wid = 'auto';
86
87        $submenu.removeAttr('style');
88        var navChildW = $submenu.outerWidth();
89
90        var contentsWid = $('#nav-menu-list').width();
91
92        // 他のnav-childを非表示に
93        if ($submenu.is(':hidden')) {
94            $('.nav-parent-item > .nav-child').hide();
95        }
96
97        // 横並びメニュー項目の左あわせの位置に子メニューを表示するが
98        // それだとドキュメントの右端からはみ出す場合は
99        // ドキュメントの右端合わせの位置になるように
100        // 変数leftsを変更
101        if ( ( (lefts - navleft) + navChildW ) > contentsWid) {
102            lefts = (contentsWid) - navChildW;
103            lefts = (contentsWid - 1) - navChildW + 8;
104
105        } else {
106
107            lefts = lefts - navleft;
108            // wid = 980 - lefts - ( $submenu.outerWidth() - $submenu.width() );
109        }
110
111        // 商品価格表以外の子要素に設定する幅を算出
112        wid = $row.width() - ($row.outerWidth() - $row.width());
113
114        // 当該子メニューの表示
115        if( resChk() === false) {
116            //通常PC
117            if($row.find('.nav-parent2').length > 0) {
118                // 商品価格表の子メニューを表示するときの処理
119                $submenu.removeAttr('style').css({
120                    top: height,
121                    left: lefts,
122                    height: 'auto',
123                    width: contentsWid,
124                    borderTop: 'none',
125                    display: 'flex'
126                });
127
128            } else {
129                // 価格表以外の子メニューを表示するときの処理
130                $submenu.removeAttr('style').css({
131                    top: height,
132                    left: lefts,
133                    height: 'auto',
134                    width: 'auto',
135                    minWidth: wid,
136                    borderTop: 'none'
137                }).stop().slideDown({
138                    duration: 100,
139                    easing: 'swing',
140                    start: function(e){

141                        animeVar = parseFloat($(this).height());
142                    },
143                    step: function(e) {
144                        var ooo = (parseFloat($(this).height())/animeVar);
145                        $(this).css({
146                            opacity: ooo
147                        });
148                    },
149                    done: function(e) {
150                        $(this).css({
151                            opacity: 1
152                        });
153                    }
154                });
155
156            }
157
158        } else {
159            // スマホ
160            
161
162            var left_prm = 0;
163            var width_prm = '100%';
164            console.log($('.container-fluid').outerWidth());
165            if ($('.container-fluid').outerWidth() > 767 && $row.find('.nav-parent2').length == 0) {
166                left_prm = 'auto';
167                width_prm = 'auto';
168            }
169
170            $submenu.removeAttr('style').css({
171                top: height,
172                left: left_prm,
173                height: 'auto',
174                width: width_prm,
175                borderTop: 'none',
176                display: 'flex'
177            });
178        }
179    }
180
181    // 横に並んだメニュー項目からマウスアウトした際の処理
182    function navMenuListItem_mouseLeave(e) {
183
184        // console.log('navMenuListItem_mouseLeave');
185
186        si_flg = false; //横並びのオーバーしているフラグをオフ
187        sl_flg = false;
188
189        $('.nav-parent2-item.active').removeClass('active');
190
191        // 操作したスタイルをリセット
192        $(".nav-child").removeAttr('style');
193        $(".nav-parent2-list").removeAttr('style');
194
195        // 子メニューから、横並びにマウスが移動したときに途切れるので一瞬判定を遅らせる
196        setTimeout(function(){
197            // 横メニューにも子メニューにものってなければ子ニューを非表示にして
198
199            if(!sl_flg && !childOn_flg && !si_flg) {
200                $('.nav-parent-item > .nav-child').stop().fadeOut('fast'); // 横並び直下のnav-childを非表示にする
201                $('.nav-parent-item').removeClass("active-menu");
202            }
203
204        }, 50);
205    }
206
207    $('.nav-parent2-item > .navLink').on('click', function(e) {
208        var $row = $(e.target).parent('.nav-parent2-item'); //オーバーした項目のオブジェクト
209            // submenuId = $row.data("submenuId"), // 項目に対応した子メニューの特定の為、カスタム属性を取得
210            // $submenu = $("#" + submenuId); // 対応した子メニューのオブジェクト
211        var $submenu = $row.children('.nav-child');
212        // console.log('nav-parent2-item');
213        if($submenu.is(':hidden')) {
214            enterSubmenu($row);
215            return false;
216        } else {
217            return deactivateSubmenu($row);
218        }
219    });
220
221    //一覧メニューの項目へオーバーしたときの処理
222    function enterSubmenu(row) {
223        // console.log('enterSubmenu');
224        sl_flg = true; // 一覧ボタンへオーバーしたフラグをtrue
225        var $row = $(row); //オーバーした項目のオブジェクト
226        var $submenu = $row.children('.nav-child');
227        var $parent = $row.parents('.nav-parent2');
228        $submenu.removeAttr('style');
229        $('.nav-parent2-item.active').removeClass('active');
230        var navtop = $row.parents(".nav").offset().top;
231        var servslisttop = $row.parents('.nav-parent-item').offset().top;
232
233
234        // 子メニューを表示
235
236        if( resChk() === false) {
237            //通常PC
238
239        } else {
240            // スマホ
241
242            // 他の展開されているメニューを閉じる
243            $parent.find('.nav-child').slideUp(0);
244
245
246            // 当該のメニューを開く
247            $submenu.slideDown('fast', function(e){
248                $(this).removeAttr('style').css({
249                    top: servslisttop - navtop-1,
250                    left: 0,
251                    width: '100%',
252                    borderLeft: 'none',
253                    display: 'block'
254                });
255
256            });
257            
258            $row.addClass('active');
259        }
260    }
261
262    // 項目からオーバーが外れたときの処理
263    function deactivateSubmenu(row) {
264
265        var $row = $(row);
266        var $submenu = $row.children('.nav-child');
267        var $parent = $row.parents('.nav-parent2');
268
269        if( resChk() === false) {
270            //通常PC
271            // $submenu.css("display", "none");
272            return true;
273        } else {
274            // スマホ
275            $submenu.slideUp('fast');
276            $('.nav-parent2-item.active').removeClass('active');
277            return false;
278        }
279    }
280
281
282    $(document).click(function() {
283        $(".popover").css("display", "none");
284    });

285
286
287    // 左サイド開閉
288    $('#navHmbCtrlP').on('click', function(e) {
289
290        if ($('.sideArea').hasClass('sideArea--active') ) {
291            // クラスがあれば（表示されていれば）消す
292            
293            $('.sideArea').animate({
294                left : '-230px'
295            }, 300, function(e) {
296                    $(this).removeClass('sideArea--active').removeAttr('style');
297                    $('body').removeClass('body--scrollhidden');
298            });
299
300            // 透明な黒バックを消す
301            $('.menuCanselBlack').remove();
302
303        } else {
304            // クラスがなければ（表示がなければ）表示する
305            $('.sideArea').animate({
306                left: '0'
307            }, 300, function (e) {
308                    $(this).addClass('sideArea--active').removeAttr('style');
309                    $('body').addClass('body--scrollhidden');
310            });
311
312            // 透明な黒バックを追加
313            var $blackBg = $('<div/>');
314            $blackBg.addClass('menuCanselBlack smm--menuCanselBlack　smm--menuCanselBlack--pc');
315
316            $blackBg.on('click', function (e) {
317                $(this).remove();
318                // 黒背景をクリックしたときに開閉ボタンを押したことにする処理
319                $('#navHmbCtrlP').trigger('click');
320            });
321            $blackBg.appendTo($('body'));
322        }      
323
324    });
325    $('#sideArea__close').on('click', function (e) {
326        $('#navHmbCtrlP').trigger('click');
327    });
328    // 左サイド開閉 ここまで
329
330    // 右サイド開閉
331    $('#navHmbCtrlR').on('click', function(e) {
332
333        if ($('.headerMenuArea').hasClass('headerMenuArea--active') ) {
334            // クラスがあれば（表示されていれば）消す
335            
336            $('.headerMenuArea').animate({
337                right : '-130px'
338            }, 300, function(e) {
339                    $(this).removeClass('headerMenuArea--active').removeAttr('style');
340                    $('body').removeClass('body--scrollhidden');
341            });
342
343            // 透明な黒バックを消す
344            $('.menuCanselBlack').remove();
345
346        } else {
347            // クラスがなければ（表示がなければ）表示する
348            $('.headerMenuArea').animate({
349                right: '0'
350            }, 300, function (e) {
351                    $(this).addClass('headerMenuArea--active').removeAttr('style');
352                    $('body').addClass('body--scrollhidden');
353            });
354
355            // 透明な黒バックを追加
356            var $blackBg = $('<div/>');
357            $blackBg.addClass('menuCanselBlack smm--menuCanselBlack　smm--menuCanselBlack--pc');
358
359            $blackBg.on('click', function (e) {
360                $(this).remove();
361                // 黒背景をクリックしたときに開閉ボタンを押したことにする処理
362                $('#navHmbCtrlR').trigger('click');
363            });
364            $blackBg.appendTo($('body'));
365        }      
366
367    });
368    $('#headerMenuArea__close').on('click', function(e){
369        $('#navHmbCtrlR').trigger('click');
370    });
371    // 右サイド開閉 ここまで
372
373
374
375
376
377    //レスポンシブ状態か判定する為の関数
378    function resChk() {
379        var value = $('.container-fluid').outerWidth();
380
381        if (value >= 1024) {
382            return false;
383        } else {
384            return true;
385        }
386
387    }
388
389
390});