レスポンシブWebデザイン対応のメガメニュー

Result

ウィンドウサイズが943px以上はドロップダウン、以下の時はクリックで開閉するアコーディオンのメガメニュー。上記デモはモバイル向けになっていると思います。ウィンドウサイズ943px以上でデスクトップ向けに切り替わるように設定されています。非常にシンプルなコードですが代わりにCSSがやや複雑かもしれません

jQuery

$(document).ready(function () {

    "use strict";
    //子のulを持ったliをチェックしてトグルアイコンの為のclass付与
    $('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');

    $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');

    //ウィンドウサイズをチェックしてスマフォ用とデスクトップ用にトグル
    $(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\">ナビゲーション</a>");
    $(".menu > ul > li").hover(function (e) {
        if ($(window).width() > 943) {
            $(this).children("ul").stop(true, false).fadeToggle(150);
            e.preventDefault();
        }
    });

    $(".menu > ul > li").click(function (e) {
        if ($(window).width() <= 943) {
            $(this).children("ul").fadeToggle(150);
            e.preventDefault();
        }
    });

    $(".menu-mobile").click(function (e) {
        $(".menu > ul").toggleClass('show-on-mobile');
        e.preventDefault();
    });

});

css

.menu-container {
  width: 80%;
  margin: 0 auto;
  background: #e9e9e9;
}

