Question

使用Foundation，我正在尝试调整顶栏菜单，以使菜单项看起来像这样：

+-Parent container------------------------------------------------------------------+
|                                                                                   |
+-.top-bar--------------------------------------------------------------------------+
|              +-top-bar-section-+--------+--------+--------+--------+              |
|              |  Item  |  Item  |  Item  |  Item  |  Item  |  Item  |              |
|              |  menu  |  menu  |  menu  |  menu  |  menu  |  menu  |              |
|              |   01   |   02   |   03   |   04   |   05   |   06   |              |
|              +-top-bar-section-+--------+--------+--------+--------+              |
+-.top-bar--------------------------------------------------------------------------+
|                                                                                   |
|                                                                                   |
˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜

这意味着：

项目具有固定宽度
项目可能有一行或多行（通常不超过3行），但它们必须始终垂直居中。
所有项目的高度必须与最高项目相同
子菜单（下拉菜单）必须在悬停项目

我尝试了几个选项（显示设置为表格单元格或内联块，垂直对齐设置为中间）并环顾网页，但我找不到满足上述所有要求的解决方案。

有人试图这么做吗？

Answer 1

我无法解决您的问题，但我可以解释为什么Zurb Foundation很难解决。

实现按钮的方式（并在顶部栏中重复使用） Zurb Foundation拥有css display:inline-block集。这意味着您不能使用垂直对齐文本 vertical-align:middle这使得无法自动完成使用多行文字对齐按钮。
顶栏的设计不是均匀间隔的元素。您可以使用ul.button-group.event-6更接近您想要的布局，但它不适用于所有约束。它旨在有一个Logo，一个左菜单和一个右菜单。
设置高度很容易，可以通过应用在css中完成例如height:80px到每个按钮。然而多行文字对齐将位于顶部。
可以使用a.button.dropdown模拟子菜单，但同样可以将无法满足您的所有约束
基础中的topbar功能主要包含在a中 foundation.topbar.js文件中的jQuery插件。这需要很多修改工作的方式你想象和愿意使你的topbar可能与以后的版本不兼容基础。

当试图让您想要的设计与特定框架一起使用时，您有几个选择：

重新调整您的目标以适应框架的范围（即减少约束数量或稍微改变设计适应基金会的限制）
使用另一个提供此功能的框架，请查看这个similar post 关于使用bootstap做同样的事情
寻找另一个库来完成所需的功能（in 你的情况可能会看jQuery Mobile Navbars
编写自己的功能

我这有助于解释为什么Zurb Foundation 3/4无法实现你想要做的事情的一些原因。如果您解决了这个问题，那么如果您回复您的解决方案会很好，因为似乎很多其他人都希望做类似的事情。

Answer 2

以下是如何操作：

将此添加到您的CSS：

.top-bar-section ul {display: table; margin: 0 auto;}
.top-bar-section ul li {display: table-cell;}

确保它将覆盖基础CSS后覆盖基础CSS。

在HTML中，我删除了left或right类。

以上可以打破移动版本。要解决此问题，请将此CSS放在上面的CSS下面：

@media only screen and (max-width: 58.75em) { /* TopBar Breakpoint */
.top-bar-section ul {display: inline; margin: 0;}
}

此类可能会根据需要您修改上面使用的CSS类的Foundation版本而更改。

Answer 3

这是我发现适用于所有调整大小事件的最佳解决方案。它以Foundation 5 Top-bar元素为中心。

请注意，“包含到网格”div类会将顶栏导航的宽度保持在网站的框架内，但实际上并不会使导航元素居中。

以下代码可以。

SCSS：

nav.top-bar:not(.expanded) {
            text-align: center;
            section.top-bar-section { display: inline-block; }
                           }

HTML：

<div class="contain-to-grid">
    <nav class="top-bar" data-topbar>
        <ul class="title-area">
            <li class="name">
                <h1><a href="#"></a></h1>
            </li>
            <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>

        <section class="top-bar-section">
            <ul>
                <li><%= link_to 'LINK 1', root_path %></li>
                <li class="divider"></li>
                <li><%= link_to 'LINK2', link_path %></li>
                <li class="divider"></li>
                <li class="has-dropdown">
                    <%= link_to 'Dropping', "#" %>
                    <ul class="dropdown">
                        <li><label>Label:</label></li>
                        <li><%= link_to 'DROP 1', drop_path %></li>
                        <li class="divider"></li>
                        <li><%= link_to 'DROP 2', drop_path %></li>
                    </ul>
                </li>
            </ul>
        </section>
    </nav>
</div>

Answer 4

如果我理解这个问题，我会看到很多人在解释他需要改变css。

他也可以使用基础课：contain-to-grid

<div class="contain-to-grid">
  <nav class="top-bar" data-topbar>
    ...
  </nav>
</div>

实例：http://jsfiddle.net/gRtrX/37/（查看结果的大小）

看起来真的很像

+-Parent container------------------------------------------------------------------+
|                                                                                   |
+-.top-bar--------------------------------------------------------------------------+
|              +-top-bar-section-+--------+--------+--------+--------+              |
|              |  Item  |  Item  |  Item  |  Item  |  Item  |  Item  |              |
|              |  menu  |  menu  |  menu  |  menu  |  menu  |  menu  |              |
|              |   01   |   02   |   03   |   04   |   05   |   06   |              |
|              +-top-bar-section-+--------+--------+--------+--------+              |
+-.top-bar--------------------------------------------------------------------------+
|                                                                                   |
|                                                                                   |
˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜

水平居中的zurb基础顶部菜单，多行项目垂直居中

4 个答案: