在JavaScript文章中構建動態菜單

在這裡，我們不是在談論DHTML下拉/下拉菜單。在這裡，我們正在談論使用JavaScript的簡單導航菜單。它標識了活動頁面，因此顯示與其他鏈接不同的鏈接，從而使用戶易於導航。在這裡，我們將使用一個.js文件，該文件將用於導航菜單下的所有頁面。因此，您無需更新所有頁面：您只需更新一個JavaScript庫文件（.js文件）。例如，考慮以下3個導航鏈接：鏈接1處於活動狀態。鏈接2處於活動狀態。鏈接3處於活動狀態。如您所見，這些是導航菜單在不同頁面上如何顯示的鏡頭，具體取決於鏈接的活動。這些菜單由一個JavaScript文件生成。可以通過定義菜單的類（例如.links）並為.links：active分配不同的屬性，從而僅使用級聯樣式表（CSS）創建這樣的菜單。因此，您只需使用CSS文件創建菜單即可。儘管這是完美的，但是在這裡使用JavaScript有一個優勢。正如您在上面的鏡頭中看到的那樣，主動鏈接最終具有“»”字符。這僅是為活動鏈接創建的，因此它是動態創建的。使用JavaScript，您可以使用任何可以使鏈接看起來很活躍的角色或標誌性圖像。

執行

要實現此類菜單，首先您需要的是CSS文件，例如links_style.css，以定義鏈接的樣式。接下來是JavaScript文件NAV.J。在文件nav.js中，首先我們聲明了三個數組。一個稱為“鏈接”的數組包括鏈接的名稱。另一個數組稱為“ links_text”，由鏈接的文本組成（例如鍊接1）。前者將用於與此文件進行比較。使用鏈接文件中的標題在鏈接數組中的各個元素命名，不包括擴展名（即，如果第一個鏈接將您帶到index.htm，則將其命名為索引）。第三個數組稱為“ links_url”，包括鏈接將帶動用戶的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（' '）;這就是您的動態菜單！您必須在所有頁面中放置的代碼為：將此代碼放置在需要出現在頁面上的何處。您需要的另一個代碼是，必須放置在HTML頁面的部分中。因此，列表1 nav.js是： / *鏈接詳細信息 * / var links = new Array（“ link1”，“ link2”，“ link3”）; var links_text = new Array（“鏈接1”，“鏈接2”，“鏈接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]; / *菜單生成函數 */函數dyn_menu_gen（）{for（var i = 0; i 'links_text [i]' '）; } document.write（'

'links_text [i]'

'）; }} / *生成菜單 * / dyn_menu_gen（）;列表2，links_style.css是：.explorer {font-family：verdana，arial，helvetica;字體大小：8pt;字體重量：正常；文本介紹：無；顏色：＃000000;背景：＃B5D0FF;光標：手；寬度：150px;身高：30px;邊界：1個實心＃a6c0ed} .explorer_over {font-family：verdana，arial，helvetica;字體大小：8pt;字體重量：正常；文本介紹：無；顏色：＃000000;背景：＃A7C0EB;光標：手；寬度：150px;身高：30px;邊境權利：1個實心＃5C6980;邊界底：1個實心＃5C6980;邊界左：1個實心＃b8d3ff;邊界頂：1個實心＃b8d3ff} .explorer_down {font-family：verdana，arial，helvetica;字體大小：8pt;字體重量：正常；文本介紹：無；顏色：＃000000;背景：＃A7C0EB;光標：手；寬度：150px;身高：30px;邊界左：1個實心＃5C6980;邊界頂：1個實心＃5C6980;邊境權利：1個實心＃b8d3ff;邊界底：1個實心＃b8d3ff} .explorer_active {font-family：verdana，arial，helvetica;字體大小：8pt;字體重量：正常；文本介紹：無；顏色：＃000000;背景：#ffffff;光標：手；寬度：150px;身高：30px} .menu {font-fomily：verdana，arial，helvetica;字體大小：8pt;字體重量：正常；文本介紹：無；顏色：＃000000}我希望此腳本簡化了您網頁的動態JavaScript導航的創建！

關於JavaScript中動態菜單的常見問題

如何將子菜單添加到JavaScript中的動態菜單中？

將子菜單添加到JavaScript中的動態菜單涉及創建一個新菜單項，然後將其作為小孩附加到父菜單項。您可以使用附錄（）方法來實現這一目標。這是一個簡單的例子：

var parentmenuitem = document.getElementById（'parendmenuitem'）;
var sumpenuitem = document.createelement（'li'）;
submenuitem.innerhtml ='submenu item';
parentmenuitem.AppendChild（子enuitem）;
在此示例中，“ parentmenuitem”是您要添加子菜單的菜單項的ID。 “子元素”是您要添加的新的子菜單項目。

如何從JavaScript中的動態菜單中刪除菜單項？

要從JavaScript中的動態菜單中刪除菜單項，可以使用removechild（）方法。此方法刪除了指定元素的指定子節點。這是一個例子：

var menuitem = document.getElementById（'menuitem'）;
menuitem.parentnode.removechild（menuitem）;
在此示例中，“ menuitem”是您要刪除的菜單項的ID。

如何在JavaScript中的動態菜單中更改菜單項的文本？

可以使用InnerHTML屬性在JavaScript中的動態菜單中更改菜單項的文本。這是一個例子：

var menuitem = document.getElementById（'menuitem'）;
menuitem.innerhtml ='新菜單項文本';
在此示例中，“ menuitem”是您要更改文本的菜單項的ID，“新菜單項文本”是您要設置的新文本。

如何在JavaScript中的動態菜單中將事件偵聽器添加到菜單項中？

可以使用AddeventListener（）方法在JavaScript中的動態菜單中將事件偵聽器添加到菜單項中。此方法將事件處理程序附加到指定元素。這是一個例子：

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中創建動態菜單？

使用數組在JavaScript中創建動態菜單涉及在數組上迭代並為數組中的每個元素創建一個新的菜單項。這是一個例子：

var menuitems = ['home'，'關於'，'contact'];
var Menu = document.getElementById（'菜單'）;

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”：“ of” about“}，{“ text”：“ contact”}]';
var menuitems = json.parse（jsondata）;
var Menu = document.getElementById（'菜單'）;

for（var i = 0; i var menuitem = document.createelement（'li'）;
menuitem.innerhtml = menuitems [i] .text;
菜單。AppendChild（menuitem）;
}
在此示例中，“ jsondata”是菜單項對象的json字符串，“菜單”是要添加菜單項的菜單的ID。

如何使用服務器中的數據在JavaScript中創建動態菜單？

使用服務器中的數據在JavaScript中創建動態菜單涉及向服務器提出AJAX請求以獲取數據，然後為服務器返回的每個數據創建一個新的菜單項。這是使用fetch api的示例：

fetch（'https://example.com/menuitems'）
。
。然後（data => {
var Menu = document.getElementById（'菜單'）;

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'，'關於'，'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.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.body.appendchild（contextMenu）;

document.AddeventListener（'ContextMenu'，函數（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中文網其他相關文章！