Привет, Уважаемые подписчики!
Только закончил работу над очередным проектом. В нем помимо основного меню, присутствовала так же и навигация . И я решил, что неплохо было бы показать вам, как подобные вещи делаются буквально в несколько строк кода. Причем делается это исключительно средствами html и css.
Такая навигация ставится обычно слева на сайте. Ничего сложного при ее разработке нет. Каждый пункт навигации заключаем в тег
PSD макет данной вещи для тренировки можно скачать .
Так же данный урок доступен в видео версии , которую можно скачать здесь:
Ну, в общем все! Давайте посмотрим на код, и все станет ясно окончательно.
Все остальное будем делать с помощью стилей.
Для класса.bar-menu назначаются стили, которые нужны исходя из расположения соседних блоков. У меня в примере ничего кроме этой навигации на странице нет, поэтому я просто задам ему ширину.
Поскольку текст располагается по центу, то проще всего его отцентрировать, задав для тега
Картинки вырезаны, принимаемся писать css код для навигации. Точнее для ссылок навигации! Остальные стили у нас уже есть.
font-family:Tahoma;
font-weight:bold;
И что ж мы увидим?
Почему так? Дело в том, что фоновая картинка расположилась в ссылке ровно на столько, сколько ей позволяет это сделать текст. То есть ширина и высота ссылки определяется лежащим в ней текстом. Это кстати явный признак строчных тегов. Давайте укажем ширину и высоту:
background:url(images/bg-menu-main.jpg) center center;
font-family:Tahoma;
font-weight:bold;
width:190px;
height:27px;
По-прежнему ничего не изменилось.
background:url(images/bg-menu-main.jpg) center center;
font-family:Tahoma;
font-weight:bold;
display:block;
Вроде начинает навигация принимать нужный нам вид:
Добавляем отступ снизу у каждой из ссылок. Так же добавляем padding-top для каждой из ссылок и незабываем его вычесть из высоты:
background:url(images/bg-menu-main.jpg) center center;
font-family:Tahoma;
font-size:10px; color:#056e04;
font-weight:bold;
height:21px;
margin-bottom:10px;
padding-top:6px;
Получаем то, что нужно:
Bar-menu h2 a:hover {
background:url(images/bg-menu.jpg) center center;
font-family:Tahoma;
color:#ffffff;
font-weight:bold;
margin-bottom:10px;
padding-top:6px;
text-decoration:none;
Вот и получилась наше навигационное меню:
Надеюсь, урок будет полезен. С вами был Андрей. Спасибо за внимание. До встречи в очередных уроках!
В этой статье рассмотрим интересные способы оформления навигации, которые используются сегодня. Некоторые из них используются достаточно давно, другие – новый взгляд на навигацию сайта, третьи представляют собой несколько измененные шаблоны, использующиеся для создания правильного контекста ресурса.
Это классический шаблон навигации. Представляет собой список ссылок, расположенный в верху страницы горизонтально или вертикально. Этот способ никогда не перестанет быть актуальным.
Данный вид навигации лучше всего работает на небольших сайтах, где в навигации представлено всего несколько пунктов.
Примеры:
Часто такой вид навигации применяется в мобильных устройствах, помогая экономить пространство. Часто имеет смысл скрывать такое меню за одной кнопкой (гамбургер-меню). Некоторые дизайнеры используют такое меню для того, чтобы скрыть даже небольшое количество ссылок.
В случае, например, с Awwwards (), скрывать пункты меню действительно имеет смысл, т.к. их сайт содержит сложное меню, которое требует достаточно много места экрана.
Другие примеры:
На крупных сайтах, и, в особенности, в мобильных приложениях, часто необходимо использовать более одной формы навигации. Например, скрывать отдельное окно навигации за значком гамбургера.
Сайты этой категории часто используют навигацию в нижней части страницы (футере). Иногда такая навигация просто копирует пункты с верхней части сайта, делая его более удобным. В других случаях, в футере размещаются вторичная навигация, полезная для ограниченного небольшого числа пользователей.
Примеры:
Для примера посмотрите практически на любой новостной сайт или Pinterest. Вот, где используется такого рода навигация.
Она используется для знакомства пользователей с категоризированными постами и другими сборниками информации. Если информация на сайте распределена по темам, датам, тегам, эта способ навигации для вас.
Примеры:
Это не один отдельный шаблон, а целая коллекция. Ее можно назвать «Портфолио навигации», потому что такая навигация чаще всего используется на сайтах-портфолио, где дизайнеры чувствуют полную свободу своей креативности. Такие сайты обычно отличаются отсутствием традиционного меню или рассеиванием пунктов меню по всей странице.
Хорошая система навигации поможет Вам ориентироваться. Необыкновенно важно, чтобы хорошая система навигации помогала Вам перемещаться по объектам сети (сайтам:)) без головной боли. Несмотря на то, что есть некоторые исключения, большинство web-сайтов оказались бы на мели или б вообще канули в лету без тонкой системы управления страницами.
Есть ли у Вас под рукой план вашего сайта? Давайте сделаем одну малоприятную вещь. Вынесите его в отдельное окно, и пусть окно будет открытым, пока Вы читаете эту статью. Пора подвергнуть вашу систему управления страницами тщательному исследованию. Мы выясним, не теряете ли Вы потенциальных пользователей, дезориентируя и вводя в заблуждение.
Готовы? Давайте протестируем ваш сайт, отвечая на ряд фундаментальных вопросов.
Важные вопросы
Сколько забот и волнений уходит на поиск удачного стиля системы навигации для верстки страниц сайта? При обсуждении веб-юзабилити сайта, вы, наверняка, услышите, что эффективная система управления должна отвечать ряду основных вопросов, возникающих у пользователя:
‘’Где я?’’
У среднестатистического посетителя сайта, этот вопрос на первом месте. Он возникает, возможно, на одну тысячную секунды, так как каждый, переходя по ссылке, первым делом пытается сориентироваться. Поэтому одна из основных задач навигационной системы привлечь внимание к тому месту на странице сайта, где находится ответ на этот вопрос.
Если система навигации не способна сориентировать посетителя, его смущение ставит под вопрос пригодность сайта.
Вопрос к тем, у кого сейчас открыт сайт: Отмечается ли в пунктах вашего меню текущая страница?
Самый простой способ сказать о местонахождении пользователя это маркирование соответствующего пункта меню или выделение кнопки другим цветом.
Повторение творит чудеса!
Даже если на текущей страницы есть заголовок, графическое изменение соответствующего пункта меню вовсе не будет лишним, так как повторение творит чудеса.
‘’А где я уже был?’’
Обесцвечивание или затемнение посещенных ссылок не всегда единственный и самый лучший способ отметить просмотренные страницы.
Навигационные цепочки отлично выполняют задачу, так что посетитель может легко и быстро определить свое текущее местонахождение на сайте.
Сайт Wufoo наиболее эффективно использует их на страницах раздела tour:
Благодаря иерархической навигации добавление нового слоя страниц не предоставляет большой сложности. Он просто привязывается к концу цепочки. Скорее всего, вы не возьметесь верстать сайт по такому типу навигационной системы самостоятельно. Навигационные цепочки являются скорее средством ориентирования, чем перемещения по объектам сайта. Используйте их как дополнительный элемент, но для чего-то менее динамичного оставьте основную систему навигации.
‘’Куда я могу перейти?’’
Пользователю необходимо знать, куда он может перейти с текущей страницы. Это становится особенно важным, если ваш посетитель ищет что-то особое. И именно разочарование - верный путь, прогнать посетителя с сайта.
‘’Почему я должен переходить по данной ссылке?"’
Просто указать пункты меню не всегда достаточно. Дополнительная информация к каждому пункту меню подскажет пользователю о содержимом страницы. Дополнительные детали могут быть как в виде подтекста, так и в виде строки-подсказки, всплывающей при подведении курсора к какому-либо пункту меню.
Примером может послужить сайт SimpleBits.com. Хочу заметить, что если бы не было подписи “recent entries” под пунктом SimpleBits, я бы врядли догадался, что эта ссылка открывает блоги:
Как пишет Стив Круг в книге Don’t Make Me Think (Не заставляйте меня думать) , что юзабилити не всегда подразумевает чрезмерное разъяснение. Он также замечает, что среднестатистическому интернет-пользователю больше не надо писать ""Введите сюда ключевое слово"", когда ему нужно воспользоваться полем поиска. Вот где проявляется совместная работа стандартов и договоренностей.
Избегайте любых непонятностей
“Mystery Meat” навигация основывается на использовании неоднозначного или непонятного дизайна меню. Так же как крутится руль, развиваются и различные направления в дизайне систем навигации. И подобная тенденция тоже появилась не просто так. Когда используется ‘’mystery meat’’ меню, пользователю приходится ориентироваться самостоятельно, догадываясь и экспериментируя. Интуиция и разум вовсе не требуются.
Как видите, можно проявить креативность, продолжая придерживаться традиций. Но этот тип навигации далек и от того и от другого:
Заключение
Еще раз взгляните на свой сайт. Теперь основываясь на ряд особых показателей, вы сможете оценить полезность вашего сайта. Может каким-то разделам той или иной страницы не хватает дополнительной ясности?
Надеюсь, Вам понравилась эта статья:), и Вы никогда не будете создавать подобные сайты: и :)
П.С. Картинки кликабельны;)
Навигация – важнейший аспект любого сайта. Сможет ли пользователь найти актуальную для себя информацию и захочет ли он вернуться – зависит от эффективности вашей веб-навигации.
Навигация ничем не регламентирована: ее можно сделать прозрачной и интуитивной или многоуровневой и нестандартной.
Как сделать навигацию на сайте максимально эффективной и какой дизайн подойдет именно вам?
У компании веб-разработки есть ответы на все ваши вопросы.
Но обо всем по порядку.
Навигация сайта или веб-навигация – это система программных и визуальных средств, которые помогают пользователю ориентироваться на сайте и находить нужную информацию.
Максимально эффективная веб-навигация держится на 3 китах:
Дизайн веб-навигации необычайно вариативен, однако некоторые его элементы завоевали большую популярность, чем другие. Umbrella IT отобрала 10 примеров наиболее удачных дизайнов веб-навигации, которые работают как индивидуально, так и в сочетании друг с другом. Каждый из них имеет свои достоинства и недостатки, и какой из них лучший – решать только Вам.
1. ГОРИЗОНТАЛЬНАЯ НАВИГАЦИЯ
Горизонтальная навигация – классический дизайн, соединивший удобство с функциональностью.
Плюсы:
Минусы:
2. ВЕРТИКАЛЬНАЯ НАВИГАЦИЯ
Вертикальная навигация — прямая альтернатива горизонтальной навигации – меню, расположенное в левой колонке страницы.
Плюсы:
Минусы:
3. ВЫЕЗЖАЮЩЕЕ МЕНЮ
Выезжающее меню или слайд-меню – один из способов сохранить полный функционал и экранное пространство. Меню скрыто за левой границей экрана и появляется по клику или касанию.
Плюсы:
Минусы:
4. ЛЕНДИНГ
Лендинг – это одностраничный сайт с длинной или бесконечной прокруткой, оптимизированный под определенные цели.
Плюсы:
Минусы :
5. ФИКСИРОВАННОЕ МЕНЮ
Фиксированная или “липкая” навигация статично закрепляет панель меню в конкретной части страницы, предоставляя пользователю постоянный доступ к опциям меню.
Плюсы:
Минусы:
6. ГАМБУРГЕР-МЕНЮ
Гамбургер-меню – навигационное меню, изначально разработанное для смартфонов, но все чаще появляющееся на экранах ноутбуков. Представляет собой иконку, скрывающую широкий диапазон опций и категорий. Свое название меню получило из-за сходства иконки с гамбургером – три горизонтальных полоски меню символизируют три слоя знаменитого сэндвича.
Плюсы:
Минусы:
7. АДАПТИВНАЯ НАВИГАЦИЯ
Адаптивная навигация – вариативный дизайн, автоматически подстраивающийся под различную ширину экрана и мобильные платформы.
Плюсы:
Минусы:
8. МЕГА-МЕНЮ
Мега-меню – обширная навигационная панель, всплывающая при наведении курсора или нажатии. Мега-меню не просто структурирует контент по группам и колонкам в текстовом формате, но и активно использует различные визуальные средства.
Плюсы:
Минусы:
9. РАСШИРЕННЫЙ ФУТЕР
Футер или “подвал” сайта – это нижняя часть страницы. В стандартном футере, как правило, размещается дополнительная информация: контакты, ссылки, уведомление об авторских правах и кнопки социальных сетей. В расширенном футере помимо этих данных содержится полноценное навигационное меню, которое может использоваться как основная или альтернативная система навигации. Расширенный футер — простой способ выйти за границы стандартного дизайна и повысить функциональность Вашего сайта.
Плюсы:
Минусы:
10. ПОЛНОЭКРАННАЯ НАВИГАЦИЯ
В отличие от всех представленных здесь вариантов дизайна, полноэкранная навигация не ставит перед собой задачу экономии экранного пространства. Напротив, полноэкранная навигация использует интро-страницу на все 100 процентов, сочетая текст с графикой.
Плюсы:
Минусы:
И традиционный бонус от компании Umbrella IT, которая всегда готова предложить Вам больше — 11 вариант — АНИМИРОВАННЫЕ ЭЛЕМЕНТЫ НАВИГАЦИИ .
Рациональное использование анимированных элементов как основных или дополнительных средств навигации позволяет разнообразить консервативный дизайн и привлечь внимание пользователей.
Плюсы:
Минусы:
На этапе выбора и разработки дизайна веб-навигации трудно предугадать, какой именно вариант окажется выигрышным. Успех каждого конкретного случая зависит от ряда факторов: от бизнес-назначения, целей и задач сайта, природы контента, целевой аудитории и Ваших личных предпочтений.
Представленные примеры – лишь малая часть того, что позволяет реализовать современный веб-дизайн. Остались вопросы? , и мы поможем воплотить Ваши самые смелые проекты в реальность.
Не секрет, что каждый веб-сайт той или иной компании преследует четыре основные цели: воспитание лояльного отношения к бренду, увеличение трафика, снижение числа отказов, повышение показателей конверсии в лиды или продажи! Здесь многое зависит от того, насколько уютно чувствуют себя пользователи, попавшие на ваш сайт.
Поэтому в нашей сегодняшней статье речь пойдет о том, что такое навигация сайта, благодаря которой и создается «уютная обстановка». А точнее - о наиболее распространенных ошибках, совершаемых при ее разработке.
Так сложилось, что пользователи привыкли видеть навигацию сайта в верхней или левой частях страницы, поэтому не стоит заставлять их блуждать по сайту в ее поисках, так как подобные игры в прятки могут им не понравиться, что отрицательно скажется на показателях конверсии и увеличит процент отказов.
Да, в разработке страниц/сайта всегда приветствуется креативный подход, но навигация сайта явно не тот случай, в котором стоит давать волю своей фантазии. Такими экспериментами вы отвлекаете внимание пользователей, которые будут вынуждены заниматься изучением нового стиля навигации, а не основного контента ресурса.
Еще одно золотое правило того, как сделать навигацию на сайте, - надписи меню навигации должны быть информативного характера. Так, например, использование пунктов меню «Товары» или «Услуги» - общие для всех компаний, и подобные названия мало о чем говорят пользователям. Вот еще пример: «Что мы делаем» - такая же безликая фраза.
В таком случае как улучшить навигацию сайта? Постарайтесь подобрать наиболее точные надписи для каждого значка пункта меню навигации, и вы увидите, как они заговорят с пользователями. Посетители сайта пришли к вам в поиске ответа на возникшие вопросы, поэтому не стоит отмахиваться от них шаблонными фразами и словами.
Согласитесь, что ваши клиенты не ищут абстрактные «Товары» или «Услуги», и навигация с такими значками не повлияет на продвижение сайта в результатах поисковой выдачи. Узнали себя? Значит, пора исправляться! Меню сайта и его структура в целом должны быть оптимизированы для поисковых систем и говорить на понятном для целевой аудитории языке. Дочитав нашу статью до конца, вы увидите, как подобную задачу решают многие компании.
Выпадающее меню как элемент навигации стал чрезвычайно популярным, однако существуют две весомые причины, по которым к его использованию нужно подходить с максимальной осторожностью.
Многим из вас наверняка приходилось буквально ловить выпадающее меню. Одно неловкое движение - и оно убегает от вас! И вот вы, собравшись с силами, вновь ищете, кликаете, а там - сюрприз! - еще один список вариантов действий. Подобные догонялки жутко раздражают! Задумайтесь, может быть не стоит лишний раз трепать нервы своим потенциальным клиентам?
Еще одна причина отказа от выпадающего меню: низкая посещаемость следующих страниц сайта или глубина просмотра. Если у вас существует проблема низкой посещаемости страниц верхнего уровня, вполне возможно, что причина кроется в использовании выпадающего меню. Но из правил всегда есть исключения. В этом случае исключения действуют для больших сайтов со множеством разделов, так как здесь с помощью такого меню значительно улучшается юзабилити сайта.
Так было раньше, но не стоит придерживаться этой традиции сегодня без острой необходимости, ведь порой даже 8 пунктов бывает слишком много. Попытайтесь ограничиться их меньшим количеством, не превышающим 5: чем меньше второстепенных пунктов, тем реже взгляд пользователей будет запинаться на них, и тем громче заговорят наиболее важные.
Это правило также работает для всего контента сайта, а не только для его навигации. Каждый удаленный элемент делает оставшиеся более заметными. Краткость навигации также важна для SEO. Поскольку чаще всего пользователи по ссылке попадают на главную страницу, а не на внутренние страницы сайта, поэтому она является «авторитетной» для поисковиков. Когда ваша навигация переполнена ссылками, домашняя страница сайта становится менее авторитетной по сравнению с внутренними.
Исследования в области психологии показали, что легче всего запоминаются первые и последние элементы любого списка, нежели элементы из его середины. Аналогичное действие происходит и с пользователями. Это явление получило название «кривая серийных позиций» и наглядно выражается в виде графика:
Концентрация внимания значительно выше в начале списка (эффект первичности) и в конце (эффект новизны). Вот почему правильно расставлять самые важные пункты в начале навигации, второстепенные - в центре. Пункт меню «Контакт» следует разместить в конце TOP навигации в крайнем правом углу.
В случае, если вы отстали от тенденций веб-дизайна лет на 8 и до сих пор используете графические навигационные кнопки вместо текстовых ссылок, тогда для вас мы приводим 5 причин пересмотреть свои привычки:
А теперь, как мы и обещали: 5 примеров навигации сайта без ошибок.