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

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

実装

このタイプのメニューを実装するには、まずリンクのスタイルを定義するために、cssファイル（links_style.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（ '＆＃x3c; table onmouseover = "this.classname =' explorer_active '; return true" onmouseout = "this.classname =' explorer_active '; return true" onmousedown = "this.classname =' explorer_active '; return true" '' ">＆＃x3c; tr>＆＃x3c; td>＆＃x3c; a href =" 'links_url [i]' '">' links_text [i] '＆＃x3c; b>â»＆＃x3c;/b>＆＃x3c;/a>＆＃x3c;リンクアレイの他の要素はlocに等しくないため、document.write（ '＆＃x3c; table onmouseover = "this.classname =' explorer_over '; return true" onmouse = "this.classname =' explorer '; return true" onmousown = " onclick = "location.href = '' links_url [i] ''" ">＆＃x3c; tr>＆＃x3c; td>＆＃x3c;そして、それがあなたのダイナミックメニューです！すべてのページに配置する必要があるコードは次のとおりです。＆＃x3c;スクリプト言語= "javascript" src = "nav.js">＆＃x3c;/script>このコードを配置して、ページに表示するためにナビゲーションメニューが必要な場所に配置されます。必要なもう1つのコードは、＆＃x3c; link rel = "styleSheet" href = "links_style.css" />です。これは、htmlページの＆＃x3c; head>セクションに配置する必要があります。したがって、リスト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＆＃x3c; links.length; i）{if（loc == links [i]）{document.write（ '＆＃x3c; table onmouseover = "this.classname =' returter true "onmousedown =" this.classname = 'explorer_active'; return true "onclick =" location.href = '' links_url [i] '"">＆＃x3c; tr>＆＃x3c; td>＆＃x3c; a href = "' links_url [i] '">' links_text [i] ＆＃x3c; b>»＆＃x3c;/b>＆＃x3c;/a>＆＃x3c;/td>＆＃x3c;/tr>＆＃x3c;/table> '）; } else {document.write（ '＆＃x3c; table onmouseover = "this。classname=' explorer_over '; return true" onmouseout = "this.classname =' explorer '; return true" onmousedown = "this.classname =' explorer_down '; return true" '' ">＆＃x3c; tr>＆＃x3c; td>＆＃x3c; a href =" 'links_url [i]' '">' links_text [i] '＆＃x3c;/a>＆＃x3c;/td>＆＃x3c;/tr>＆＃x3c;/table>'）; } document.write（ '＆＃x3c; table cellspacing = "0" cellpadding = "0" bgcolor = "＃ffffff">＆＃x3c; tr>＆＃x3c; td>＆＃x3c;/td>＆＃x3c;/tr>＆＃x3c;/table>'）; }} / *メニューを生成 * / 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.appendem.appendem.appendchild（ 'bbr>サブメニューを追加するメニュー項目のID。 'submenuitem'は、追加する新しいサブメニューアイテムです。

JavaScriptのダイナミックメニューからメニュー項目を削除するにはどうすればよいですか？このメソッドは、指定された要素の指定された子ノードを削除します。例は次のとおりです。

var menuitem = document.getElementbyid（ 'menuitem'）;
menuitem.parentnode.removechild（menuitem）;
この例では、 'menuitem'は削除するメニュー項目のIDです。 JavaScriptのダイナミックメニューのメニュー項目の項目は、innerhtmlプロパティを使用して実行できます。例は次のとおりです。

var menuitem = document.getElementbyid（ 'menuitem'）;
menuitem.innerhtml = '新しいメニュー項目テキスト';
この例では、「menuitem」はテキストを変更したいメニュー項目のIDであり、「新しいメニューアイテムテキスト」は、新しいテキストを設定する新しいテキストです。 JavaScriptのダイナミックメニュー？

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

var menuitem = document.getElementbyid（ 'menuitem'）;
menuitem.addeventlistener（ 'click'、function（）{
alert（ 'メニュー項目クリック！'）;
}）;
イベントリスナーは、メニュー項目がクリックされるとアラートが表示されます。

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

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

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

配列を使用してJavaScriptにダイナミックメニューを作成するにはどうすればよいですか？

アレイを使用してJavaScriptにダイナミックメニューを作成するには、配列を反復し、配列の各要素の新しいメニュー項目を作成します。例は次のとおりです。

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

for（var i = 0; i＆＃x3c; menuitems.length; i）{
var menuitem.; menuitems [i];
menu.appendchild（menuitem）;
}
この例では、「menuitems」はメニュー項目テキストの配列であり、「メニュー」はメニュー項目のIDです。 JSONデータを解析し、解析されたデータ内の各オブジェクトの新しいメニュー項目を作成することを伴います。例は次のとおりです。

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



＆＃x3c; menuitems.length {
var menuitem（ 'li'）;
menuitems [i] .text;
mentedchild（menuitem）;
}

サーバーからのデータを使用してJavaScriptで動的メニューを作成するには、サーバーからのデータを使用してJavaScriptのダイナミックメニューを作成するには、サーバーにAJAX要求を作成してデータを取得し、サーバーが返品したデータごとに新しいメニューを作成するには、どのようにJavaScriptにダイナミックメニューを作成できますか。 Fetch APIを使用した例は次のとおりです。

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



{
var menuitem = document.createelement（ 'li'）;
menuitem.innerhtml = data [i] .text;
menu.appendchild（menuitem）;
}
}）;

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

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


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

for（var i = 0; i＆＃x3c; menuitems.length; i）{
option = document.createlement（
;
menuitems [i];
option.text = menuitems [i];
dropdownmenu.appendchild（option）;
}
document.body.appendchild（dropdownmenu）;
この例では、「メニューエム」はメニューの配列の配列です。 JavaScript？

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


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

menuitems.length; {
var menuitem = document（ 'li'）;
menuitem.innerhtml [i];
ContextMenu.AppendChild（Menuitem）;
}

document.body.appendChild（contextmenu）;

document.addeventlistener（ 'contextmenu'、function（e）{
e.preventdefault（）; Contextmenu.style.top = e.pagey 'px';
contextmenu.style.display = 'block';
}）;
document.addeventlistener（ 'click'、function（）{）{
contextmenu.style.display = 'in
コンテキストメニュー項目のテキストの配列

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