Основа CSS Magellan Navigation

Foundation CSS — это интерфейсная среда с открытым исходным кодом, которая используется для быстрого и простого создания потрясающих адаптивных веб-сайтов, электронных писем или приложений. ZURB выпустил его в сентябре 2011 года. Многие компании, такие как Facebook, eBay, Mozilla, Adobe и даже Disney, используют его. Эта платформа, напоминающая SaaS, построена на платформе Bootstrap. Он более уникален, гибок и сложен. Работа с сборщиками модулей также проста благодаря интерфейсу командной строки. Платформа электронной почты создает электронные письма в формате HTML, которые доступны на всех устройствах и удобны для мобильных устройств. Используя Foundation for Apps, вы можете создавать полностью адаптивные веб-приложения.

Foundation CSS Magellan в основном используется для создания локальной навигации или навигации, которая содержит утилиту для перехода к определенным частям веб-страницы. Когда нажимаются ссылки в Magellan, область просмотра переходит к заданной цели без прокрутки веб-страницы.

Навигация Foundation CSS Magellan состоит из двух типов навигации, предоставляемых Magellan: один — базовый, а другой — липкий. Теперь вы можете перейти к примеру 1 ниже и увидеть, что базовый Magellan не является идеальным способом реализации Magellan. С другой стороны, посмотрите на пример 2 , и вы увидите, что фиксированная навигация — это скорее практический пример, когда независимо от того, где вы находитесь на веб-странице, вы можете быстро перейти к любой другой части веб-страницы. Вы можете использовать любой тип навигационного компонента для создания Magellan, вам не нужно брать какие-либо специальные классы, чтобы сделать Magellan. Есть некоторые специфические атрибуты, необходимые для создания Magellan.

Атрибуты навигации Foundation CSS Magellan:

Базовый Магеллан:

• [data-magellan]: этот класс используется для создания навигации по ссылкам на соответствующие разделы.
• [data-magellan-target= id ]: этот класс используется для указания разделов, в которые область просмотра будет переходить, когда мы нажимаем соответствующие ссылки. Он принимает значение div, которое

Синтаксис:

<ul class="menu" data-magellan>
    <li><a href="#first">..</a></li>
    <li><a href="#second">..</a></li>
    <li><a href="#third">..</a></li>
</ul>

<div class="sections">
    <section id="first" 
        data-magellan-target="first">
        ...
    </section>
    <section id="second" 
        data-magellan-target="second">
        ...
    </section>
    <section id="third" 
        data-magellan-target="third">
        ...
    </section>
</div>

Sticky Magellan Navigation: нам нужно добавить, что Magellan находится внутри Sticky контейнера.

• [data-sticky-container]: этот атрибут используется для контейнера, который должен быть липким. В этом атрибуте нет значения.
• [data-sticky]: этот атрибут используется с элементом, который должен быть закрепленным. Этот атрибут не принимает никакого значения.

Синтаксис:

<!-- Add a Sticky Menu -->
<div data-sticky-container>
    <div class=".." data-sticky>
        ...
    </div>
</div>

<div class="sections">
    <section id="first" 
        data-magellan-target="first">
        ...
    </section>
    <section id="second" 
        data-magellan-target="second">
        ...
    </section>
    <section id="third" 
        data-magellan-target="third">
        ...
    </section>
</div>

Пример 1: Этот код ниже демонстрирует, как использовать простое меню с кнопками для создания базовой навигации Magellan.

Выход:

Пример 2. В приведенном ниже коде показана липкая панель навигации Magellan . Мы использовали компонент Top Bar в качестве панели навигации.

Выход:

Ссылка: https://get.foundation/sites/docs/magellan.html#sticky-navigation