JavaScriptの記事で動的メニューを作成します

ここでは、DHTMLドロップダウン/プルダウンメニューについて話しているわけではありません。ここでは、JavaScriptを使用した簡単なナビゲーションメニューについて話しています。アクティブなページを識別し、それに応じて他のリンクとは異なるリンクを表示するため、ユーザーが簡単に移動できます。ここでは、ナビゲーションメニューの下のすべてのページに使用される単一の.jsファイルを使用します。そのため、すべてのページを更新する必要はありません。JavaScriptライブラリファイル（.jsファイル）のみを更新する必要があります。たとえば、これらの3つのナビゲーションリンクを考慮してください。リンク1はアクティブです。リンク2がアクティブです。リンク3はアクティブです。ご覧のとおり、これらは、アクティブなリンクに応じて、さまざまなページでナビゲーションメニューがどのように表示されるかのショットです。これらのメニューは、単一のJavaScriptファイルによって生成されます。メニューのクラス（.linksなど）を定義し、.links：Activeに異なるプロパティを割り当てることにより、カスケードスタイルのシート（CSS）のみを使用してこのようなメニューを作成することができます。そのため、CSSファイルを使用してメニューを作成できます。これは完璧ですが、ここでJavaScriptを使用することには利点があります。上記のショットでわかるように、アクティブリンクには最終的に「»」文字があります。これはアクティブリンク用にのみ作成されるため、動的に作成されます。 JavaScriptを使用すると、リンクが実際にアクティブに見えるようにするキャラクターまたは象徴的な画像を使用できます。

実装

このタイプのメニューを実装するには、まずリンクのスタイルを定義するために、links_style.cssなどのCSSファイルが必要です。次にJavaScriptファイルnav.jsがありますファイルnav.jsでは、まず3つの配列を宣言します。 「リンク」と呼ばれる1つの配列には、リンクの名前が含まれています。別の配列は「links_text」と呼ばれ、リンクのテキストで構成されています（リンク1など）。前者は、このファイルとの比較に使用されます。リンクファイルのタイトルを使用して、リンクアレイ内のさまざまな要素に名前を付けます（つまり、最初のリンクがindex.htmに表示される場合は、indexに名前を付けます）。 「links_url」と呼ばれる3番目の配列には、リンクがユーザーを使用するURLが含まれます。ここで、アレイリンクの各要素を現在のページのファイル名に拡張機能なしで比較することです。それに応じて、リンクにスタイルを割り当てます。また、アクティブページを強調表示するためにリンクテキストに追加することにした追加のテキストや画像を割り当てます。 locを比較文字列とします。 locは次のように見つけることができます：var loc = string（this.location）; loc = loc.split（ "/"）; loc = loc [loc.length-1] .split（ "。"）; loc = loc [loc.length-2];したがって、現在のページがhttps://www.sitepoint.com/index.htmの場合、locはインデックスになります。次に、これを配列リンクの各要素と比較します。この配列とlocの最初の要素は等しいため、このリンクを次の方法で書き込みます。 document.write（ '' links_text [i] 'â»'）;リンクアレイの他の要素はlocに等しくないため、document.write（ '

' links_text [i] '

'）;そして、それがあなたのダイナミックメニューです！すべてのページに配置する必要があるコードは次のとおりです。 このコードは、ページに表示するためにナビゲーションメニューが必要な場所に配置します。必要な他のコードは、です。これは、HTMLページのセクションに配置する必要があります。したがって、リスト1 nav.jsは以下です。 var links_text = new Array（ "link 1"、 "link 2"、 "link 3"）; var links_url = new Array（ "link1.htm"、 "link2.htm"、 "link3.htm"）; / *場所を解決 */ var loc = string（this.location）; loc = loc.split（ "/"）; loc = loc [loc.length-1] .split（ "。"）; loc = loc [loc.length-2]; / *関数の生成 */ function dyn_menu_gen（）{for（var i = 0; i 'links_text [i]' ' links_text [i] ' '）; } document.write（ ''）; }} / *メニューを生成 * / dyn_menu_gen（）;リスト2、links_style.cssは.explorer {font-family：verdana、arial、helvetica;フォントサイズ：8pt; font-weight：正常;テキスト装置：なし;色：＃000000;背景：＃b5d0ff;カーソル：手;幅：150px;高さ：30px;ボーダー：1 SOLID＃A6C0ED} .Explorer_Over {font-family：Verdana、arial、helvetica;フォントサイズ：8pt; font-weight：正常;テキスト装置：なし;色：＃000000;背景：＃a7c0eb;カーソル：手;幅：150px;高さ：30px;国境右：1ソリッド＃5C6980;国境圏：1ソリッド＃5C6980;国境左：1ソリッド＃B8D3FF;ボーダートップ：1 SOLID＃B8D3FF} .Explorer_Down {font-family：Verdana、arial、helvetica;フォントサイズ：8pt; font-weight：正常;テキスト装置：なし;色：＃000000;背景：＃a7c0eb;カーソル：手;幅：150px;高さ：30px;国境左：1ソリッド＃5C6980;ボーダートップ：1ソリッド＃5C6980;境界線右：1ソリッド＃B8D3FF; Border-Bottom：1 Solid＃B8D3FF} .Explorer_active {font-family：Verdana、arial、helvetica;フォントサイズ：8pt; font-weight：正常;テキスト装置：なし;色：＃000000;背景：#ffffff;カーソル：手;幅：150px;高さ：30px} .menu {font-family：verdana、arial、helvetica;フォントサイズ：8pt; font-weight：正常;テキスト装置：なし;色：＃000000}このスクリプトが、Webページの動的JavaScriptナビゲーションの作成を簡素化することを願っています！

JavaScriptの動的メニューに関するよくある質問

JavaScriptの動的メニューにサブメニューを追加するにはどうすればよいですか？

JavaScriptのダイナミックメニューにサブメニューを追加するには、新しいメニュー項目を作成し、子供として親メニュー項目に追加することが含まれます。 AppendChild（）メソッドを使用してこれを実現できます。これが簡単な例です：

var parentMenuitem = document.getElementById（ 'parentMenuitem'）;
var submenuitem = document.createelement（ 'li'）;
submenuitem.innerhtml = 'submenu item';
ParentMenuitem.appendChild（submenuitem）;
この例では、「ParentMenuitem」は、サブメニューを追加するメニュー項目のIDです。 「submenuitem」は、追加する新しいサブメニューアイテムです。

JavaScriptのダイナミックメニューからメニュー項目を削除するにはどうすればよいですか？

JavaScriptの動的メニューからメニュー項目を削除するには、RemoveChild（）メソッドを使用できます。このメソッドは、指定された要素の指定された子ノードを削除します。これが例です：

var menuitem = document.getElementById（ 'menuitem'）;
menuitem.parentnode.removechild（menuitem）;
この例では、「Menuitem」は削除するメニュー項目のIDです。

JavaScriptのダイナミックメニューでメニュー項目のテキストを変更するにはどうすればよいですか？

JavaScriptのダイナミックメニューでメニュー項目のテキストを変更することは、innerHTMLプロパティを使用して実行できます。これが例です：

var menuitem = document.getElementById（ 'menuitem'）;
menuitem.innerhtml = '新しいメニュー項目テキスト';
この例では、「Menuitem」はテキストを変更するメニュー項目のIDであり、「新しいメニュー項目テキスト」は設定する新しいテキストです。

JavaScriptのダイナミックメニューでイベントリスナーをメニュー項目に追加するにはどうすればよいですか？

JavaScriptのダイナミックメニューでメニュー項目にイベントリスナーを追加することは、AddEventListener（）メソッドを使用して実行できます。このメソッドは、指定された要素にイベントハンドラーを添付します。これが例です：

var menuitem = document.getElementById（ 'menuitem'）;
menuitem.addeventlistener（ 'click'、function（）{
アラート（ 'メニュー項目をクリックしました！'）;
}）;
この例では、「Menuitem」は、イベントリスナーを追加するメニュー項目のIDです。イベントリスナーは、メニュー項目がクリックされるとアラートが表示されます。

JavaScriptのダイナミックメニューでメニュー項目をスタイリングするにはどうすればよいですか？

JavaScriptのダイナミックメニューでメニュー項目をスタイリングすることは、スタイルプロパティを使用して実行できます。このプロパティは、要素のスタイル属性を設定または返します。これが例です：

var menuitem = document.getElementById（ 'menuitem'）;
menuitem.style.color = 'red';
menuitem.style.fontsize = '20px';
この例では、「Menuitem」はスタイリングしたいメニュー項目のIDです。スタイルプロパティは、メニュー項目の色とフォントサイズを変更するために使用されます。

配列を使用してJavaScriptで動的メニューを作成するにはどうすればよいですか？

Arrayを使用してJavaScriptで動的メニューを作成するには、配列を反復し、配列内の各要素の新しいメニュー項目を作成することが含まれます。これが例です：

var menuitems = ['home'、 'about'、 'contact'];
var menu = document.getElementById（ 'menu'）;

for（var i = 0; i var menuitem = document.createelement（ 'li'）;
menuitem.innerhtml = menuitems [i];
メニュー。AppendChild（Menuitem）;
}
この例では、「Menuitems」はメニュー項目のテキストの配列であり、「メニュー」はメニュー項目を追加するメニューのIDです。

