使用Zurb Foundation,水平居中顶部菜单,并使多行项目垂直居中。

7
使用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--------------------------------------------------------------------------+
|                                                                                   |
|                                                                                   |
˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜

这意味着:
  1. 项目具有固定宽度
  2. 项目可能有一行或多行(通常不超过3行),但它们必须始终垂直居中。
  3. 所有项目的高度必须与最高项目相同
  4. 子菜单(下拉菜单)必须在悬停项目下方打开
我已经尝试了几个选项(将显示设置为table-cell或inline-block,并将垂直对齐设置为middle),并在网上查找,但我找不到符合上述所有要求的解决方案。
有人试过这样做吗?

你正在使用Foundation 3还是4?无论如何,开始的地方都是使用“centered”类。请参阅文档中的“grid”部分:http://foundation.zurb.com/docs/components/grid.html - vtacreative
Foundation 4. "centered"类用于居中网格元素。在这里,我想保持<nav class="top-bar">容器默认状态,<section class="top-bar-section">居中,并添加我已经编写的所有内容。 - Andrea Sciamanna
1
我不确定为什么这个问题被关闭。我相信其他人可能需要解决这个问题。也许我没有用正确的英语写作(抱歉,英语不是我的母语),但我认为它不是无建设性的、模糊的、不完整的、过于宽泛的或修辞的。请澄清。 - Andrea Sciamanna
1
是的,我同意...我很好地理解了你的问题。有时候StackOverflow上的人太过热心了,有点像礼仪监督员之类的。哎,算了。 - vtacreative
谢谢CL75。我希望有人能重新打开这个问题。 - Andrea Sciamanna
4个回答

3
我无法解决你的问题,但我可以解释为什么在Zurb Foundation中很难做到。
  • 按钮的实现方式(以及在顶部栏中重用的方式)在Zurb Foundation中具有设置css display:inline-block。这意味着您无法使用vertical-align:middle垂直对齐文本。这使得自动对齐多行文本的按钮变得不可能。

  • 顶部栏没有设计成具有平均分布的元素。您可以使用ul.button-group.event-6接近所需的布局,但它不能满足所有约束条件。它被设计为具有标识、左侧菜单和右侧菜单。

  • 设置高度很容易,可以通过将height:80px应用于每个按钮来完成。但是,多行文本对齐将位于顶部。

  • 子菜单可以使用a.button.dropdown模拟,但同样无法满足所有约束条件。

  • Foundation中的顶部栏功能主要包含在foundation.topbar.js文件中的jQuery插件中。这将需要大量修改才能按照您设想的方式工作,并且可能使您的顶部栏与过去和未来的Foundation版本不兼容。

在尝试让所需设计与特定框架配合工作时,您有几个选择:

  1. 重新调整目标以适应框架的限制(即减少约束数量或稍微更改设计以适应Foundation的限制)

  2. 使用提供此功能的其他框架,请查看此类似帖子,了解如何使用bootstap做同样的事情

  3. 寻找另一个库以实现所需功能(在您的情况下,可以查看jQuery移动导航栏

  4. 编写自己的功能

我希望这有助于解释一些原因,说明你正在尝试使用Zurb Foundation 3/4时无法实现的原因。如果您解决了问题,如果您发布您的解决方案,那将是很好的,因为似乎还有很多其他人想做类似的事情。


2
以下是如何操作:
将以下内容添加到您的CSS中:
.top-bar-section ul {display: table; margin: 0 auto;}
.top-bar-section ul li {display: table-cell;}

请确保将其放在Foundation CSS之后,以覆盖Foundation CSS。
在HTML中,我删除了左侧或右侧类。
上述方法可能会破坏移动版本。为了解决这个问题,请将此CSS置于上述CSS下方。
@media only screen and (max-width: 58.75em) { /* TopBar Breakpoint */
.top-bar-section ul {display: inline; margin: 0;}
}

此外,根据Foundation的版本不同,类可能会发生变化,因此需要修改上面使用的CSS类。


@Switchfire - 我尝试过了,但没有成功。不过很高兴它对你有效。=> - L84
将代码放入您的CSS文件@media only screen and (min-width: 58.75em) {字面上放在闭合标签“}”之前,然后删除一个导航侧边栏,并从最后一个“ul =“ left / right”中删除左侧或右侧类别应该完美地工作。编辑:从标题区域中删除<h1><a href="#"></a></h1> - Switchfire
@mattrepublic - 对我有效,我正在使用v5.2.3的Foundation。 - L84
@railrailrail - 你应该删除你的其他问题/答案,因为你在这里的回答已经足够了。 - L84
@Lynda,我想为了SEO目的创建它,这样搜索Foundation 5的人就不必四处寻找(因为我的答案没有得到投票,可能不会被考虑),所以我决定删除它。 - blnc
显示剩余2条评论

0
这是我找到的最佳解决方案,适用于所有调整大小事件。它将Foundation 5 Top-bar元素居中。
请注意,“contain-to-grid” 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>

0
如果我理解问题正确的话,我看到很多答案都解释说他需要改变CSS样式表。他也可以使用Foundation的类: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--------------------------------------------------------------------------+
|                                                                                   |
|                                                                                   |
˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜

1
虽然这在某些情况下是有效的,但如果您的菜单比网格更宽,则会有多行菜单项。此外,根据菜单项,您可能希望将菜单居中于 contain-to-grid 中,而不是在末尾留有多余空间。再次强调,这取决于具体情况。 - L84

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接