JavaScriptナビゲーションに代わる3つのCSS代替

Webサイトナビゲーションデザインでは、JavaScriptを使用してハンバーガーメニューを実装することに慣れていますか？実際、より簡単で簡単にアクセスしやすいです。この記事では、ユーザーエクスペリエンスを向上させ、ウェブサイトのアクセシビリティを強化するために、JavaScriptなしで3つのナビゲーションモードを紹介します。

徐々に強化の原則に従って、古いバージョンまたは弱いテクノロジーを使用しているユーザーのビルディングWebページに優先順位を付けてから、拡張機能を徐々に追加します。基本的なテクノロジーが質の高い体験を提供できる場合、JavaScriptに頼る必要はありません。ナビゲーションでJavaScriptを避けることにより、JavaScriptが無効になっている場合、またはネットワークの問題によりスクリプトがロードされない場合でも、ユーザーは通常Webサイトを閲覧できるようになります。

JavaScriptバーガーメニューの3つの選択肢を見てみましょう。

代替ソリューション1：独立メニューページ

ナビゲーションは、常に各ページの頭にある必要はありません。フロントエンドの軽量Webサイトまたはより多くのナビゲーションプロジェクトが利用可能な状況では、すべてのナビゲーションリンクをリストするために別のページを作成する方がより実用的かもしれません。 WordPressテーマSustyはこのアプローチを採用しています。

このモードは、ファイルシステムルーティングを使用する静的Webサイトに特に適しています。プロジェクトが静的なWebサイトジェネレーターを使用して構築されている場合、ページはユーザーが検出できるよりも速く読み込まれている可能性があり、テンプレートもモジュール化されています。

メニューボタンを閉じるボタンに置​​き換えるだけです。閉じるボタンをクリックするときに、ユーザーを前のページに戻す方法はいくつかあります。サーバー側のCMS（WordPressなど）を使用する場合、 $_SERVER['HTTP_REFERER']を使用して前のURLを取得し、閉じるボタンのURLに設定できます。

ただし、サーバー側の設定が使用されない場合、以前のURLを取得するにはJavaScriptコードのいくつかの行が必要になる場合があります。

 <code><a href="https://www.php.cn/link/61c68ac879a7ec23b78912aa04f59d78" onclick="handleClick(event)">×</a> function handleClick(event) { event.preventDefault(); window.history.back(); return false; }</code>

したがって、このアプローチとパターンは優れていますが、特定のプロジェクトにはJavaScriptが必要になる場合があります。

代替2：水平ローリング

この方法は、リンクリストが短い状況に適しており、ユーザーは何も開いたり、現在のページを離れることなく、すべてのナビゲーションアイテムにアクセスできます。 Githubは、このメソッドをサブメニューで使用します。

FlexBoxとCSSのスクロールオーバーフローの組み合わせを使用してください！

代替3：純粋なCSSバーガーメニュー

ハンバーガーメニューモードは通常、JavaScriptを使用しますが、これは必要ありません。 CSS擬似選択装置とHTMLを使用して、リッチなモバイルメニューを作成し、本当に必要な他の機能にJavaScriptを使用できます。

人気のある慣習は、それが唯一の方法であることを意味しないことがわかります。多くの場合、特にナビゲーションに関しては、より簡単で簡単なアクセス方法があります。 JavaScriptのない機能性、軽量、没入型ナビゲーションを作成することは楽なものであり、いくつかの追加の利点があります。興味深い純粋なCSSナビゲーションモードを作成した場合は、コメントで共有してください！

以上がJavaScriptナビゲーションに代わる3つのCSS代替の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。