Фонд 6.4 тонкая верхняя панель - PullRequest
Новая
       4

Фонд 6.4 тонкая верхняя панель

0 голосов
/ 02 ноября 2019

Навигационный инструмент верхней панели Foundation настроен так, чтобы полностью выделить иерархию ссылок, опираясь на списки и теги элементов. 

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
</div>

Однако в попытке смягчить эту структуру целью являетсячтобы ссылки второго слоя были в одной строке, скажем 

<ul><li>
<a href="#">One</a>  <a href="#">Two</a>  <a href="#">Three</a>
</li></ul>

К сожалению, либо отображение не соответствует определению браузера для позиции, либо display:block; из базового кода Foundation переопределяет даже <li style='display: float'><a href="#" style='display: float'>с определением класса .menu a.

Как может быть достигнут этот однострочник?

1 Ответ

1 голос
/ 03 ноября 2019

Похоже, вы перепутали свои правила CSS: display: block; и float: none. Поведение по умолчанию выглядит так, как будто оно хочет, чтобы оно было вертикальным, а структура выглядит построенной таким образом. Я ничего не видел в их документах для этого (я просмотрел их, смеется), но что я сделал, чтобы это работало, так это использовал position:absolute; в этом подменю, а затем расположите его. Я не знаю, как выглядит остальная часть вашего меню, но я полагаю, вам нужно настроить.

Я создал кодовую ручку, которая может делать то, что вам нужно.

https://codepen.io/bjorniobennett/pen/bGGajWZ

    ul.dropdown > li {
      position: relative;

      &:hover {
        > ul.vertical {
            display: block;
        }
      }

      > ul.vertical {
        display: none;
        position: absolute;
        width: 500%; 
        background: #c5c5c5;
        top: 120%;

        > li {
          display: inline-block;
          float: left;
        }
      }
    }
...