【CSS Grid】グリッドデザインを使ったかっこいいアニメーションメニューExpanding Grid Menu

Expanding Grid Menu

今回はグリッドレイアウトで表示されるアニメーションメニューExpanding Grid Menuをご紹介します。

Expanding Grid Menuとは
GridMenu-master.zipの基本的な内容
今回のカスタム内容
Expanding Grid Menu デモ
まとめ

Expanding Grid Menuとは

CSS Grid Layout （グリッドレイアウト）を使用したアニメーション全画面メニューになります。公式のデモではスマホ時のグリッドレイアウト機能を削除していますがメディアクエリ設定でスマホ対応も可能です。

参考サイト
Expanding Grid Menu

上記のデモでは「INFO」をクリックするとメニューが表示され、「CLOSE」で閉じます。
Download Sourceよりソース（GridMenu-master.zip）をダウンロードします。

GridMenu-master.zipの基本的な内容

GridMenu-masterの内容です。
ローカルで動きを確認できます。

CSS

CSSは以下の2つで変数が定義できるカスタムプロパティを導入しています。

<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/demo1.css" />

JS

JSはdemo.js、anime.min.js、menu.jsの3つを読み込んでいます。

<script src="js/demo.js"></script>
<script src="js/anime.min.js"></script>
<script src="js/menu.js"></script>

今回のカスタム内容

今回はグリッドレイアウトの変更とトップページのデザイン変更をしてなおかつスマホにも対応させています。

特に大きな変更としてはdemo1.cssのグリッドレイアウト部分で、以下のように中央にメインのグリッドが表示されるようにしてみました。

.grim__item:first-child {
    grid-area: 1 / 1 / 2 / 2;
}
.grim__item:nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
}
.grim__item:nth-child(3) {
    grid-area: 2 / 1 / 3 / 3;
}
.grim__item:nth-child(4) {
    grid-area: 3 / 1 / 5 / 3;
}
.grim__item:nth-child(5) {
    grid-area: 1 / 3 / 7 / 7;
}
.grim__item:nth-child(6) {
    grid-area: 1 / 7 / 3 / 9;
}
.grim__item:nth-child(7) {
    grid-area: 3 / 7 / 5 / 9;
}