javascript - 可扩展的菜单框(水平)

Question

我在玩这个想法:

在这个 block 中我有 2 <a>作为按钮和 <ul>并尝试了 float荷兰国际集团他们让他们粘在一起。实现这种效果的主要思想是操纵 ul 的宽度/显示状态。或者只是菜单部分。

<nav>
  <a class="nav-btn">Logo</a>
  <ul>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
  </ul>
  <a class="nav-btn">Logo</a>
</nav>

但我的主要问题是“如何使宽度灵活且自动？”不，百分比或像素!主要部分(灰色背景)应自动展开/折叠，并根据其内容占用尽可能多的空间。当菜单被关闭并且假设我们将“菜单”的宽度设置为零时，背景应该调整并且这两个按钮应该像图片一样。

您建议采用哪种结构或 html？

非常感谢!

Answer 1

您可以按原样使用 html 结构。您将设置以下 css 属性以设置基本布局:

a, li {
  display: block;
  float: left;
}

你可以通过 javascript 切换

的显示属性。参见: js FIDDLE

您还可以使用导航的悬停状态通过 css 切换 li 的可见性

ul {
    display: none;
}

nav:hover ul {
    display: block;
}

参见:css FIDDLE

如果 Logo 不是链接，您可能希望使用 div 而不是 a。