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

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

Автоматическое изменение размера Navbars

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

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

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

Также вы можете изменить размер ссылок или переформатировать логотип. Вы видите это на веб-сайте Tweed Barbers.

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

Фиксированные вертикальные меню

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

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

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

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

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

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

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

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

Добавить глубину и тени в меню

Если вы часто просматриваете Интернет, вы наверняка видели эффекты обыгранные тенями. Многие дизайнеры любят следовать плоской тенденции дизайна и  длинных теней,  но я предпочитаю тонкие тени CSS3 благодаря чему создавая эффект глубины в странице.

Сайт  Grain & Mortar  использует простую тень, падающую с фиксированной навигации и создавая эффект глубины самого сайта. Такой эффект выглядит приятно и отделяет навигацию от самого сайта.

Вот еще один хороший пример сайта «Кармы» с гораздо более заметным эффектом тени.

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

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

Прокрутка анимации в навигации

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

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

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

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

Есть много всевозможных, небольших анимаций, которые вы можете сделать в навигации своего сайта, например как это сделали на веб-сайте Coloud.

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

Выводы

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

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