ホームページ >ウェブフロントエンド >フロントエンドQ&A >JavaScriptの隠しメニュー
JavaScriptの隠しメニュー
- 王林オリジナル
- 2023-05-16 09:50:37575ブラウズ
JavaScripthiddenmenu
このデジタル時代において、Web サイトは人々が情報を取得しコミュニケーションを図るための重要な方法の 1 つとなっています。ユーザーエクスペリエンスを向上させるために、Web サイトのデザインでは対話性と実用性がますます重視されています。このため、メニューバーのデザインもWebサイトデザインの重要な部分となっています。しかし、メニューバーは非常に煩雑でページスペースを多く占有し、ユーザーに不便や圧迫感を与える場合があります。したがって、隠しメニューの出現は、デザイナーにとってこの問題を解決する効果的な方法の 1 つになりました。
隠しメニューは、ユーザーが必要ないときは非表示にし、必要に応じて展開することができます。このように、メニューを非表示にすると、ページのスペースが節約されるだけでなく、情報をより適切に分類できるようになります。そのため、隠しメニューを備えたウェブサイトが増えています。隠しメニューを実装するには様々な方法がありますが、本記事ではJavaScriptをベースに隠しメニューを実装する方法を紹介します。
1. HTML 構造
まず、以下に示すように、ページ内にメニュー バーを定義する必要があります:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>これは、4 つのオプションを含む単純なメニュー バーです。 : ホーム、ブログ、仕事、連絡先。このメニューバーを非表示にするために JavaScript を使用します。
2. CSS スタイル
メニューを非表示にする前に、最初に CSS スタイルを定義する必要があります。次のようにメニュー項目の表示属性を非表示にできます:
nav ul {
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:row;
justify-content:flex-end;
}
nav ul li {
margin:0 10px;
}
nav ul li a {
color:#333;
text-decoration:none;
}
.hidden-menu {
display:none;
}これらの CSS スタイルは、メニュー項目のスタイルを設定し、メニューを非表示にするために使用されます。このうち、非表示メニューのスタイルはdisplay:noneで、これがメニューを非表示にする鍵となります。
3. JavaScript の実装
ここで、JavaScript を使用して隠しメニューの実装を開始できます。メニュー バーにボタンを追加する必要があります。ユーザーがこのボタンをクリックすると、メニュー バーが消えます。ボタンをクリックした後、JavaScriptを通じてメニューバーの表示状態を切り替えます。この関数を実装するには、JavaScript の addEventListener メソッドを使用してボタン クリック イベントをリッスンする必要があります。
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
<button id="menu-button">Menu</button>
</nav>メニュー バーコードでは、button 要素を追加し、その id 属性を「menu-button」に設定しました。これで、JavaScript コードの記述を開始できます。このボタン要素を取得し、ボタンがクリックされたときにメニューバーの表示状態を切り替える必要があります。このステップは、次のコードで完了できます。
const button = document.getElementById("menu-button");
const menu = document.querySelector("nav ul");
button.addEventListener("click", () => {
menu.classList.toggle("hidden-menu");
});この JavaScript コードは、ボタン要素とメニュー バー要素を取得し、ボタンがクリックされたときにメニュー バーの状態を切り替えるために使用されます。 classList.toggle メソッドを使用して、メニュー バーのクラス属性を切り替えて、メニュー バーの表示と非表示を切り替えます。
4. CSS スタイルを調整する
コードが完成したら、非表示メニューの効果が実際のニーズにより一致するように CSS スタイルを調整する必要があります。デフォルトでは、メニュー バーの初期状態は非表示になっており、ユーザーがボタンをクリックした後にのみ表示されます。したがって、メニューバーのデフォルト状態を調整する必要があります。以下に示すように、メニュー バーの表示プロパティを none に設定して、メニュー バーがデフォルトで非表示になるように設定するだけです。
nav ul {
display:none;
flex-direction:row;
justify-content:flex-end;
}
.hidden-menu {
display:flex;
}このようにして、ユーザーが Web ページをロードすると、メニュー バーが表示されます。デフォルトは非表示であり、ユーザーがボタンをクリックした後にのみ表示されます。
5. 実装効果
これで、JavaScript 隠しメニューの実装が完了しました。次に、実装の効果を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript隐藏菜单</title>
<style>
nav ul {
display:none;
flex-direction:row;
justify-content:flex-end;
list-style:none;
margin:0;
padding:0;
}
nav ul li {
margin:0 10px;
}
nav ul li a {
color:#333;
text-decoration:none;
}
.hidden-menu {
display:flex;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
<button id="menu-button">Menu</button>
</nav>
<script>
const button = document.getElementById("menu-button");
const menu = document.querySelector("nav ul");
button.addEventListener("click", () => {
menu.classList.toggle("hidden-menu");
});
</script>
</body>
</html>この例では、ユーザーが Web ページをロードすると、メニュー バーはデフォルトで非表示になります。次の図に示すように、メニュー バーはユーザーがボタンをクリックした後にのみ表示されます。
ボタンを再度クリックすると、メニュー バーは非表示に戻ります。州。
6. 拡張アプリケーション
この方法により、単純な非表示メニュー効果を実現できます。ただし、メニュー バーにオプションが多すぎると、非表示のメニューがニーズを完全に満たすことができなくなりますが、現時点ではレスポンシブ デザインを使用してこの問題を解決できます。レスポンシブ デザインにより、デバイスごとに異なるメニュー バーを表示できます。たとえば、携帯電話では、ドロップダウン メニューを使用してすべてのオプションを表示できます。この方法により、さまざまなデバイスのニーズに適切に適応でき、ユーザー エクスペリエンスが向上します。
以上がJavaScriptの隠しメニューの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。