当前位置：首页 > JavaScript

js实现菜单横向显示

2026-04-04 18:16:04JavaScript

横向菜单的实现方法

使用HTML和CSS结合JavaScript可以轻松实现横向菜单。以下是几种常见的实现方式：

纯CSS实现横向菜单

通过CSS的display: flex或display: inline-block属性可以直接实现横向排列：

js实现菜单横向显示

<ul class="horizontal-menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">关于我们</a></li>
</ul>

.horizontal-menu {
  display: flex;
  list-style: none;
  padding: 0;
}

.horizontal-menu li {
  margin-right: 20px;
}

.horizontal-menu li a {
  text-decoration: none;
  color: #333;
}

JavaScript动态创建横向菜单

使用JavaScript动态生成横向菜单：

const menuItems = ['首页', '产品', '服务', '关于我们'];
const menuContainer = document.createElement('ul');
menuContainer.className = 'horizontal-menu';

menuItems.forEach(item => {
  const menuItem = document.createElement('li');
  const link = document.createElement('a');
  link.href = '#';
  link.textContent = item;
  menuItem.appendChild(link);
  menuContainer.appendChild(menuItem);
});

document.body.appendChild(menuContainer);

响应式横向菜单

结合媒体查询实现响应式布局：

js实现菜单横向显示

@media (max-width: 768px) {
  .horizontal-menu {
    flex-direction: column;
  }
}

带下拉功能的横向菜单

实现带下拉功能的横向菜单：

const menuItems = [
  { name: '首页', submenu: null },
  { name: '产品', submenu: ['产品A', '产品B'] },
  { name: '服务', submenu: ['服务1', '服务2'] }
];

const menu = document.createElement('ul');
menu.className = 'horizontal-menu';

menuItems.forEach(item => {
  const li = document.createElement('li');
  const a = document.createElement('a');
  a.href = '#';
  a.textContent = item.name;
  li.appendChild(a);

  if (item.submenu) {
    const submenu = document.createElement('ul');
    submenu.className = 'submenu';
    item.submenu.forEach(subItem => {
      const subLi = document.createElement('li');
      const subA = document.createElement('a');
      subA.href = '#';
      subA.textContent = subItem;
      subLi.appendChild(subA);
      submenu.appendChild(subLi);
    });
    li.appendChild(submenu);
  }

  menu.appendChild(li);
});

document.body.appendChild(menu);

对应的CSS样式：

.horizontal-menu {
  display: flex;
  list-style: none;
}

.submenu {
  display: none;
  position: absolute;
}

.horizontal-menu li:hover .submenu {
  display: block;
}

这些方法可以根据具体需求选择使用，纯CSS方案适合简单菜单，JavaScript方案则更适合动态内容或复杂交互需求。