Основание 6: новый компонент меню

Если вы использовали Foundation раньше, возможно, вам показалось, что компоненты меню / навигации немного утомительны. Если вы хотите создать панель значков или горизонтальное меню навигации боковой панели, вам необходимо использовать эти компоненты в точности такими, как они есть (и настроить их в соответствии с вашими потребностями, если вы хотите что-то еще).

С выпуском Foundation 6 все изменилось. В одном из своих самых больших на сегодняшний день капиталовложений Zurb удалось упростить процесс, чтобы вы могли работать вместе со своей разработкой.

В предыдущем посте я обсуждал многие новые функции в Foundation 6 . В этом посте я расскажу о навигационных меню. Вы увидите, что команда Zurb теперь предлагает урезанную сборку вместе с несколькими действительно полезными плагинами JavaScript, чтобы сделать систему меню лучше, чем когда-либо.

Упорядочение меню навигации

Компоненты навигации были подвергнуты серьезной реконструкции в Foundation 6. В Foundation 5 у вас был большой выбор меню, для каждого из которых требовалась своя собственная разметка, настройки и стили для правильной работы.

С последней версией Zurb преобразовал эти различные меню в одно большое меню с несколькими вариантами конфигурации. Таким образом, следующие меню исчезли :

• Встроенный список — используется для создания стандартного горизонтального меню, к которому вы привыкли
• Side Nav — используется для обозначения вертикального меню, обычно используется на боковых панелях или в других вертикальных местах
• Панель значков — используется для демонстрации пунктов меню вместе со значками (а иногда и значками).
• Sub Nav — Используется для создания элементов суб-навигации, таких как ссылки на разные части одной страницы.

Они были заменены одним компонентом под названием Меню .

Меню простое. Вы определяете свою разметку с a элементов a и li внутри элемента ul с помощью класса menu :

 <ul class="menu"> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> <li><a href="#">Option 3</a></li> </ul> 

Этот новый компонент меню предлагает те же основные функции, что и предыдущие меню в Foundation 5, но содержит их в качестве параметров, так что вы можете выбрать, будет ли ваше меню вертикальным, горизонтальным, панелью значков и т. Д.

Простое меню

По умолчанию класс menu добавляет отступы, тонкие цвета и другие аспекты макета, чтобы помочь вам начать работу. Если вы предпочитаете .simple все самостоятельно, вы можете добавить класс .simple в свое меню, и он будет .simple большей части стиля.

 <!-- A basic menu with most styling stripped out --> <ul class="menu simple"> <li><a href="#">Vanilla</a></li> <li><a href="#">Strawberry</a></li> <li><a href="#">Chocolate</a></li> <ul> 

Горизонтальные и вертикальные меню

По умолчанию меню будут горизонтальными, что будет работать почти так же, как старое «встроенное меню» из Foundation 5. Если вы хотите иметь вертикальное меню вместо этого, это так же просто, как добавить vertical класс в меню. Мы могли бы использовать эту функцию для создания, например, списка наших последних новостей.

 <!-- Basic vertical menu example for showcasing blog items --> <ul class="menu vertical"> <li><a href="#">Dynamic Interactivity, 21st December 2015</a></li> <li><a href="#">Web Fundamentals, 12th December 2015</a></li> <li><a href="#">Intro to CSS, 02nd December 2015</a></li> </ul> 

Подменю и вложенность

Если вы собираетесь иметь подменю, вы, скорее всего, в конечном итоге будете использовать один из плагинов меню, таких как выпадающие / развертываемые компоненты, однако вы можете легко сделать смещение подменю влево для использования в вертикальном меню. добавив nested класс:

 <!-- using the nested class to create a sub-menu inside a vertical menu --> <ul class="menu vertical"> <li><a href="#">Course One</a> <ul class="menu vertical nested"> <li><a href="#">Course One - One</a></li> <li><a href="#">Course One - Two</a></li> </ul> </li> <li><a href="#">Course Two</a></li> </ul> 

Иконка Меню

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

В стандартное меню вы добавляете изображение значка внутри <span> и переносите его внутри тега <a> . Вы можете использовать либо изображение для вашего значка, либо один из элементов шрифта Foundation Icon .

 <!-- Simple icon menu using Foundation's icon font --> <ul class="menu"> <li><a href="#"><i class="fi-save"></i> <span>Save</span></a></li> <li><a href="#"><i class="fi-x"></i> <span>Delete</span></a></li> <li><a href="#"><i class="fi-arrow-left"></i> <span>Back</span></a></li> <li><a href="#"><i class="fi-arrow-right"></i> <span>Forward</span></a></li> </ul> 

 // do something when the accordion closes $('.my-accordion-menu').on('up.zf.accordion menu', function() { alert('Menu Closed'); }); 

 <ul class="menu"> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> <li><a href="#">Option 3</a></li> </ul> 

 <div class="top-bar" id="top-bar"> <div class="top-bar-left"> <ul class="dropdown vertical medium-horizontal menu"> <li><a href="#">Monday</a></li> <li><a href="#">Tuesday</a></li> <li><a href="#">Wednesday</a></li> <li><a href="#">Thursday</a></li> <li><a href="#">Friday</a></li> </ul> </div> <div class="top-bar-right"> <ul class="dropdown vertical medium-horizontal menu"> <li><a href="#">January</a></li> <li><a href="#">February</a></li> <li><a href="#">March</a></li> <li><input type="search" placeholder="Search"></li> </ul> </div> </div> 

 <div class="title-bar" data-responsive-toggle="top-bar" data-hide-for="medium"> <button class="menu-icon" type="button" data-toggle></button> <div class="title-bar-title">Main Menu</div> </div>