Link 1 is active.
Link 2 is active.
Link 3 is active.
As you can see, these are shots of how the navigation menu appears at different pages depending on which links is active. These menus are generated by a single javascript file.
It’s possible to create such a menu using only Cascading Style Sheets (CSS), by defining a class (say .links) for the menus, and assigning different properties for .links:active. So you can create the menu just by using a CSS file.
Though this is perfect, there is an advantage to using Javascript here. As you can see in the above shots, the active link has the “»” character in the end. This is created only for the active link, therefore it’s created dynamically. With JavaScript, you can use any character or iconic image that will make the link really look active.
| ' links_text[i] ' » |
| ' links_text[i] ' |
| ' links_text[i] ' |
Adding a submenu to a dynamic menu in JavaScript involves creating a new menu item and then appending it as a child to the parent menu item. You can use the appendChild() method to achieve this. Here’s a simple example:
var parentMenuItem = document.getElementById('parentMenuItem');
var submenuItem = document.createElement('li');
submenuItem.innerHTML = 'Submenu Item';
parentMenuItem.appendChild(submenuItem);
In this example, ‘parentMenuItem’ is the ID of the menu item you want to add a submenu to. ‘SubmenuItem’ is the new submenu item that you’re adding.
To remove a menu item from a dynamic menu in JavaScript, you can use the removeChild() method. This method removes a specified child node of the specified element. Here’s an example:
var menuItem = document.getElementById('menuItem');
menuItem.parentNode.removeChild(menuItem);
In this example, ‘menuItem’ is the ID of the menu item you want to remove.
Changing the text of a menu item in a dynamic menu in JavaScript can be done using the innerHTML property. Here’s an example:
var menuItem = document.getElementById('menuItem');
menuItem.innerHTML = 'New Menu Item Text';
In this example, ‘menuItem’ is the ID of the menu item you want to change the text of, and ‘New Menu Item Text’ is the new text you want to set.
Adding an event listener to a menu item in a dynamic menu in JavaScript can be done using the addEventListener() method. This method attaches an event handler to the specified element. Here’s an example:
var menuItem = document.getElementById('menuItem');
menuItem.addEventListener('click', function() {
alert('Menu item clicked!');
});
In this example, ‘menuItem’ is the ID of the menu item you want to add an event listener to. The event listener will display an alert when the menu item is clicked.
Styling a menu item in a dynamic menu in JavaScript can be done using the style property. This property sets or returns the style attributes of an element. Here’s an example:
var menuItem = document.getElementById('menuItem');
menuItem.style.color = 'red';
menuItem.style.fontSize = '20px';
In this example, ‘menuItem’ is the ID of the menu item you want to style. The style property is used to change the color and font size of the menu item.
Creating a dynamic menu in JavaScript using an array involves iterating over the array and creating a new menu item for each element in the array. Here’s an example:
var menuItems = ['Home', 'About', 'Contact'];
var menu = document.getElementById('menu');
for (var i = 0; i < menuItems.length; i ) {
var menuItem = document.createElement('li');
menuItem.innerHTML = menuItems[i];
menu.appendChild(menuItem);
}
In this example, ‘menuItems’ is an array of menu item texts, and ‘menu’ is the ID of the menu you want to add the menu items to.
Creating a dynamic menu in JavaScript using JSON data involves parsing the JSON data and creating a new menu item for each object in the parsed data. Here’s an example:
var jsonData = '[{"text": "Home"}, {"text": "About"}, {"text": "Contact"}]';
var menuItems = JSON.parse(jsonData);
var menu = document.getElementById('menu');
for (var i = 0; i < menuItems.length; i ) {
var menuItem = document.createElement('li');
menuItem.innerHTML = menuItems[i].text;
menu.appendChild(menuItem);
}
In this example, ‘jsonData’ is a JSON string of menu item objects, and ‘menu’ is the ID of the menu you want to add the menu items to.
Creating a dynamic menu in JavaScript using data from a server involves making an AJAX request to the server to fetch the data, and then creating a new menu item for each piece of data returned by the server. Here’s an example using the fetch API:
fetch('https://example.com/menuItems')
.then(response => response.json())
.then(data => {
var menu = document.getElementById('menu');
for (var i = 0; i < data.length; i ) {
var menuItem = document.createElement('li');
menuItem.innerHTML = data[i].text;
menu.appendChild(menuItem);
}
});
In this example, ‘https://example.com/menuItems‘ is the URL of the server endpoint that returns the menu items data.
Creating a dynamic dropdown menu in JavaScript involves creating a new select element and adding option elements to it for each menu item. Here’s an example:
var menuItems = ['Home', 'About', 'Contact'];
var dropdownMenu = document.createElement('select');
for (var i = 0; i < menuItems.length; i ) {
var option = document.createElement('option');
option.value = menuItems[i];
option.text = menuItems[i];
dropdownMenu.appendChild(option);
}
document.body.appendChild(dropdownMenu);
In this example, ‘menuItems’ is an array of menu item texts.
Creating a dynamic context menu in JavaScript involves creating a new menu element and adding menu items to it, and then displaying the menu at the mouse position when the right mouse button is clicked. Here’s an example:
var menuItems = ['Cut', 'Copy', 'Paste'];
var contextMenu = document.createElement('ul');
contextMenu.style.display = 'none';
contextMenu.style.position = 'absolute';
for (var i = 0; i < menuItems.length; 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';
});
In this example, ‘menuItems’ is an array of context menu item texts.
The above is the detailed content of Build a Dynamic Menu in JavaScript Article. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
