October
18

2017

CSSとHTMLでメガメニュー

cssとHTMLでできるメガメニューの紹介です。

それでは、ソースサンプルとデモページをご覧ください。

▼以下が実際のソースサンプルです。
▼CSS


#gnav > ul {
    width: 600px;
    margin: 0 auto;
    text-align: center;
}

#gnav > ul {
    display: table;
    margin: 0 auto;
}

#gnav > ul > li {
    display: table-cell;
    margin-right: 2em;
}

#gnav > ul > li:hover {
    color: #fff;
    background-color: darkseagreen;
}

#gnav > ul > li:hover > a {
    color: #fff;
}

#gnav > ul > li:hover .menu {
    max-height: 1000px;
    opacity: 1;
}

#gnav > ul > li > a {
    display: block;
    padding: 25.5px 1em 15.5px;
    transition: all .3s ease-in;
}

#gnav > ul .menu {
    transition: all .3s ease-in;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    width: 100%;
    left: 0;
    text-align: center;
    position: absolute;
    background-color: darkseagreen;
}

#gnav > ul .menu .menu_inner {
    padding: 1em 0;
}

#gnav > ul .menu .menu_inner li {
    display: inline-block;
    margin: 0 .5em;
}

#gnav > ul .menu a {
    color: #fff;
}
 


▼HTML

<nav id="gnav">
  <ul>
    <li><a href="#">HOME</a></li>
    <li class="toggle">
      <a href="">MENU-2-</a>
      <div class="menu">
        <ul class="menu_inner">
          <li><a href="#">menu 01</a></li>
          <li><a href="#">menu 02</a></li>
          <li><a href="#">menu 03</a></li>
          <li><a href="#">menu 04</a></li>
        </ul>
        <ul class="menu_inner">
          <li><a href="#">menu 05</a></li>
          <li><a href="#">menu 06</a></li>
          <li><a href="#">menu 07</a></li>
          <li><a href="#">menu 08</a></li>
        </ul>
        <ul class="menu_inner">
          <li><a href="#">menu 09</a></li>
          <li><a href="#">menu 10</a></li>
          <li><a href="#">menu 11</a></li>
          <li><a href="#">menu 12</a></li>
        </ul>
      </div>
    </li>
    <li class="toggle">
      <a href="">Menu-3-</a>
      <div class="menu">
        <ul class="menu_inner">
          <li><a href="#">menu 01</a></li>
          <li><a href="#">menu 02</a></li>
          <li><a href="#">menu 03</a></li>
          <li><a href="#">menu 04</a></li>
          <li><a href="#">menu 05</a></li>
          <li><a href="#">menu 06</a></li>
          <li><a href="#">menu 07</a></li>
          <li><a href="#">menu 08</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>
 


今回、参考にさせていただいたのは、
『Web制作会社トライム』さんです。
ありがとうございます。

デモページは、こちら