LoginSignup
0
0

More than 5 years have passed since last update.

@akuden

メガメニュー

Posted at

メガメニューサンプル
表示切替はjqueryでclass制御して行っています。
レイアウト組はflexboxとpositionを併用。
リストのネストが深くなることを許容できるならCSSのhoverで制御したほうが楽だと思います。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
/* reset */
body {
  margin: 0;
  padding: 0;
}
.header {
  box-sizing: border-box;
}
.header * {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  font-size: 100%;
  font: inherit;
}
.header *::before,
.header *::after {
  box-sizing: inherit;
}
.header ol,
.header ul {
  list-style: none;
}

/* header */
.header {
  position: relative;
  background-color: #fff;
}

/* global */
.global {
  display: flex;
  width: 1080px;
  margin: auto;
  height: 100px;
  background-color: #eee;
}
.global .logo {
  flex-grow: 1;
}
.global ul {
  display: flex;
  list-style: none;
}
.global li {
  width: 200px;
  text-align: center;
  border-left: 1px solid #ccc;
}
.global li.is-hover {
  background-color: #fff;
}

/* megamenu */
.megamenu {
  position: absolute;
  top: 100px;
  z-index: 99;
  overflow: hidden;
  width: 100%;
  margin: auto;
  background: rgba(0,0,0,0.8);
  color: #fff;
}
.megamenu a {
  color: #fff;
  text-decoration: none;
}
.megamenu a:hover {
  text-decoration: underline;
}
.megamenu > li {
  width: 1080px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}
.megamenu > li::before {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  display: block;
  width: 3840px;
  height: 100%;
  content: "";
}
/* megamenu col */
.megamenu .col {
  margin-top: 20px;
  height: 220px;
}
.megamenu .col:not(:first-child) {
  border-left: 1px solid #fff;
}
.megamenu .col:nth-child(1) {
  width: 20%;
  padding-right: 20px;
}
.megamenu .col:nth-child(2) {
  width: 60%;
  padding-right: 20px;
  padding-left: 20px;
}
.megamenu .col:nth-child(3) {
  width: 20%;
  padding-left: 20px;
}
/* megamenu row */
.megamenu .row {
  position: relative;
  width: 100%;
  height: 40px;
  margin-top: 20px;
  color: #fff;
}
.megamenu .row::before {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  box-sizing: border-box;
  transform: translateX(-50%);
  display: block;
  width: 3840px;
  height: 100%;
  border-top: 4px solid #999;
  background-color: #000;
  content: "";
}
.megamenu .row > ul {
  display: flex;
}
.megamenu .row li {}
.megamenu .row li:not(:first-child) {
  margin-left: 12px;
}

/* megamenu content */
.megamenu .ttl {
  font-size: 20px;
}
.megamenu .list {
  height: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;

  list-style: inside decimal;
}
.megamenu .list li {
  width: 33%;
  flex: 0 0 auto;
}

/* megamenu modify */
.megamenu .alpha  .ttl {
  color: #f00;
}
.megamenu .alpha .row::before {
  border-top-color: #f00;
}
.megamenu .beta  .ttl {
  color: #0ff;
}
.megamenu .beta .row::before {
  border-top-color: #0ff;
}
.megamenu .gamma  .ttl {
  color: #ff0;
}
.megamenu .gamma .row::before {
  border-top-color: #ff0;
}
.megamenu .delta  .ttl {
  color: #0f0;
}
.megamenu .delta .row::before {
  border-top-color: #0f0;
}

/* megamenu on|off */
.megamenu {
  height: 0;
  transition: height 0.3s cubic-bezier(0.5,0,1,1);
}
.megamenu.is-on {
  height: 300px;
}
.megamenu > li {
  display: none;
}
.megamenu > li.is-on {
  display: flex;
}

/* sample style */
body {
  background-color: #fcfcfc;
}
.note {
  max-width: 1080px;
  margin-top: 340px;
  margin: 0 auto 20px;
  font-size: 14px;
}
.mt320 {
  margin-top: 320px;
}
.mb320 {
  margin-bottom: 320px;
}
</style>
<script src="http://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$(function() {
  // class切り替えサンプル。スマホのタッチイベントは考慮していません。
  $('.js-sample').each(function() {
    var show = 'is-on',
        hover ='is-hover',
        items = [
          'alpha',
          'beta',
          'gamma',
          'delta'
        ],
        $wrap = $(this),
        $global = $wrap.find('.global'),
        $megamenu = $wrap.find('.megamenu'),
        $header = $wrap.find('.header'),
        cls;
    $global.find('li').on('mouseenter', function() {
      cls = $(this).attr('class');
      $megamenu.find('li').removeClass(show);
      $megamenu.find('.' + cls).addClass(show);
    });
    $header.find('.' + items.join(',.')).on({
      'mouseenter' : function(){
        $megamenu.addClass(show);
        $global.find('.' + cls).addClass(hover);
      },
      'mouseleave' : function(){
        $megamenu.removeClass(show);
        $global.find('.' + cls).removeClass(hover);
      }
    });
  });
});
</script>
</head>
<body>
<div class="js-sample">


