可扩展的菜单框（水平）

Posted 2023-02-16

【中文标题】可扩展的菜单框（水平）

【英文标题】：Expandable menu box (horizontally)

【发布时间】：2014-08-18 15:05:08

【问题描述】：

我一直在玩这个想法：

在这个块中，我有 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？

非常感谢！

【参考方案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。

【讨论】：

感谢您的努力。这很有帮助。但是整个“响应式”的想法呢？你不认为设置一个固定的 100px 是违背这个想法的吗？你有什么建议让它尽可能灵活和响应迅速？

100px 只是一个例子。你可以设置任何你想要的尺寸

我的意思是它不应该和单词和字母一样宽吗？ 100px 有点静态！

这是一个例子。请阅读您之前的评论和我的回复。您根本不必定义尺寸，可以使用auto 或任何您喜欢的东西。