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

DESIGNER

codrops

2018.09.26 2023.12.07

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

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

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

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

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

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

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

#副業OK
#新規事業
#スタートアップ
#急募
#長期案件
#スポット案件（1ヶ月）
#フルリモートOK

【リモート可】【子育てママ歓迎】IoTサービスで世界中の家族を幸せに。アプリデザイナー(スマホ・タブレット) /Webデザイナー募集

#スタートアップ

【週3日以上/リモートワークOK】 Figmaで制作する管理画面デザインを担うUIデザイナーを急募！

#副業OK
#スタートアップ
#土日週末OK
#長期案件
#フルリモートOK

Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities. The team of Codrops is dedicated to provide useful, inspiring and innovative content that is free of charge.

この記事はcodropsからの転載です。配信元または著者とコンテンツ契約を結び配信しています。
Slide Out Box Menu

Follow @goworkship

■当サイト掲載中の情報について
Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。
■アクセス解析ツールについて
当サイトでは、Googleによるアクセス解析ツール『Googleアナリティクス』を利用しています。このGoogleアナリティクスはトラフィックデータの収集を行なっています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。この規約に関して、詳しくはGoogle アナリティクス利用規約をご覧ください。

■広告の配信について
当サイトは第三者配信の広告サービス『Google Adsense』を利用しています。広告配信事業者は、取得した閲覧履歴や購買履歴等の情報を分析して、ユーザーの趣味・嗜好に応じた新商品・サービスに関する広告を表示することがあります。また当サイトは、商品やサービスを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、『A8.net』『もしもアフィリエイト』『afb』『アクセストレード』『バリューコマース』『レントラックス』『felmat』『TGアフィリエイト』『リンクシェア』『楽天アフィリエイト』『Amazon アソシエイト』の参加者です。IPアドレス、ユーザーエージェント、クッキー情報、成果結果情報（広告成果毎の識別子）などを取得し、広告配信に係る成果計測、広告配信に係る不正防止などに利用する場合があります。