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

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

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

Давайте начнем с удобства и простоты использования любого навигационного меню. Когда пользователь посещает новый сайт, меню будет одной из первых вещей, на которые он осмысленно обратит внимание. Если этот элемент будет хорошо оформлен, пользователь обратится к нему за помощью для решения своей задачи. Почти каждый веб-сайт имеет определенные секции, которые «ожидаются» пользователями, к примеру «О нас», «Услуги», «Продукты» или «Связь с нами».

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

Так, ссылка на страницу «О нас» должна быть названа «О нас» [Спасибо, Кэп – прим. переводчика] или «Контакты», ссылка на раздел услуг – названа «Услуги» или «Наши услуги»
Излишнее творчество в процессе именования пунктов главного меню может привести к потере в удобстве для вашего пользователя.

Impulse Development
Меню этого сайта не создает лишних проблем с навигацией

Даже при самых необычных обстоятельствах, не называйте страницу с предоставляемыми услугами – «То, чем мы занимаемся». И не нужно называть страницу с контактами «Способы нас найти». В поисках информации, пользователи пытаются найти знакомые слова и, первое время, неосознанно избегают незнакомых или непонятных слов и словосочетаний.

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

Важные ссылки (например «Услуги», «Контакты», и т.д.) должны четко отличаться от второстепенных. Работа дизайнера состоит в том, что бы по возможности разделить все навигационные ссылки на две этих категории и ясно указать на их различия пользователям.

Рассмотрим несколько примеров:

Edwards & Hampson

У сайта Edwards & Hampson хорошее отчетливое горизонтальное меню, которое является основным средством перехода по страницам сайта. В то время как здесь находятся стандартные ссылки («О нас», «Наши услуги», «Продукция»), в этом меню есть много других ссылок, которые не являются столь «первичными» по отношению к пользователю; однако они являются достаточно важными для того, что бы быть на виду.

Аналогичный пример:

Deliciouslyorkshire

Ссылки на сайте The Deliciouslyorkshire, ведущие к важным разделам («Home», «About»,«News and events», «Recipes») расположены рядом с теми, что, казалось бы, является вторичными секциями ( «Promotions», «Useful links»). Оба типа ссылок имеют вид закладок, без признаков иерархии.
Фактически, если некоторые из этих ссылок менее важны для посетителей сайта, то проектирование секций с отражением иерархии было бы мудрым решением. Конечно, у этих компаний могли быть веские причины именно так спроектировать свои меню, и это не обязательно плохой пример, скорее всего, это просто исключения, иллюстрирующие важность визуальной иерархии.

Вот два примера сайтов, которые подчеркивают иерархию, при этом оставляя менее важные ссылки легкодоступными:

Designers Couch

У Designers Couch есть важные навигационные ссылки в главном меню («Home», «Gallery», «Jobs» и т.д.), а также вторичные ссылки на этом же самом меню, но сохраняющие визуальные отличия («Find a designer», «Get involved»).

J Taylor Design

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

Если вы разрабатываете сайт, позволяющий регистрироваться пользователям, или коммерческий сайт, у которого есть «Корзина» для покупки товара, то будет лучше, если вы поместите ссылки с этими секциями справа от меню (или в другом месте справа, вверху). [Например, как это сделал Хабр :)] Здесь нет никакого шаманства или парапсихологии, вроде «Логотипы в правом углу воспринимаются на 45,9% лучше, чем в левом», просто пользователи привыкли к такому расположению.

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

Xero

Sharify

Sharify и Xero помещают свои ссылки на действия в то же меню, что и важные ссылки, но они сохраняют иерархию, располагая их справа, на некотором отдалении.

Строка поиска, как часть меню

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

Несколько примеров такого расположения поиска (включая вышеупомянутый J Taylor Design):

Washtenaw Community College

Westcoast Poppin

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

Рассмотрим несколько примеров, следующих этому совету:

QN5 Music

Kinder-aktuell

К сожалению, не все сайты сигнализируют пользователю о выпадающих меню.

webstudios

billoneil.com

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

[Приводу здесь только превьюшки изображений, дабы не загромождать страницу – прим. переводчика]:

Lorem Ipsum

Arca lui Noe Hotel

The Art of Non-Conformity

Auditude

Mission Bicycle Company

Twitshirt

Jupiter Underfloor Heating

Cambridge Shakespeare Festival

The Mindset Game

Lanbruk’s Gunya

Glocal Ventures

Owltastic

inkd

Eyemagine

Wetaskiwin Regional Public Schools

Full Cream Milk

My Favorite Thing

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

UPD: Поставлены ссылки для каждого скрина.

habr.com

Главное горизонтальное меню для сайта

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

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

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

Это снимки сняты с тестовой площадке, где ниже предоставлена ссылка:

1. Так смотрится на широком мониторе, где при открытии сайта или страницы.

2. Здесь наведи под меню, что описано выше, где закреплен специально для этого значок.

3. Это уже рассматриваем в мобильном гаджет.

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

Приступаем к установке:

HTML

Код

  Menu ☰
  
  
  Главная
  Стили  
    

  <label for=’avedugas-1′>Шаблоны <span>▾</span></label>
  <a href=’#’>Шаблоны ▾</a>
  <input type=’checkbox’/>
  <ul>
  <li><a href=’#’>Игровой</a></li>
  <li><a href=’#’>Кино онлайн</a></li>
  <li><a href=’#’>Тематический</a></li>
  </ul>
  </li>
  <li><a href=’#’>Дизайн</a></li>  
  <li>  

  <label for=’avedugas-2′>Скрипты <span>▾</span></label>
  <a href=’#’>Скрипты ▾</a>
  <input type=’checkbox’/>
  <ul>
  <li><a href=’#’>Коды и CSS</a></li>
  <li><a href=’#’>Коды и CSS 2</a></li>
  <li>  
   
  <label for=’avedugas-3′>Desanv <span>☰</span></label>
  <a href=’#’>Дизайн ▾</a>
  <input type=’checkbox’/>
  <ul>
  <li><a href=’#’>HTML/CSS</a></li>
  <li><a href=’#’>jQuery</a></li>
  <li><a href=’#’>Скрипты</a></li>
  </ul>
  </li>
  </ul>
  </li>
  <li><a href=’#’>Контакты</a></li>
  </ul>
</nav>
</div>

CSS

Код

body {
  display: block;
  margin: 0px;
}

.cedabamidum, [id^=avedugas] {
  display: none;
}
.nabimad-saketing{background:#176a8a;width:100%;}
nav {
  width:100%;
  padding:0;
}
nav:after {
  content: »;
  display: table;
  clear: both;
}
nav ul {
  float:left;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}
nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
  background: #176a8a;  
}
nav ul li ul li{
  background: #2f2c2c;  
}
nav a, nav a:hover, nav a:visited {
  display: block;
  padding: 0 18px;
  color: #fbf4f4;
  font-size: 19px;
  line-height: 73px;
  text-decoration: none;
  text-shadow: 0 1px 0 #272424;
}
nav ul li ul li:hover {
  background: #2f2c2c;
}
nav a:hover {
  background-color: #2f2c2c;
}
nav ul li ul li a:hover {
  background-color: #0c0c0c;
}
nav ul ul {
  display: none;
  position: absolute;
  top: 73px;  
}
nav ul li:hover > ul {
  display: inherit;
}
nav ul ul li {
  width: 168px;  
  float: none;
  display: list-item;
  position: relative;
}
nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 168px;
}
nav label span{
  float:right;
}
.cedabamidum, [id^=avedugas] {
  display: none;
}
nav input[type=checkbox]{
  display: none;
}

/* Media Queries */

