スライドアウトボックスメニューという新しいアプローチのご紹介

「スライドアウトボックメニュー」とは、グリッド内でスライドするボックス付きの詳細メニューのことです。今回取り上げる例では、グリッドアイテムはページの右上隅から個別にモーション付きで表示されます。

• デモページを見る
• ダウンロードリンク

今回はこの小さなメニューを共有したいと思います。 スライドアウトボックスメニューというアイデアは、以前に紹介した拡大グリッドメニューと同様にページの右上隅からグリッドのボックスを個別に表示します。

このエフェクトとスライドショーのレイアウトのアイデアは、Adrián SomozaのデザインとZhenya RynzhukのDribbble shotから生まれました。アニメーションはTweenMaxによって提供されます。

注意：最新のCSSプロパティを使用しているため、古いブラウザではサポートされない可能性があります。ご了承ください。

メニューを紹介するため、今回はGIF動画を作成しました。 以下のように、右上隅の「+detail」ボタンをクリックするとメニューが開きます。

この小さなメニューの効果を、気に入ってくれると嬉しいです。

（著者：Mary Lou　翻訳：Kiyofumi Sato）