megamenuのスタイル変更01(JS)

HTML・CSS

HTML・CSSのファイルを変更する必要があります。

» HTML・CSSの編集方法はこちら

Javascript

js/common.jsのファイルを変更する必要があります。

$(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');
    });  
});

$(function() {
    $('.hamburger').click(function() {
        $(this).toggleClass('nav_active');
        $('.header-sp-search').removeClass('search_active');
        $('.megamenu').fadeToggle();
        $('.header-container form').fadeOut();
    });
});

$(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');
        });
    } 
});