所有网页菜单格式统一替换

Submitted by admin on Thu, 04/17/2025 - 09:53

用JavaScript的方法（可以很好地覆盖现有网页代码的菜单格式设置，而不需要修改每个页面的HTML结构。这是一种非常灵活的解决方案，特别适合需要在现有网站上统一导航菜单的情况。

以下是实现这种方法的具体步骤：

1. 创建菜单HTML文件

首先，创建一个包含您想要的完整菜单HTML代码的文件，例如 menu.html：

html

<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li class="dropdown" id="genome-dropdown">
<a href="#">Genome</a>
<ul class="sub-menu">
<li class="dropdown" id="cherax-dropdown">
<a href="#"><i>Cherax quadricarinatus</i></a>
<ul class="sub-menu">
<li><a href="../../cgi-bin/Artocarpus/genome.cgi?ID=CquHC">HC-2022</a></li>
<li><a href="../../cgi-bin/Artocarpus/genome.cgi?ID=CquZL">ZL_2023a</a></li>
</ul>
</li>
<li><a href="../../cgi-bin/Artocarpus/genome.cgi?ID=Pch"><i>Fenneropenaeus chinensis</i></a></li>
<!-- 其他菜单项 -->
</ul>
</li>
<!-- 更多菜单项 -->
</ul>
</div>

2. 创建JavaScript加载器

然后，创建一个JavaScript文件 menu-loader.js，用于加载和替换菜单：

javascript

document.addEventListener('DOMContentLoaded', function() {
// 查找当前页面中的菜单容器
// 这里假设现有页面中有一个类为"menu"的元素
const menuContainer = document.querySelector('.menu');

if (menuContainer) {
// 使用fetch获取菜单HTML
fetch('menu.html')
.then(response => {
if (!response.ok) {
throw new Error('菜单加载失败');
}
return response.text();
})
.then(html => {
// 替换现有菜单内容
menuContainer.innerHTML = html;

// 设置下拉菜单行为
setupDropdownMenus();

// 高亮当前活动页面的菜单项
highlightActivePage();
})
.catch(error => {
console.error('菜单加载出错:', error);
});
}
});

// 设置下拉菜单行为
function setupDropdownMenus() {
const dropdowns = document.querySelectorAll('.dropdown');

dropdowns.forEach(dropdown => {
// 鼠标悬停时显示子菜单
dropdown.addEventListener('mouseover', function() {
const subMenu = this.querySelector('.sub-menu');
if (subMenu) {
subMenu.style.display = 'block';
}
});

// 鼠标离开时隐藏子菜单
dropdown.addEventListener('mouseout', function() {
const subMenu = this.querySelector('.sub-menu');
if (subMenu) {
subMenu.style.display = 'none';
}
});
});
}

// 高亮显示当前页面对应的菜单项
function highlightActivePage() {
const currentPath = window.location.pathname;
const filename = currentPath.split('/').pop();

const menuLinks = document.querySelectorAll('.nav a');
menuLinks.forEach(link => {
const href = link.getAttribute('href');
if (href === filename || href.includes(filename)) {
link.classList.add('active');

// 如果在下拉菜单中，也高亮父菜单项
const parentLi = link.closest('.dropdown');
if (parentLi) {
const parentLink = parentLi.querySelector(':scope > a');
if (parentLink) {
parentLink.classList.add('active-parent');
}
}
}
});
}

3. 在现有页面中引入JavaScript

在所有网页的<head>或</body>标签前添加以下代码：

 

 

 

html

<script src="path/to/menu-loader.js"></script>

您可以使用服务器端包含(SSI)或其他方法将此脚本标签添加到所有页面。

4. 确保CSS样式一致

为确保菜单在所有页面上显示一致，您需要确保所有页面都包含相同的CSS文件：

html

<link href="css/dropdown.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<!-- 其他CSS文件 -->

5. 处理不同页面的路径问题

如果您的网站有不同层级的页面，可能需要调整菜单中的相对路径。一种解决方案是在JavaScript中检测当前页面的层级，并相应调整路径：

javascript

function adjustMenuPaths() {
// 获取当前页面的目录深度
const pathDepth = window.location.pathname.split('/').length - 2; // 减去域名和文件名

// 基于深度调整路径
if (pathDepth > 1) { // 如果不是在根目录
const menuLinks = document.querySelectorAll('.nav a');
menuLinks.forEach(link => {
const href = link.getAttribute('href');
// 如果不是以http开头的链接且不是空链接
if (href && !href.startsWith('http') && href !== '#') {
// 添加适当数量的../
const prefix = '../'.repeat(pathDepth - 1);
link.setAttribute('href', prefix + href);
}
});
}
}

优势

  1. 不需修改现有HTML结构 - 只需添加一个JavaScript引用
  2. 集中管理 - 菜单内容和行为在单一位置维护
  3. 灵活性 - 可轻松调整菜单样式和行为
  4. 可扩展性 - 可添加更多功能，如响应式行为、动态内容等

注意事项

  1. 初始加载闪烁 - 页面可能先显示原始菜单，然后才被替换
    • 解决方案：在CSS中默认隐藏原始菜单，等JavaScript加载后再显示
  2. SEO考虑 - 搜索引擎可能不会执行JavaScript
    • 解决方案：确保原始HTML中有基本导航链接
  3. JavaScript依赖 - 如用户禁用JavaScript，菜单将不会正常显示
    • 解决方案：提供基本的非JavaScript菜单作为备选

这种方法特别适合快速统一现有网站的导航菜单，而不需要重构所有页面的代码。