<header class="header">
  <div class="global">
    <p class="logo">test</p>
    <ul>
      <li class="alpha"><a href="">menu</a></li>
      <li class="beta"><a href="">menu</a></li>
      <li class="gamma"><a href="">menu</a></li>
      <li class="delta"><a href="">menu</a></li>
    </ul>
  </div>
  <ul class="megamenu">
    <li class="alpha">
      <div class="col">
        <p class="ttl">category 1</p>
      </div>
      <div class="col">
        <ol class="list">
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ol>
      </div>
      <div class="col">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
      <div class="row">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
    </li>
    <li class="beta">
      <div class="col">
        <p class="ttl">category 2</p>
      </div>
      <div class="col">
        <ol class="list">
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ol>
      </div>
      <div class="col">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
      <div class="row">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
    </li>
    <li class="gamma">
      <div class="col">
        <p class="ttl">category 3</p>
      </div>
      <div class="col">
        <ol class="list">
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu menu menu menu menu menu menu menu menu menu menu</a></li>
          <li><a href="">menu</a></li>
        </ol>
      </div>
      <div class="col">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
      <div class="row">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
    </li>
    <li class="delta">
      <div class="col">
        <p class="ttl">category 4</p>
      </div>
      <div class="col">
        <ol class="list">
          <li><a href="">menu menu menu menu menu menu menu menu menu menu menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu menu menu menu menu menu menu menu menu menu menu</a></li>
        </ol>
      </div>
      <div class="col">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
      <div class="row">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
    </li>
  </ul>
</header>


</div><!-- /.js-sample -->
<div class="js-sample mt320">


<header class="header">
  <div class="global">
    <p class="logo">test</p>
    <ul>
      <li class="alpha"><a href="">menu</a></li>
      <li class="beta"><a href="">menu</a></li>
      <li class="gamma"><a href="">menu</a></li>
      <li class="delta"><a href="">menu</a></li>
    </ul>
  </div>
  <ul class="megamenu">
    <li class="alpha">
      <div class="col">
        <p class="ttl">category 1</p>
      </div>
      <div class="col">
        <ol class="list">
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ol>
      </div>
      <div class="col">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
      <div class="row">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
    </li>
    <li class="beta">
      <div class="col">
        <p class="ttl">category 2</p>
      </div>
      <div class="col">
        <ol class="list">
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ol>
      </div>
      <div class="col">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
      <div class="row">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
    </li>
    <li class="gamma">
      <div class="col">
        <p class="ttl">category 3</p>
      </div>
      <div class="col">
        <ol class="list">
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu menu menu menu menu menu menu menu menu menu menu</a></li>
          <li><a href="">menu</a></li>
        </ol>
      </div>
      <div class="col">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
      <div class="row">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
    </li>
    <li class="delta">
      <div class="col">
        <p class="ttl">category 4</p>
      </div>
      <div class="col">
        <ol class="list">
          <li><a href="">menu menu menu menu menu menu menu menu menu menu menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu menu menu menu menu menu menu menu menu menu menu</a></li>
        </ol>
      </div>
      <div class="col">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
      <div class="row">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
    </li>
  </ul>
</header>


</div><!-- /.js-sample -->

<hr class="mt320">
<p class="note">static sample</p>

<header class="header">
  <div class="global">
    <p class="logo">test</p>
    <ul>
      <li class="alpha is-hover"><a href="">menu</a></li>
      <li class="beta"><a href="">menu</a></li>
      <li class="gamma"><a href="">menu</a></li>
      <li class="delta"><a href="">menu</a></li>
    </ul>
  </div>
  <ul class="megamenu is-on">
    <li class="alpha is-on">
      <div class="col">
        <p class="ttl">category 1</p>
      </div>
      <div class="col">
        <ol class="list">
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ol>
      </div>
      <div class="col">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
      <div class="row">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
    </li>
    <li class="beta">
      <div class="col">
        <p class="ttl">category 2</p>
      </div>
      <div class="col">
        <ol class="list">
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ol>
      </div>
      <div class="col">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
      <div class="row">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
    </li>
    <li class="gamma">
      <div class="col">
        <p class="ttl">category 3</p>
      </div>
      <div class="col">
        <ol class="list">
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu menu menu menu menu menu menu menu menu menu menu</a></li>
          <li><a href="">menu</a></li>
        </ol>
      </div>
      <div class="col">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
      <div class="row">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
    </li>
    <li class="delta">
      <div class="col">
        <p class="ttl">category 4</p>
      </div>
      <div class="col">
        <ol class="list">
          <li><a href="">menu menu menu menu menu menu menu menu menu menu menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu menu menu menu menu menu menu menu menu menu menu</a></li>
        </ol>
      </div>
      <div class="col">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
      <div class="row">
        <ul>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
          <li><a href="">menu</a></li>
        </ul>
      </div>
    </li>
  </ul>
</header>


<div class="container mt320">
container
</div>
<footer>
  footer
</footer>
</body>
</html>

参考

以上、ありがとうございました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0