[CSS]ごくシンプルなHTMLとCSSで実装するアニメーションがかっこいいメガメニューのデモ

最小限のシンプルなHTMLとCSSで実装する、アニメーションで表示されるメガメニューのデモを紹介します。

Mega Menu Pure CSS and HTML

デモは46行のHTML、80行のCSSだけで実装されています。
Chrome, Safari, Firefoxでご覧ください。

デモ

左上のアイコンをクリックすると、メガメニューがかっこいいアニメーションで表示されます。

デモ：Mega Menuオープン時

HTML

HTMLは、トリガーとなるチェックボックス、メガメニューのリスト、コンテンツ、の3つで構成されています。
デモのコードをシンプルにしてみました。

<input type="checkbox" id="nav">
<label for="nav" class="entypo-menu"></label>
<nav>
  <ul>
    <h2>カテゴリ</h2>
    <li><a href="#">アイテム</a></li>
    <li><a href="#">アイテム</a></li>
    <li><a href="#">アイテム</a></li>
  </ul>
  <ul>
    <h2>カテゴリ</h2>
    <li><a href="#">アイテム</a></li>
    <li><a href="#">アイテム</a></li>
    <li><a href="#">アイテム</a></li>
  </ul>
  <ul>
    <h2>カテゴリ</h2>
    <li><a href="#">アイテム</a></li>
    <li><a href="#">アイテム</a></li>
    <li><a href="#">アイテム</a></li>
  </ul>
</nav>
<div id="content">
  コンテンツ
</div>

CSS

CSSの80行にはフォントカラーなどのスタイルも含まれているので、メガメニューのスタイルだけにするさらに少なくなります。

@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(http://fonts.googleapis.com/css?family=Roboto:100);
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}
nav { /* EDIT HERE FOR A DIFFERNET EFFECT */
  transform: translate3d(0,-125%,0);
}
body {
  font-family:'HelveticaNeue-Light', Roboto;
  background:#34aadc;
  color:#fff;
}
input[id*="nav"] {
  display:none;
}
input[id*="nav"] + label {
  display:block;
  color:#fff;
  width:45px;
  height:45px;
  text-align:center;
  line-height:45px;
  font-size:27px;
  cursor:pointer;
  user-select:none;
  transition:1s;
  z-index:1;
  position:absolute;
}
input[id*="nav"]:checked + label {
  color:#34aadc;
}
nav {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#333;
  z-index:0;
  transition:.6s;
  backface-visibility:hidden;
}
input[id*="nav"]:checked ~ nav {
  transform: translate3d(0,0,0);
}
nav ul {
  float:left;
  padding-top:70px;
  padding-bottom:20px;
  width:33.3%;
}
nav ul h2 {
  padding:0 0 20px 70px;
  font-size:24px;
  color:#34aadc;
}
nav ul li {
  padding:4px 20px 4px 70px;
}
nav ul li a {
  color:#fff;
  text-decoration:none;
  font-size:14px;
  transition:.2s;
}
nav ul li a:hover {
  color:#34aadc;
}
#credits {
  position:absolute;
  bottom:50px;
  left:70px;
  color:#F33D6C;
}
#content {
  padding:100px 70px;
  font-size:51px;
}