レスポンシブ スライドアウト サイドナビゲーションの基本的な作成方法
この投稿では、レスポンシブでステートフルで、キーボード ナビゲーションをサポートし、JavaScript の有無にかかわらず動作し、ブラウザをまたいで機能する、ウェブ用の Sidenav コンポーネントのプロトタイプをどのように作成したかをご紹介します。デモをお試しください。
動画で視聴したい場合は、この投稿の YouTube バージョンをご利用ください。
概要
レスポンシブ ナビゲーション システムを構築するのは簡単ではありません。キーボードを使うユーザーもいれば、高性能なパソコンを使うユーザーもいれば、小型のモバイル デバイスからアクセスするユーザーもいます。アクセスするユーザー全員がメニューを開閉できる必要があります。
ウェブ戦術
このコンポーネントの探索では、いくつかの重要なウェブ プラットフォーム機能を組み合わせることができました。
- CSS
:target
- CSS グリッド
- CSS transforms
- ビューポートとユーザー設定の CSS メディアクエリ
focus
用 JS UX の機能強化
このソリューションにはサイドバーが 1 つあり、540px
以下の「モバイル」ビューポートの場合にのみ切り替えられます。540px
は、モバイルのインタラクティブ レイアウトと静的なデスクトップ レイアウトを切り替えるためのブレークポイントです。
CSS :target
疑似クラス
一方の <a>
リンクは URL ハッシュを #sidenav-open
に設定し、もう一方は空(''
)に設定します。最後に、要素の id
はハッシュと一致します。
<a href="#sidenav-open" id="sidenav-button" title="Open Menu" aria-label="Open Menu">
<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu"></a>
<aside id="sidenav-open">
…
</aside>
これらの各リンクをクリックすると、ページ URL のハッシュ状態が変更され、疑似クラスを使用してサイドナビゲーションの表示と非表示を切り替えます。
@media (max-width: 540px) {
#sidenav-open {
visibility: hidden;
}
#sidenav-open:target {
visibility: visible;
}
}
CSS グリッド
これまでは、絶対位置または固定位置のサイドナビゲーション レイアウトとコンポーネントのみを使用していました。ただし、グリッドでは grid-area
構文を使用することで、複数の要素を同じ行または列に割り当てることができます。
スタック
プライマリ レイアウト要素 #sidenav-container
は、1 行と 2 列を作成するグリッドで、それぞれに 1 列は stack
という名前が付けられています。スペースに制約がある場合、CSS は <main>
要素のすべての子を同じグリッド名に割り当て、すべての要素を同じスペースに配置してスタックを作成します。
#sidenav-container {
display: grid;
grid: [stack] 1fr / min-content [stack] 1fr;
min-height: 100vh;
}
@media (max-width: 540px) {
#sidenav-container > * {
grid-area: stack;
}
}
メニューの背景
<aside>
は、サイド ナビゲーションを含むアニメーション要素です。このオブジェクトには、2 つの子があります。[nav]
という名前のナビゲーション コンテナ <nav>
と、メニューを閉じるために使用される [escape]
という名前の背景 <a>
です。
#sidenav-open {
display: grid;
grid-template-columns: [nav] 2fr [escape] 1fr;
}
2fr
と 1fr
を調整して、メニュー オーバーレイとネガティブ スペースの閉じるボタンの適切な比率を見つけます。
CSS の 3D 変換と遷移
レイアウトがモバイルのビューポート サイズで積み重ねられました。新しいスタイルを追加するまで デフォルトで記事に重なって表示されます次のセクションで狙う UX は次のとおりです。
- 開閉をアニメーション化する
- ユーザーが納得できる場合にのみ、動きのあるアニメーションにします。
- キーボード フォーカスが画面外の要素に入らないように
visibility
をアニメーション化する
モーション アニメーションを実装するにあたり、まずはユーザー補助を念頭に置いてください。
アクセシブルなモーション
誰もがスライドアウト モーションを望んでいるわけではありません。Google のソリューションでは、メディアクエリ内の --duration
CSS 変数を調整することで、この設定が適用されます。このメディアクエリの値は、モーションに関するユーザーのオペレーティング システムの設定(利用可能な場合)を表します。
#sidenav-open {
--duration: .6s;
}
@media (prefers-reduced-motion: reduce) {
#sidenav-open {
--duration: 1ms;
}
}
これで、サイド ナビゲーションがスライドして開閉するときに、ユーザーが動きの軽減を望んでいる場合、すぐに要素がビューに移動し、動きのない状態が維持されます。
遷移、変換、翻訳
サイド ナビゲーション(デフォルト)
モバイルのサイド ナビゲーションのデフォルト状態を画面外の状態に設定するには、transform: translateX(-110vw)
で要素を配置します。
なお、一般的なオフスクリーン コード -100vw
に別の 10vw
を追加して、サイドナビゲーションの box-shadow
が非表示のときにメイン ビューポートをのぞかないようにします。
@media (max-width: 540px) {
#sidenav-open {
visibility: hidden;
transform: translateX(-110vw);
will-change: transform;
transition:
transform var(--duration) var(--easeOutExpo),
visibility 0s linear var(--duration);
}
}
サイド ナビゲーション
#sidenav
要素が :target
と一致した場合は、translateX()
の位置をホームベースの 0
に設定します。CSS が要素を -110vw
の外側から、URL ハッシュが変更されたときに 0
の「内側」の位置にスライドすることを確認します。var(--duration)
@media (max-width: 540px) {
#sidenav-open:target {
visibility: visible;
transform: translateX(0);
transition:
transform var(--duration) var(--easeOutExpo);
}
}
切り替え効果の表示
現在の目標は、スクリーン リーダーが開いているときにメニューを非表示にして、システムがオフスクリーン メニューにフォーカスを移動しないようにすることです。:target
が変更されたときの可視性遷移を設定することで、これを実現できます。
- ここでは、可視性を移行せず、要素がスライドインしてフォーカスを受け入れることができるように、すぐに表示されるようにします。
- 外出時は表示を遷移しますが、遅らせることで、遷移終了時に
hidden
に切り替わります。
ユーザー補助機能の UX の強化
リンク
このソリューションでは、状態を管理できるように URL を変更する必要があります。当然、ここでは <a>
要素を使用する必要があり、優れたユーザー補助機能を無料で利用できます。意図を明確に示すラベルでインタラクティブな要素を装飾しましょう。
<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu"></a>
<a href="#sidenav-open" id="sidenav-button" class="hamburger" title="Open Menu" aria-label="Open Menu">
<svg>...</svg>
</a>
これで、マウスとキーボードの両方について、主要な操作ボタンの目的が明確に示されるようになりました。
:is(:hover, :focus)
この便利な CSS 関数疑似セレクタを使用すると、マウスオーバー スタイルにフォーカスを共有して、すばやくインクルーシブなものにできます。
.hamburger:is(:hover, :focus) svg > line {
stroke: hsl(var(--brandHSL));
}
JavaScript にスプリンクルを適用する
閉じるには escape
を押します
キーボードの Escape
キーを押すとメニューが閉じますか?つなぎます
const sidenav = document.querySelector('#sidenav-open');
sidenav.addEventListener('keyup', event => {
if (event.code === 'Escape') document.location.hash = '';
});
ブラウザの履歴
開閉操作によってブラウザ履歴に複数のエントリがスタックされないようにするには、次の JavaScript を [閉じる] ボタンにインラインで追加します。
<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu" onchange="history.go(-1)"></a>
これにより、閉じるときに URL 履歴エントリが削除され、メニューが一度も開かれていないように見えます。
UX を重視
次のスニペットは、開くボタンと閉じるボタンにフォーカスを合わせるのに役立ちます。簡単に切り替えられるようにしたい。
sidenav.addEventListener('transitionend', e => {
const isOpen = document.location.hash === '#sidenav-open';
isOpen
? document.querySelector('#sidenav-close').focus()
: document.querySelector('#sidenav-button').focus();
})
サイド ナビゲーションが開いたら、閉じるボタンをフォーカスします。サイドナビゲーションが閉じたら、「開く」ボタンをフォーカスします。これを行うには、JavaScript の要素で focus()
を呼び出します。
おわりに
私のやり方わかったな、どうやって?!これで、おもしろいコンポーネント アーキテクチャが完成します。 スロット付きの最初のバージョンは誰が制作するのでしょうか。🙂
手法を多様化し、ウェブで構築するすべての方法を学んでいきましょう。グリッチを作成して自分のバージョンをツイートしてください。下のコミュニティ リミックスのセクションに追加します。
コミュニティ リミックス
- カスタム要素を使用した @_developit: デモとコード
- @mayeedwin1(HTML/CSS/JS 使用): デモとコード
- @a_nurella と Glitch Remix: デモとコード
- @EvroMalarkey(HTML/CSS/JS 使用): デモとコード