js实现左侧
实现左侧菜单栏的JavaScript方法
使用JavaScript实现左侧菜单栏通常涉及DOM操作和事件监听。以下是几种常见实现方式：
基础DOM操作实现
通过JavaScript动态创建菜单元素并添加到页面左侧：
const menuItems = ['首页', '产品', '服务', '关于', '联系'];
const menuContainer = document.createElement('div');
menuContainer.className = 'left-menu';
menuItems.forEach(item => {
const menuItem = document.createElement('div');
menuItem.className = 'menu-item';
menuItem.textContent = item;
menuContainer.appendChild(menuItem);
});
document.body.prepend(menuContainer);响应式折叠菜单
实现可折叠的左侧菜单，适合移动端和PC端适配：
const menuToggle = document.querySelector('.menu-toggle');
const leftMenu = document.querySelector('.left-menu');
menuToggle.addEventListener('click', () => {
leftMenu.classList.toggle('collapsed');
menuToggle.textContent = leftMenu.classList.contains('collapsed')
? '展开菜单' : '折叠菜单';
});动态高亮当前菜单项
根据页面URL或滚动位置自动高亮当前菜单项：
const menuItems = document.querySelectorAll('.left-menu .menu-item');
window.addEventListener('scroll', () => {
const fromTop = window.scrollY;
menuItems.forEach(item => {
const section = document.querySelector(item.getAttribute('href'));
if (
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
item.classList.add('active');
} else {
item.classList.remove('active');
}
});
});使用现代框架实现
以Vue为例实现响应式左侧菜单：
new Vue({
el: '#app',
data: {
menuItems: [
{ name: '首页', icon: 'home', active: true },
{ name: '仪表盘', icon: 'dashboard', active: false },
{ name: '设置', icon: 'settings', active: false }
],
isCollapsed: false
},
methods: {
toggleMenu() {
this.isCollapsed = !this.isCollapsed;
},
setActive(index) {
this.menuItems.forEach((item, i) => {
item.active = i === index;
});
}
}
});性能优化建议
对于大型菜单考虑虚拟滚动技术：
const menuObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 加载可见区域的菜单内容
entry.target.innerHTML = getMenuContent(entry.target.dataset.section);
}
});
});
document.querySelectorAll('.menu-section').forEach(section => {
menuObserver.observe(section);
});注意事项
- 确保菜单在无JavaScript情况下仍可访问（渐进增强）
- 为菜单项添加适当的ARIA属性以提升可访问性
- 考虑使用CSS过渡效果提升用户体验
- 移动端需处理触摸事件支持
以上方法可根据具体需求组合使用，现代前端项目通常结合框架如React、Vue或Angular实现更复杂的菜单交互。
