megamenuのスタイル変更01(JS)
まずは実装サンプルを確認
HTML・CSS
HTML・CSSのファイルを変更する必要があります。
Javascript
js/common.js
のファイルを変更する必要があります。
削除する記述
js/common.js
の11行目辺りの// megamenu TYEP1. クリックで開く
の項目を削除してください。
$(function() { if (window.matchMedia( "(max-width: 1024px)" ).matches) { $(document).on('click', 'li.has-child', function(){ if ($(this).hasClass('nav_open')) { $(this).removeClass('nav_open'); $(this).children('div').slideUp(); } else if (!$(this).hasClass('nav_open')) { $('li.has-child > div').slideUp(); $('li.has-child').removeClass('nav_open'); $(this).addClass('nav_open'); $(this).children('div').slideDown(); //$('div#wrapper').addClass('overlay'); //$('footer').addClass('overlay'); } }); } else { $(document).on('click', 'li.has-child', function(){ if ($(this).hasClass('nav_open')) { $('li').removeClass('nav_open'); $('li.has-child > div').slideUp(); $('div#wrapper').removeClass('overlay'); $('footer').removeClass('overlay'); } else if (!$(this).hasClass('nav_open')) { $('li').removeClass('nav_open'); $('li.has-child > div').slideUp(); $(this).addClass('nav_open'); $(this).children('div').slideDown(); $('div#wrapper').addClass('overlay'); $('footer').addClass('overlay'); } }); } $(document).on('click', '.overlay,.header-container', function(){ $('li.has-child > div').slideUp(); $('li').removeClass('nav_open'); $('div#wrapper').removeClass('overlay'); $('footer').removeClass('overlay'); }); });
js/common.js
の87行目辺りの// ハンバーガーメニューの開閉
の項目を削除してください。
$(function() { $('.hamburger').click(function() { $(this).toggleClass('nav_active'); $('.header-sp-search').removeClass('search_active'); $('.megamenu').fadeToggle(); $('.header-container form').fadeOut(); }); });
追記する記述
js/common.js
の最下部に下記の記述を追記してください。
$(function() { if (window.matchMedia( "(max-width: 1024px)" ).matches) { $(document).on('click', 'li.has-child > a', function(){ $(this).parent().removeClass('nav_open'); }); $(document).on('click', 'li.has-child', function(){ if (!$(this).hasClass('nav_open')) { $('li.has-child').removeClass('nav_open'); $(this).addClass('nav_open'); $(this).children('div').slideDown(); $('.nav_open #header-backbtn').addClass("header-btn-show"); } }); } else { $(document).on('click', 'li.has-child > a', function(){ $('li.has-child > div').slideUp(); }); $(document).on('click', 'li.has-child', function(){ if ($(this).hasClass('nav_open')) { $('li').removeClass('nav_open'); $('div#wrapper').removeClass('overlay'); $('footer').removeClass('overlay'); } else if (!$(this).hasClass('nav_open')) { $('li').removeClass('nav_open'); $(this).addClass('nav_open'); $(this).children('div').slideDown(); $('div#wrapper').addClass('overlay'); $('footer').addClass('overlay'); } }); } $(document).on('click', '.overlay', function(){ $('li.has-child > div').slideUp(); $('li').removeClass('nav_open'); $('div#wrapper').removeClass('overlay'); $('footer').removeClass('overlay'); }); }); $(function() { if ($('.megamenu > ul > li > div > ul > li:has(div ul li)')) { $('.megamenu > ul > li > div > ul > li:has(div ul li)').addClass("has-grandchild"); } if ($('.megamenu > ul > li > div > ul > li > div > ul > li:has(div ul li)')) { $('.megamenu > ul > li > div > ul > li > div > ul > li:has(div ul li)').addClass("has-great-grandchild"); } }); $(function() { $('.hamburger').click(function() { $(this).toggleClass('nav_active'); $('.header-sp-search').removeClass('search_active'); $('.megamenu').fadeToggle(); $('.header-container form').fadeToggle(); }); }); $(document).ready(function(){ $('li.has-grandchild > a').click(function(e){ e.preventDefault(); }); $('li.has-great-grandchild > a').click(function(e){ e.preventDefault(); }); });
下記も追記してください
$(function() { $(document).on('click', '.has-grandchild > a', function() { var $parentElement = $(this).parent(); if ($parentElement.find('> div').hasClass('is-opened')) { $parentElement.find('> div').removeClass('is-opened'); $parentElement.find('> a').removeClass('current-menu'); $('.has-great-grandchild > div').removeClass('is-opened'); $('.has-great-grandchild > a').removeClass('current-menu'); } else if (!$parentElement.find('> div').hasClass('is-opened')) { $('.has-grandchild > div').removeClass('is-opened'); $('.has-grandchild > a').removeClass('current-menu'); $('.has-great-grandchild > a').removeClass('current-menu'); $('.has-great-grandchild > div').removeClass('is-opened'); $parentElement.find('> div').addClass('is-opened'); $parentElement.find('> a').addClass('current-menu'); } }); $(document).on('click', '.has-great-grandchild > a', function() { var $parentElement = $(this).parent(); if ($parentElement.find('> div').hasClass('is-opened')) { $parentElement.find('> div').removeClass('is-opened'); $parentElement.find('> a').removeClass('current-menu'); } else if (!$parentElement.find('> div').hasClass('is-opened')) { $('.has-great-grandchild > div').removeClass('is-opened'); $('.has-great-grandchild > a').removeClass('current-menu'); $parentElement.find('> div').addClass('is-opened'); $parentElement.find('> a').addClass('current-menu'); } }); }); $(function() { if (window.matchMedia( "(max-width: 1024px)" ).matches) { $(document).on('click', 'li.has-child > a', function(){ var $parentUl = $(this).parent().parent(); $parentUl.addClass('is-lv1'); }); $(document).on('click', 'li.has-grandchild > a', function(){ var $parentUl = $(this).parent().parent().parent().parent().parent(); $parentUl.removeClass('is-lv1'); $parentUl.addClass('is-lv2'); }); $(document).on('click', '.is-lv1 #header-backbtn', function(){ var $grandparentUl = $(this).parent().parent().parent(); $(this).removeClass("header-btn-show"); $grandparentUl.removeClass('is-lv1'); $('.has-child > div').slideUp(); }); $(document).on('click', '.is-lv2 #header-backbtn', function(){ var $grandparentUl = $(this).parent().parent().parent(); $grandparentUl.removeClass('is-lv2'); $grandparentUl.addClass('is-lv1'); $('.has-grandchild > div').removeClass('is-opened'); }); } });