JSONデータを使用してJavaScriptで動的メニューを作成するにはどうすればよいですか？

JSONデータを使用してJavaScriptで動的メニューを作成するには、JSONデータを解析し、解析されたデータ内の各オブジェクトの新しいメニュー項目を作成することが含まれます。これが例です：

var jsondata = '[{"text"： "home"}、{"text"： "about"}、{"text"： "contact"}]';
var menuitems = json.parse（jsondata）;
var menu = document.getElementById（ 'menu'）;

for（var i = 0; i var menuitem = document.createelement（ 'li'）;
menuitem.innerhtml = menuitems [i] .text;
メニュー。AppendChild（Menuitem）;
}
この例では、「JSondata」はメニュー項目のJSON文字列であり、「メニュー」はメニュー項目を追加するメニューのIDです。

サーバーからのデータを使用してJavaScriptに動的メニューを作成するにはどうすればよいですか？

サーバーからのデータを使用してJavaScriptで動的メニューを作成するには、サーバーにAJAX要求を作成してデータを取得し、サーバーによって返されるデータごとに新しいメニュー項目を作成します。フェッチAPIを使用した例を次に示します。

fetch（ 'https://example.com/menuitems'）
.then（response => respons.json（））
.then（data => {
var menu = document.getElementById（ 'menu'）;

for（var i = 0; i var menuitem = document.createelement（ 'li'）;
menuitem.innerhtml = data [i] .text;
メニュー。AppendChild（Menuitem）;
}
}）;
この例では、「https://example.com/menuitems」は、メニュー項目データを返すサーバーエンドポイントのURLです。

JavaScriptで動的ドロップダウンメニューを作成するにはどうすればよいですか？

JavaScriptで動的ドロップダウンメニューを作成するには、新しい選択要素を作成し、各メニュー項目のオプション要素を追加することが含まれます。これが例です：

var menuitems = ['home'、 'about'、 'contact'];
var dropdownmenu = document.createelement（ 'select'）;

for（var i = 0; i var option = document.createelement（ 'option'）;
option.value = menuitems [i];
option.text = menuitems [i];
dropdownmenu.appendchild（option）;
}

document.body.AppendChild（DropDownmenu）;
この例では、「Menuitems」はメニュー項目のテキストの配列です。

JavaScriptで動的コンテキストメニューを作成するにはどうすればよいですか？

JavaScriptで動的コンテキストメニューを作成するには、新しいメニュー要素を作成してメニュー項目を追加し、右のマウスボタンをクリックするとマウスの位置にメニューを表示します。これが例です：

var menuitems = ['cut'、 'copy'、 'paste'];
var contextmenu = document.createelement（ 'ul'）;
contextmenu.style.display = 'none';
contextmenu.style.position = 'absolute';

for（var i = 0; i var menuitem = document.createelement（ 'li'）;
menuitem.innerhtml = menuitems [i];
ContextMenu.AppendChild（Menuitem）;
}

document.body.AppendChild（ContextMenu）;

document.addeventlistener（ 'contextmenu'、function（e）{
E.PreventDefault（）;
contextmenu.style.left = e.pagex 'px';
contextmenu.style.top = e.pagey 'px';
contextmenu.style.display = 'block';
}）;

document.addeventlistener（ 'click'、function（）{
contextmenu.style.display = 'none';
}）;
この例では、「Menuitems」はコンテキストメニュー項目のテキストの配列です。

以上がJavaScriptの記事で動的メニューを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。