Question

我正在使用基础5（最新的，截至撰写时间：v5.5.3）

我设置了顶栏菜单，每个元素都有一些图标。基本上：除非页面宽度，否则顶栏菜单工作正常超过[640px]且小于[828px]！

我创建了一个截图来更好地说明问题： screenshot of broken top-bar menu

我准备了一个小提琴来说明我的问题。（https://jsfiddle.net/sLk0jf4L/146/）

顶栏HTML：

<div class="contain-to-grid">
    <nav class="top-bar" data-topbar role="navigation" data-options="'Back'">
        <ul class="title-area">
            <li class="name">
                <h1><a href="#">My super homepage</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">
            <!-- Left Nav Section -->
            <ul class="left">
                <li class="active">
                    <a class="link-item-exclusive" href="#"><span class="lnr lnr-star menu-item"></span>&nbsp; Exclusive goods</a>
                </li>
                <li class="">
                    <a class="link-item-new" href="#"><span class="lnr lnr-download menu-item"></span>&nbsp; New arrivals</a>
                </li>
                <li class="">
                <a class="link-item-about" href="#"><span class="lnr lnr-warning menu-item"></span>&nbsp; About</a>
                </li>
            </ul>

            <!-- Right Nav Section -->
            <ul class="right">
                <li class="has-dropdown">
                    <a class="link-item-flag" href="#"><span class="lnr lnr-flag menu-item"></span>&nbsp;&nbsp; Choose language</a>
                    <ul class="dropdown">
                        <li><a href="#">Language 1</a></li>
                        <li class="active"><a href="#">Language 2</a></li>
                        <li><a href="#">Language 3</a></li>
                    </ul>
                </li>
            </ul>
        </section>
    </nav>
</div>

定位图标的其他CSS

span.menu-item
{
    font-size:1.25rem;
    font-weight:500;
    line-height:1.25rem;
}

a.link-item-new span.menu-item,
a.link-item-exclusive span.menu-item
{
    position:relative;
    top:0.1rem;
}

a.link-item-about span.menu-item
{
    position:relative;
    top:0.15rem;
}

a.link-item-flag span.menu-item
{
    position:relative;
    top:0.2rem;
}

我需要应用哪些CSS规则才能消除这种破损？如果菜单只是作为汉堡包出现，那就好了图标而不是制动。

感谢您的时间和知识。

Answer 1

我对您的HTML进行了一些修改，因为我在＆＃34;选择语言＆＃34;周围添加了span。类.lang-text的文本，因此我可以使用@media查询操作内容。

这个想法是当视口大小达到断点时，只有＆＃34;选择语言＆＃34;文本被隐藏，保留标志图标（以及下拉选项）。

<强> HTML

<div class="contain-to-grid">
  <nav class="top-bar" data-topbar role="navigation" data-options="'Back'">
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">My super homepage</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">
      <!-- Left Nav Section -->
      <ul class="left">
        <li class="active">
          <a class="link-item-exclusive" href="#"><span class="lnr lnr-star menu-item"></span>&nbsp; Exclusive goods</a>
        </li>
        <li class="">
          <a class="link-item-new" href="#"><span class="lnr lnr-download menu-item"></span>&nbsp; New arrivals</a>
        </li>
        <li class="">
          <a class="link-item-about" href="#"><span class="lnr lnr-warning menu-item"></span>&nbsp; About</a>
        </li>
      </ul>

      <!-- Right Nav Section -->
      <ul class="right">
        <li class="has-dropdown">
          <a class="link-item-flag" href="#"><span class="lnr lnr-flag menu-item"></span><span class="lang-text">&nbsp;&nbsp; Choose language</span></a>
          <ul class="dropdown">
            <li><a href="#">Language 1</a></li>
            <li class="active"><a href="#">Language 2</a></li>
            <li><a href="#">Language 3</a></li>
          </ul>
        </li>
      </ul>
    </section>
  </nav>
</div>

@media查询：

@media only screen and (min-width: 40em) {
  a.link-item-flag span.lang-text {
    display: none;
  }
}

@media only screen and (min-width: 46.5em) {
  a.link-item-flag span.lang-text {
    display: inline-block;
  }
}

<强> Updated Fiddle

Foundation 5顶栏菜单（带图标）分为两行

1 个答案: