Сайты с боковым меню

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

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

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

11 июня 2014 | Опубликовано в Веб-дизайн | 5 Комментариев »

Автор подборки — Дежурка

  • Опубликовано в Веб-дизайн, июня 11, 2014
  • Метки: боковое меню, вдохновляющие сайты, веб дизайн, креативные сайты, оригинальные сайты, подборка сайтов, сайты для вдохновения

Комментарии

  1. Сергей
    14 июня 2014 в 3:35

А между прочим, именно боковое меню — один из самых эффективных способов увеличить количество просмотров.

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

Боковое меню, да еще с иконками — очень хороший инструмент.

Сергей
14 июня 2014 в 3:56

Я поясню свою мысль. Из практики я заметил, что боковое отлично увеличивает глубину просмотров там, где рубрикация жизненно необходимо. Что это за сайты? Это прежде всего каталоги — игр, фильмов, объявлений. На блогах и информационных сайтах существенно значимого увеличения глубины просмотров я не заметил, но на каталогах — вах! в два раза по сравнению с любыми другими вариантами (выпадающее меню из 1 кнопки, верхнее меню, другие способы рубрикации).

Минималистичная кнопка с выпадающим меню, которой сейчас все увлечены — это ошибка моды, особенно на Ютубе. Хотя возможно, именно там это уже не играет особой роли из-за мощной интеллектуальной системы подсказок и рекомендаций. То есть Гуголь вполне может отказаться, у него есть другая система, увеличивающая число времени пользователя на сайте и еще система подписки. А вот у обычного сайта-каталога — отказ от бокового меню ошибка.

Читайте также:  Чем стереть маркер с натяжного потолка

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

Еще, из личных наблюдений:

— боковое меню слева лучше, чем боковое меню справа (идиотский стандарт многих шаблонов)

— иконки-значки в меню значительно увеличивают число просмотров на детских игровых сайтах

— большое количество рубрик в меню — это хорошо. Вообще большое число рубрик — это хорошо.

Altetsa
22 сентября 2014 в 9:29

Можно добавить также сайт Пол Ван Дайка www.carlcox.com и Карла Кокса www.carlcox.com

Altetsa
22 сентября 2014 в 9:29

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

Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).

Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.

В этом обзоре мы рассмотрим многоуровневые меню.

Flat Horizontal Navigation

Красивая навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по использованным возможностям, работает в ie8+.
http://codepen.io/andytran/pen/kmAEy

Material Nav Header w/ Aligned Dropdowns

Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ

Smooth Accordion Dropdown Menu

Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
http://codepen.io/fainder/pen/AydHJ

Pure CSS Dark Inline Navigation Menu

Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
http://codepen.io/3lv3n_snip3r/pen/XbddOO

Pure CSS3 Mega Dropdown Menu With Animation

Стильное меню с двумя форматами вывода: горизонтальным и вертикальным. Используются иконки и css3-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs

CSS3 Dropdown Menu

Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
http://codepen.io/ojbravo/pen/tIacg

Читайте также:  Чем отличается тональный набор от импульсного

Simple Pure CSS Dropdown Menu

Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
http://codepen.io/Responsive/pen/raNrEW

Bootstrap 3 mega-dropdown menu

Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/

Flat Navigation

Стильная навигационная панель с плавным подменю. В старых браузерах отобразится с проблемами.
http://codepen.io/andytran/pen/YPvQQN

3D nested navigation

Responsive Mega Menu — Navigation

Горизонтальное адаптивное меню. Выглядит неплохо, но мобильная версия немного «хромает». Используется css, html и js.
http://codepen.io/samiralley/pen/xvFdc

Pure Css3 Menu

Оригинальное меню. С простым и чистым кодом без js. Применяйте для «вау» эффектов.
http://codepen.io/Sonick/pen/xJagi

Full CSS3 Dropdown Menu

Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
http://codepen.io/daniesy/pen/pfxFi

Css3 only dropdown menu

Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
http://codepen.io/riogrande/pen/ahBrb

Dropdown Menus

Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
http://codepen.io/kkrueger/pen/qfoLa

Pure CSS DropDown Menu

Примитивное, но эффективное решение. Только css и html.
http://codepen.io/andornagy/pen/xhiJH

Pull Menu — Menu Interaction Concept

Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.
http://codepen.io/fbrz/pen/bNdMwZ

Make Simple Dropdown Menu

Чистый и простой код, без js. В ie8 точно работать будет.
http://codepen.io/nyekrip/pen/pJoYgb

Pure CSS dropdown [work for mobile touch screen]

Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
http://codepen.io/jonathlee/pen/mJMzgR

Dropdown Menu

Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
http://codepen.io/MeredithU/pen/GAinq

CSS 3 Dropdown Menu

Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
http://codepen.io/ibeeback/pen/qdEZjR

KVdKQJ (автор очень долго думал над названием)

Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
http://codepen.io/martinridgway/pen/KVdKQJ

CSS3 Menu Dropdowns (особенное решение)!

Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
http://codepen.io/cmcg/pen/ofFiz

П.С.
Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.

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

Вам интересны такие подборки по разным тематикам? (кнопки, вкладки, подсказки и так далее)

Похожие публикации

  • 21 июня 2017 в 10:09

Обзор анимации с codepen для страниц загрузки сайта

Советы, библиотеки и дополнительные материалы по CSS-анимации

Сравнение css-фреймворков/библиотек на живом примере. Часть 1

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Читайте также:  Panasonic sa dp1 отзывы

Комментарии 33

вот 2 приятных варианта из подборки:
http://codepen.io/andytran/pen/YPvQQN
http://codepen.io/3lv3n_snip3r/pen/XbddOO

Не знаю, почему такие подборки вызывают негатив: максимально понятное название, которое полностью соответствуют действительности. Крайне полезны, когда тупишь на тему нового дизайна — придумывать все всегда с нуля занимает нереальное количество времени. А так потыкал в подборку, подогнал прямо в codepen под свои данные и понял, надо оно тебе или нет.

Автору большое спасибо!

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

А вот когда стараются объединить два вида меню в одном месте, получается обычно коряво, это особенно ощущается в интернет-магазинах. Я открываю сайт на телефоне, хочу зайти в список категорий, а тут вываливается огромный список на весь экран и когда я его стараюсь просмотреть, скролится вся страница целиком (или список не поверх контента, а сдвигает информацию сайта на 300-1000 пикселей, превращая все в гигантскую распашонку). Тыкаю пальцем на элемент и у она либо вызывает hover, либо кидает на другую страницу (что я точно не ожидал), либо происходить все сразу вместе, либо ещё что-то непонятное. А все потому что поведение на нажатие по элементам меню на компе и на мобильных устройствах тоже разное. Нужно писать другой код реагирования. Hover уже срабатывает не так. По сути это два разных меню, с разной механикой и разным дизайном.

Поэтому то, что применима на ПК, часто не применима на мобильных устройствах.
Для телефона и планшета нужно использовать другое решение, которых кстати на Codepen тоже много. Можно объединять подходящие скрипты(для мобильного и для ПК) в один, допиливать под свою задачу и радоваться. Если бы сразу в решениях на Codepen запихали два варианта, то код был бы сложнее, а в некоторых случая и во все мог быть плохо отделен друг от друга и помешал бы объединению нескольких хороший идей в одну.

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

Также готовые варианты помогают придумать интересные решения.

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

«>

Оцените статью
Добавить комментарий

Adblock
detector