@media all and (max-width : 768px) {

  nav {
  margin: 0;
  }
  .cedabamidum + a,
  .demipetu-logemas {
  display: none;
  }
  .cedabamidum {
  display: block;
  background-color:#2f2d2d;
  padding: 0 20px;
  color: #f7f4f4;
  font-size: 20px;
  line-height: 73px;
  text-decoration: none;
  border: none;
  text-shadow: 0 1px 0 #252323;
  }
  .cedabamidum:hover {
  background-color: #0e0e0e;
  }
  [id^=avedugas]:checked + ul {
  display: block;width: 100%;
  }
  nav ul li {
  display: block;
  width: 100%;
  }nav ul ul .cedabamidum,
  nav ul ul a {
  padding: 0 40px;
  }nav ul ul ul a {
  padding: 0 80px;
  }
  nav a:hover,
  nav ul ul ul a {
  background-color: #0e0e0e;
  }
  nav ul li ul li .cedabamidum,
  nav ul ul a {
  background-color: #212121;
  }
  nav ul ul {
  float: none;
  position: static;
  color: #f7f3f3;
  }
  nav ul ul li:hover > ul,
  nav ul li:hover > ul {
  display: none;
  }
  nav ul ul li {
  display: block;
  width: 100%;
  }
  nav ul ul ul li {
  position: static;
  }
}

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

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

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

Демонстрация

zornet.ru

горизонтальное » Страница 2 » Скрипты для сайтов

17.05.2012 1 350 Menu & Nav

CSS3 эффекты для меню

Анимируем меню, используя свойства css3 не прибегая к помощи jQuery.

08.05.2012 979 Menu & Nav

Разноцветное jQuery меню

Красочное горизонтальное jQuery меню. При перемещении куросра по пунктам меню за ним будет двигаться прямоугольник заданного цвета, чем то напоминает меню в стиле лава ламп.

16.04.2012 1 030 Menu & Nav

Темное двух уровневое CSS3 меню

Двух уровневое горизонтальное темное CSS3 меню. Никаких изображений, только градиент.

13.04.2012 1 832 Menu & Nav

CSS lava lamp меню

Горизонтальное меню с выпадающими подпунктами в стиле лава лампы сделанное только с использованием возможностей CSS3. Данный вариант подойдет для сайтов в темной цветовой гамме.

18.01.2012 1 315 Menu & Nav

CSS3 меню

Аккуратненькое и стильное меню на css3. Впрочем его элементы можно использовать и как кнопки для сайта.

12.12.2011 954 Menu & Nav

Навигация со слайд эффектом

Навигация в которой смена подменю происходит с эффектом смещения, который реализуется благодаря плагину easing. Похожий эффект, только на prototype реализован на сайте apple.

10.12.2011 2 172 Menu & Nav

Горизонтальное меню с CSS или JS

Меню с использованием затемнения FADE на jQuery или же просто на CSS — выбор за вами. Подойдет для сайтов с темными дизайнами.

28.10.2011 1 115 Menu & Nav

Интересное меню на CSS и jQuery

Выпадающее меню с плавным эффектом появления подпунктов и фоновым изображением для них. Поддерживается Firefox, Safari, Chrome.

22.10.2011 2 400 Menu & Nav

Горизонтальное меню на CSS3

Симпатичное горизонтальное меню на CSS3. Очень аккуратное и простое. Будет прекрасно смотреться на вашем сайте.

20.10.2011 3 473 Menu & Nav

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

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

15.10.2011 2 025 Menu & Nav

Навигация на чистом CSS3

Горизонтальная панель навигация выполненная на CSS3. При переходе на страницу по ссылке, например, Услуги, название пункта в меню выделяется. То есть используется активное состояние.

05.10.2011 1 310 Menu & Nav

Выпадающая навигационная панель

Навигационная панель с различными выпадающими элементами: обычный список, изображение, оформленные на css ссылки. В целом обычное меню, но и всё гениаальное просто. Плагин для jQuery может использоваться, как для горизонтального, так и для вертикального меню.

pcvector.net