Элементы навигации Foundation

Меню

Наш гибкий компонент меню позволяет легко создавать множество общих шаблонов навигации, все с одной и той же разметкой.

Иконки

Пункты меню могут иметь значки. Оберните текст элемента в <span>, а затем добавьте элемент <img> перед <span>. Если вы используете шрифт значка Foundation <img>, то вместо него будет <i>.

<ul class="menu">
  <li><a href="#"><i class="fi-list"></i> <span>One</span></a></li>
  <li><a href="#"><i class="fi-list"></i> <span>Two</span></a></li>
  <li><a href="#"><i class="fi-list"></i> <span>Three</span></a></li>
  <li><a href="#"><i class="fi-list"></i> <span>Four</span></a></li>
</ul>​



Breadcrumbs

Breadcrumbs пригодятся, чтобы показать навигационный след для пользователей, щелкающих по вашему сайту.

<nav aria-label="You are here:" role="navigation">
  <ul class="breadcrumbs">
    <li><a href="#">Home</a></li>
    <li><a href="#">Features</a></li>
    <li class="disabled">Gene Splicing</li>
    <li>
      <span class="show-for-sr">Current: </span> Cloning
    </li>
  </ul>
</nav>​

Базовая Подсказка

По умолчанию при наведении курсора мыши под определенным термином появляется всплывающая подсказка.

Наведи <span data-tooltip tabindex="1" title="Курс обучения Foundation.">на меня курсор</span> и получишь подсказку об обучению.​

Наведи на меня курсор и получишь подсказку об обучению.

Модальное окно

Модальное окно - это просто пустой контейнер, поэтому вы можете поместить в него любой контент, от текста до форм, от видео до целой сетки.

<div class="reveal" id="exampleModal1" data-reveal>
  <h1>Awesome. I Have It.</h1>
  <p class="lead">Your couch. It is mine.</p>
  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Awesome. I Have It.

Your couch. It is mine.

I'm a cool paragraph that lives inside of an even cooler modal. Wins!


<p><button class="button" data-toggle="animatedModal10">Click me for a modal</button></p>

<div class="reveal" id="animatedModal10" data-reveal data-close-on-click="true" data-animation-in="spin-in" data-animation-out="spin-out">
  <h1>Whoa, I'm dizzy!</h1>
  <p class="lead">There are many options for animating modals, check out the Motion UI library to see them all</p>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>​

Whoa, I'm dizzy!

There are many options for animating modals, check out the Motion UI library to see them all