レスポンシブメニュー生成

レスポンシブメニュー生成: 用途

どのサイトにも、パソコンでもスマホでも動くメニューが必要です。このジェネレーターは、あなたのリンクでナビゲーションメニューを作ります。大きな画面では横並び、選んだ切り替えの幅より小さい画面ではハンバーガーボタンになります。

コードはアクセシビリティのベストプラクティスに沿っています。ラベル付きのnav要素、aria-expandedとaria-controls付きのボタン、Escキーやリンクのタップで閉じる動作、動きを減らす設定を尊重するアイコンのアニメーションです。プレビューには、パソコンとスマホのサイズの結果が同時に表示されます。

使い方

1. サイト名とリンクを書きます。
2. 色、切り替えの幅、最後のリンクをボタンにするかを選びます。
3. HTML、CSS、JavaScriptをコピーするか、サンプルページをダウンロードします。

使うタイミング

• 手作りのコーポレートサイト。
• フレームワークを使わないランディングページ。
• スマホで動かない古いメニューの置き換え。

よくある質問

メニューはアクセシブルですか？

はい。ボタンはaria-expandedとaria-controls付きのbutton要素で、メニューはEscキーやリンクのクリックで閉じ、ナビゲーションはaria-label付きのnav要素の中にあります。キーボードとスクリーンリーダーで使えます。

JavaScriptなしでも動きますか？

パソコンでは動きます。リンクは常に表示されます。スマホではボタンを開くのにJavaScriptが必要です。そのため、コードはスクリプトが読み込まれたときだけリンクを隠し（htmlのjsクラス）、スクリプトがなければリンクは縦に並んで表示されます。

切り替えの幅はどれにすればいいですか？

短いリンクが5つ程度までなら768pxで十分です。リンクが多い場合や名前が長い場合は、ハンバーガーになる前に項目が窮屈にならないよう、960pxか1024pxにしてください。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール