CSS

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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

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

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

参考サイト
Expanding Grid Menu

上記のデモでは「INFO」をクリックするとメニューが表示され、「CLOSE」で閉じます。
Download Sourceよりソース(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;
}
上記CSSで設定したレイアウト

Expanding Grid Menu デモ

CSSでカスタムプロパティ、グリッドレイアウトを使用していることからIE11では注意が必要です。

今回はグリッドメニューとして紹介していますが、この表現方法はメニュー以外にも使えそうですね。

uhaha

カスタムプロパティは使いやすいです( ⁰̷̴͈ ꇴ ⁰̷̴͈ );

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*