当前位置：首页 > JavaScript

js实现菜单横向显示

2026-01-31 02:19:57JavaScript

实现横向菜单的基本方法

使用HTML和CSS结合JavaScript可以实现横向菜单。HTML定义菜单结构，CSS控制样式布局，JavaScript处理交互逻辑。

<ul id="menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">联系</a></li>
</ul>

#menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

#menu li {
  float: left;
}

#menu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#menu li a:hover {
  background-color: #111;
}

使用Flexbox布局实现

现代CSS的Flexbox布局可以更简洁地实现横向菜单，无需float属性。

#menu {
  display: flex;
  list-style-type: none;
  padding: 0;
  background-color: #333;
}

#menu li {
  flex: 1;
}

#menu li a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-align: center;
  text-decoration: none;
}

添加JavaScript交互效果

为菜单项添加鼠标悬停和点击效果，增强用户体验。

document.querySelectorAll('#menu li a').forEach(link => {
  link.addEventListener('mouseenter', function() {
    this.style.backgroundColor = '#555';
  });

  link.addEventListener('mouseleave', function() {
    this.style.backgroundColor = '';
  });

  link.addEventListener('click', function(e) {
    e.preventDefault();
    console.log('导航至: ' + this.textContent);
    // 实际应用中替换为页面跳转或内容加载逻辑
  });
});

响应式设计处理

添加媒体查询使菜单在不同屏幕尺寸下保持良好显示。

@media screen and (max-width: 600px) {
  #menu {
    flex-direction: column;
  }

  #menu li {
    width: 100%;
  }
}

动态生成菜单项

通过JavaScript动态生成菜单项，便于维护和扩展。

const menuItems = [
  { text: '首页', url: '#' },
  { text: '产品', url: '#' },
  { text: '服务', url: '#' },
  { text: '关于', url: '#' },
  { text: '联系', url: '#' }
];

const menu = document.getElementById('menu');
menuItems.forEach(item => {
  const li = document.createElement('li');
  const a = document.createElement('a');
  a.href = item.url;
  a.textContent = item.text;
  li.appendChild(a);
  menu.appendChild(li);
});

js实现菜单横向显示