可扩展的菜单框（水平）

Question

我一直在玩这个想法：

在这个块中，我有 2 个 <a>s 作为按钮和一个 <ul> 并尝试 floating 使它们粘在一起。实现这种效果的主要思想是操纵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

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