10 фрагментов кода CSS и JavaScript для создания адаптивной навигации

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

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

1. Отзывчивый полностраничный макет от Johnny Mango

Этот адаптивный пример показывает, как далеко вы можете зайти на этапе прототипирования веб-сайта. Вы заметите, что у навигации есть интересная функция, когда вы наводите курсор и автоматически фокусируетесь на ссылках. Этот эффект можно изменить на «живом» веб-сайте с той же навигацией, но в этом примере полезно показать UI/UX страницы.

См. демонстрацию адаптивной навигации с помощью пера с Kube от Johnny Mango

2. Выпадающая панель навигации от Tania Rascia

Если вам нужны более длинные выпадающие элементы в навигации, это меню может работать лучше. Это сильная альтернатива более простой навигации, в которой есть только несколько пунктов меню. В этом случае вы найдете простой список ссылок с очень маленьким раскрывающимся списком. Ссылки подменю появляются только в событии щелчка, которое обрабатывается jQuery. Вы можете изменить это на CSS-только, но вы потеряете триггер щелчка.

Тем не менее, для такого чистого дизайна я удивлен тем, насколько универсально этот фрагмент предлагает разработчикам.

Посмотрите выпадающую панель навигации, реагирующую на перо, от Tania Rascia.

3. Одностраничный макет Яна Чизикова

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

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

См. Перо Полностью адаптивная навигация с анимацией CSS и jQuery от Яна Чизикова

4. Красное выпадающее меню Стефани Уолтер

Разработчик Стефани Уолтер создала несколько интересных проектов для Интернета. Этот фрагмент — всего лишь один пример с ярко-красной отзывчивой навигацией.

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

См. Многоуровневую навигацию Pen Responsive от Стефани Уолтер.

5. Чистый CSS-дизайн от Ахмада Хьязи

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

Эффекты наведения немного запаздывают, но, несомненно, интересны. Не говоря уже о том, что адаптивный стиль удивительно удобен. Возможно, наиболее впечатляющей частью является то, что весь этот пример использует исключительно CSS .

См. Отзывчивое меню навигации Pen CSS от Ahmad Hjazy

6. Адаптивный липкий заголовок от Марка Либунао

Я упомянул одностраничный дизайн в предыдущем фрагменте, и этот адаптивный заголовок следует той же траектории. Единственное отличие состоит в том, что эта навигация имеет немного больший блок на странице и немного иначе обрабатывает адаптивный дизайн страницы.

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

См. липкую навигацию заголовка Pen Responsive от MarcLibunao.

7. Отзывчивый и сенсорный от Dragoeco

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

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

См. Навигацию с выпадающим меню Pen: адаптивная и сенсорная от Dragoeco.

8. Простые навигационные ссылки от AnabolicHippo

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

Самая сложная часть — обработка выпадающего списка на мобильных устройствах. У многих ссылок есть подменю, и они будут работать одинаково на небольших экранах.

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

См. меню навигации, реагирующее на перо, от AnabolicHippo.

9. Меню Playstation Curtain от Луи Шене

Разработчик Луи Шене создал одну из моих любимых адаптивных навигаций на основе веб-сайта PlayStation. Луис называет это «занавесом меню», когда оно скользит в поле зрения, занимая всю страницу. Это характерно для мобильных интерфейсов и быстро стало популярным и среди веб-дизайнеров.

Что мне действительно нравится, так это стиль анимации. Он гладкий и достаточно быстрый, чтобы отображать ссылки, не заставляя пользователей скучать. И самое главное, это похоже на то, что это может работать на рабочем веб-сайте.

См. Принцип навигации с помощью пера № 3 — меню «Занавес» от Луи Шене.

10. Отзывчивое мега-меню от Samir Alley

Вы можете поискать в Интернете и найти сотни мега-примеров навигационного меню. Обычно они появляются в крупных блогах и на новостных сайтах, но также популярны в магазинах электронной коммерции или на сайтах крупных агентств. Самая сложная часть мегаменю — сделать его полностью адаптивным. Благодаря этому небольшому фрагменту вы можете легко изменить дизайн мегаменю, чтобы он подходил для любого экрана.

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

См. Pen Responsive Mega Menu – Навигация от samir alley