.menu-mobile {
  display: none;
  padding: 20px;
}
.menu-mobile:after {
  content: "\f394";/*モバイル用メニューに表示するアイコン*/
  font-family: "Ionicons";
  font-size: 2.5rem;
  padding: 0;
  float: right;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-25%);
          transform: translateY(-25%);
}
.menu-dropdown-icon:before {
  content: "\f489";/*モバイル用メニューに表示するアイコン*/
  font-family: "Ionicons";
  display: none;
  cursor: pointer;
  float: right;
  padding: 1.5em 2em;
  background: #fff;
  color: #333;
}
.menu > ul {
  margin: 0 auto;
  width: 100%;
  list-style: none;
  padding: 0;
  position: relative;
  box-sizing: border-box;
}
.menu > ul:before,
.menu > ul:after {
  content: "";
  display: table;
}
.menu > ul:after {
  clear: both;
}
.menu > ul > li {
  float: left;
  background: #e9e9e9;
  padding: 0;
  margin: 0;
}
.menu > ul > li a {
  text-decoration: none;
  padding: 1.5em 3em;
  display: block;
}
.menu > ul > li:hover {
  background: #f0f0f0;
}
.menu > ul > li > ul {
  display: none;
  width: 100%;
  background: #f0f0f0;
  padding: 20px;
  position: absolute;
  z-index: 99;
  left: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
  content: "";
  display: table;
}
.menu > ul > li > ul:after {
  clear: both;
}
.menu > ul > li > ul > li {
  margin: 0;
  padding-bottom: 0;
  list-style: none;
  width: 25%;
  background: none;
  float: left;
}
.menu > ul > li > ul > li a {
  color: #777;
  padding: .2em 0;
  width: 95%;
  display: block;
  border-bottom: 1px solid #ccc;
}
.menu > ul > li > ul > li > ul {
  display: block;
  padding: 0;
  margin: 10px 0 0;
  list-style: none;
  box-sizing: border-box;
}
.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
  content: "";
  display: table;
}
.menu > ul > li > ul > li > ul:after {
  clear: both;
}
.menu > ul > li > ul > li > ul > li {
  float: left;
  width: 100%;
  padding: 10px 0;
  margin: 0;
  font-size: .8em;
}
.menu > ul > li > ul > li > ul > li a {
  border: 0;
}
.menu > ul > li > ul.normal-sub {
  width: 300px;
  left: auto;
  padding: 10px 20px;
}
.menu > ul > li > ul.normal-sub > li {
  width: 100%;
}
.menu > ul > li > ul.normal-sub > li a {
  border: 0;
  padding: 1em 0;
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
モバイル用
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*サイズは任意で。js側の設定と合わせる*/
@media only screen and (max-width: 959px) {
  .menu-container {
    width: 100%;
  }
  .menu-mobile {
    display: block;
  }
  .menu-dropdown-icon:before {
    display: block;
  }
  .menu > ul {
    display: none;
  }
  .menu > ul > li {
    width: 100%;
    float: none;
    display: block;
  }
  .menu > ul > li a {
    padding: 1.5em;
    width: 100%;
    display: block;
  }
  .menu > ul > li > ul {
    position: relative;
  }
  .menu > ul > li > ul.normal-sub {
    width: 100%;
  }
  .menu > ul > li > ul > li {
    float: none;
    width: 100%;
    margin-top: 20px;
  }
  .menu > ul > li > ul > li:first-child {
    margin: 0;
  }
  .menu > ul > li > ul > li > ul {
    position: relative;
  }
  .menu > ul > li > ul > li > ul > li {
    float: none;
  }
  .menu .show-on-mobile {
    display: block;
  }
}

html

 <div class="menu-container">
        <div class="menu">
            <ul>
                <li><a href="#">menu 01</a></li>
                <li><a href="#">menu 01</a>
                    <ul>
                        <li><a href="#">menu 02 parent</a>
                            <ul>
                                <li><a href="#">menu 02 child</a></li>
                                <li><a href="#">menu 02 child</a></li>
                                <li><a href="#">menu 02 child</a></li>
                                <li><a href="#">menu 02 child</a></li>
                            </ul>
                        </li>
                        <li><a href="#">menu 02 parent</a>
                            <ul>
                                <li><a href="#">menu 02 child</a></li>
                                <li><a href="#">menu 02 child</a></li>
                                <li><a href="#">menu 02 child</a></li>
                                <li><a href="#">menu 02 child</a></li>
                            </ul>
                        </li>
                        <li><a href="#">menu 02 parent</a>
                            <ul>
                                <li><a href="#">menu 02 child</a></li>
                                <li><a href="#">menu 02 child</a></li>
                                <li><a href="#">menu 02 child</a></li>
                            </ul>
                        </li>
                        <li><a href="#">menu 02 parent</a>
                            <ul>
                                <li><a href="#">menu 02 child</a></li>
                                <li><a href="#">menu 02 child</a></li>
                                <li><a href="#">menu 02 child</a></li>
                                <li><a href="#">menu 02 child</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">menu 01</a>
                    <ul>
                        <li><a href="#">menu 02</a></li>
                        <li><a href="#">menu 02</a></li>
                        <li><a href="#">menu 02</a></li>
                    </ul>
                </li>
                <li><a href="#">menu 01</a>
                    <ul>
                        <li><a href="#">menu 02 parent</a>
                            <ul>
                                <li><a href="#">menu 02 child</a></li>
                                <li><a href="#">menu 02 child</a></li>
                                <li><a href="#">menu 02 child</a></li>
                                <li><a href="#">menu 02 child</a></li>
                            </ul>
                        </li>
                        <li><a href="#">menu 02 parent</a>
                            <ul>
                                <li><a href="#">menu 02 child</a></li>
                                <li><a href="#">menu 02 child</a></li>
                                <li><a href="#">menu 02 child</a></li>
                                <li><a href="#">menu 02 child</a></li>
                            </ul>
                        </li>
                        <li><a href="#">menu 02 parent</a>
                            <ul>
                                <li><a href="#">menu 02 child</a></li>
                                <li><a href="#">menu 02 child</a></li>
                                <li><a href="#">menu 02 child</a></li>
                                <li><a href="#">menu 02 child</a></li>
                            </ul>
                        </li>
                        <li><a href="#">menu 02</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

via

megamenu.js – Last responsive megamenu you’ll ever need BY Mario Loncarek