Сайт

Меню на сайте это: Горизонтальное меню для сайта

19.11.2018

Содержание

Проектируем удобное меню на сайте

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

Мы собрали 15 подсказок, которые помогут вам создать удобные и понятные менюшки:

1. Размещайте меню в привычных местах. Пользователи ожидают увидеть кнопки меню там же, где и на сотне других сайтов, которые они посетили до этого. Многократные исследования поведения Интернет-юзеров через технологии отслеживания глаз (eye-tracking), указателя мыши и скроллинга показали, что основное внимание посетителя сосредоточено на определенных местах страницы. Это левый верхний угол, верхняя и левая части сайта, а также центр страницы. На основании этого было разработано правило F-образного шаблона, согласно которому посетители сайтов преимущественно «читают» его одинаково: сверху вниз и слева направо, при этом визуально этот формат напоминает букву F. На фоне этого рекомендуем размещать меню горизонтально вверху страницы, вертикально в левой части или одновременно и там, и там.

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

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

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

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

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

7. На больших сайтах пользуйтесь многоуровневым меню с превью при наведении

. да-да, с превью, как в “Пуске” старого и доброго Windows XP 🙂 При наведении менюшки должны аккуратно раскрываться. В мобильной версии сайта или приложении нижние уровни меню лучше открывать по клику с помощью аккордеонов.

8. Группируйте подобные элементы. Под группировкой мы имеем в виду размещение по соседству – не заставляйте пользователя летать по сайту для сравнения похожих товаров или категорий. Кроме того, добавляйте элементы в меню по определенному критерию: например, в горизонтальном меню вверху интернет-магазина бытовой техники можно разместить кнопки на разделы сайта (Доставка, Контакты, Сертификаты

, Команды и т.д.), а в вертикальном меню слева – предлагаемые категории товаров (Стиральные машинки, Телевизоры,  Микроволновые печи и т.д.).

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

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

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

15 советов как организовать удобное меню на сайте

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

Меню должно бросаться в глаза

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

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

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

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

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

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

Привязка меню к текущему местонахождению

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

Соответствие меню требованиям пользователей

7) Хорошее меню должно быть понятным для любого пользователя. Поэтому лучше делать ссылки не только с всплывающими пояснениями, но и использовать понятные всем слова. Не стоит использовать в заголовках аббревиатуры и сокращения, а также сленговые выражения.

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

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

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

11) Выделяйте меню. Меню должно быть заметным среди остального наполнения страницы. Это поможет пользователям скорее сориентироваться на сайте. Для выделения можно использовать особую подсветку, графику, игру цвета и так далее.

Меню должно быть удобным

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

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

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

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

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroid
iOS
HTML43.0+1.0+3.5+1.0+1.0+1.1+1.0+
HTML5

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <menu> предназначен для отображения списка пунктов меню. Аналогично тегам <ol> и <ul> внутри контейнера <menu> список формируется с помощью тегов <li>.

В HTML4 тег <menu> вышел из употребления, вместо него рекомендуется использовать тег <ul>. В HTML5 тег <menu> вновь включен, но уже в другом качестве. Теперь он выступает контейнером для тега <command> и создания меню.

Синтаксис

HTML
<menu>
  <li>пункт меню</li>
  <li>пункт меню</li>
</menu>
HTML5
<menu>
  ...
</menu>

Атрибуты

label
Устанавливает видимую метку для меню.
type
Задает тип меню.

Закрывающий тег

Обязателен.

Валидация

Использование этого тега осуждается спецификацией HTML4, валидный код получается только при использовании переходного <!DOCTYPE>. В HTML5 применение тега <menu> корректно.

Пример 1

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег MENU</title>
 </head>
 <body>
  <p><strong>В этом выпуске:</strong></p>
  <menu>
   <li>Русская кухня. Уха бурлацкая</li>
   <li>Украинская кухня. Вареники</li>
   <li>Молдавская кухня. Паприкаш</li>
   <li>Кавказская кухня. Суп-харчо</li>
   <li>Прибалтийская кухня. Вертиняй</li>
  </menu>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид списка, созданного с помощью тега <menu>

Пример 2

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег MENU</title>
 </head>
 <body>
  <menu type="toolbar">
   <li>
    <menu label="Файл">
      <button type="button">Новый...</button>
      <button type="button">Открыть...</button>
      <button type="button">Сохранить</button>
    </menu>
   </li>
   <li>
     <menu label="Правка">
      <button type="button">Копировать</button>
      <button type="button">Вырезать</button>
      <button type="button">Вставить</button>
     </menu>
    </li>
  </menu>
 </body>
</html>

Создаем выпадающее меню на чистом CSS

В сегодняшней статье я хотел бы рассказать, как создать на CSS2.1 и HTML выпадающее меню. Также я покажу один небольшой трюк, при помощи которого можно будет добавлять иконку «+» к элементам навигации в том случае, если в них скрыто выпадающее меню. Для этого мы воспользуемся псевдоэлементом :only-child.


Исходный код
Демо

Для начала мы создадим базовую структуру навигационного меню, состоящего из шести пунктов:

<nav>
			    <ul>
			        <li><a href="#">Home</a></li>
			        <li><a href="#">WordPress</a></li>
			        <li><a href="#">Graphic Design</a></li>
			        <li><a href="#">Inspiration</a></li>
			        <li><a href="#">Contact</a></li>
			        <li><a href="#">About</a></li>
			    </ul>
			</nav>

Далее нам нужно добавить базовые CSS-стили для HTML горизонтального меню. Я оставил комментарии к каждому блоку кода:

/* задаем цвет фона для контейнера nav. */
			nav {
			    margin: 100px 0;
			    background-color: #E64A19;
			}
			
			/* убираем отступы и поля, а также list-style для "ul", 
			 * и добавляем "position:relative" */
			nav ul {
			    padding:0;
			    margin:0;
			    list-style: none;
			    position: relative;
			    }
			
			/* применяем inline-block позиционирование к элементам навигации */
			nav ul li {
			    margin: 0px -7px 0 0;
			    display:inline-block;
			    background-color: #E64A19;
			    }
			
			/* стилизуем ссылки */
			nav a {
			    display:block;
			    padding:0 10px;
			    color:#FFF;
			    font-size:20px;
			    line-height: 60px;
			    text-decoration:none;
			}
			
			/* изменяем цвет фона при наведении курсора */
			nav a:hover {
			    background-color: #000000;
		}

После применения стилей у нас должно получиться нечто вроде этого:


Чтобы добавить выпадающий список к какому-либо из элементов HTML меню, нам нужно добавить <ul> внутрь элемента <li> для пункта, в котором нужно скрыть выпадающий список:

<nav>
			    <ul>
			        <li><a href="#">Home</a></li>
			        <li><a href="#">WordPress</a>
			
			            <!-- первый уровень выпадающего списка -->
			            <ul>
			                <li><a href="#">Themes</a></li>
			                <li><a href="#">Plugins</a></li>
			                <li><a href="#">Tutorials</a></li>
			            </ul>
			
			        </li>
			        <li><a href="#">Graphic Design</a></li>
			        <li><a href="#">Inspiration</a></li>
			        <li><a href="#">Contact</a></li>
			        <li><a href="#">About</a></li>
			    </ul>
		</nav>

Мы добавили новый неупорядоченный список с тремя пунктами списка внутрь второго элемента <li>, который отвечает за пункт меню WordPress. Обратите внимание на то, что мы добавили <ul> после анкорного тега (<a>).

Теперь добавим CSS-стили, чтобы выпадающий список был скрыт по умолчанию, и появлялся, когда посетитель наводит курсор мыши на соответствующий родительский элемент HTML меню для сайта. После приведенного выше CSS-кода добавьте следующий фрагмент:

/* скрываем выпадающие списки по умолчанию
			 * и задаем абсолютное позиционирование */
			nav ul ul {
			    display: none;
			    position: absolute;
			    top: 100%;
			}
			
			/* отображаем выпадающий список при наведении */
			nav ul li:hover > ul {
			    display:inherit;
			}
			
			/* первый уровень выпадающего списка */
			nav ul ul li {
			    min-width:170px;
			    float:none;
			    display:list-item;
			    position: relative;
			}

Если до этого момента вы все делали правильно, то при наведении курсора на пункт меню «WordPress» должны увидеть выпадающий список с тремя другими пунктами («Themes», «Plugins», «Tutorials»):


Чтобы добавить выпадающие списки, состоящие из нескольких уровней, этот процесс нужно повторить. Определяем пункт меню, из которого нужно сделать выпадающий список, и добавляем новый <ul> между тегами <li></li>.

Взгляните на приведенный ниже HTML-код, в котором мы добавляем второй уровень выпадающего списка к пункту меню «Tutorial», который находится внутри пункта «WordPress»:

<nav>
			    <ul>
			        <li><a href="#">Home</a></li>
			        <li><a href="#">WordPress</a>
			
			            <!-- первый уровень выпадающего списка -->
			            <ul>
			                <li><a href="#">Themes</a></li>
			                <li><a href="#">Plugins</a></li>
			                <li><a href="#">Tutorials</a>
			
			                    <!-- второй уровень выпадающего списка -->
			                    <ul>
			                        <li><a href="#">Stuff</a></li>
			                        <li><a href="#">Things</a></li>
			                        <li><a href="#">Other Stuff</a></li>
			                    </ul>
			                    <!—конец второго уровня выпадающего списка -->
			
			                </li>
			            </ul>
			            <!—конец первого уровня выпадающего списка -->
			
			        </li>
			        <li><a href="#">Graphic Design</a></li>
			        <li><a href="#">Inspiration</a></li>
			        <li><a href="#">Contact</a></li>
			        <li><a href="#">About</a></li>
			    </ul>
		</nav>

Чтобы вертикальное меню HTML отображалось корректно, нужно добавить еще пару строк CSS кода:

/* второй, третий и последующие уровни 
			 * смещаем 2 и 3 уровни влево 
			 * на значение длины первого уровня.
			*/
			nav ul ul ul {
			    position: absolute;
			    top:0;
			    left:100%;
		}

Если все сделано правильно, у вас должно получиться нечто вроде этого:


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

Добавляем индикатор выпадающего списка

Перед тем, как сделать выпадающее меню в HTML до конца, разберемся с индикатором, который указывает на наличие выпадающего списка, прикрепленного к тому или иному пункту меню (знак «+»):

/* измените ' +' на любой другой символ, если нужно
	*/
			li > a:after { content:  ' +'; }
		li > a:only-child:after { content: ''; }

Для этого мы используем псевдоэлемент CSS3 (:only-child). В данном случае он проверяет, имеются ли в тегах <li> родительского элемента другие элементы. Если нет, то знак плюса просто убирается, так как по умолчанию он присутствует рядом со всеми пунктами. Видите + возле пунктов WordPress и Tutorials?


Значит, вы все сделали правильно.

В завершение

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

А как вы сделали меню на HTML? Пожалуйста, расскажите об этом в комментариях.

Данная публикация представляет собой перевод статьи «How to Create a Pure CSS Dropdown Menu» , подготовленной дружной командой проекта Интернет-технологии.ру

Адаптивное меню для сайта

Лого SiteHere.ru