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

Как сделать навигационное меню — учебник CSS

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

Создание навигации

Что такое навигация? Это набор ссылок, зачастую упорядоченных и сгруппированных по смыслу. Навигационное меню часто создается с использованием HTML-тега списка <ul>, где в каждом пункте <li> содержится одна ссылка <a>. В HTML5 для навигации ввели отдельный тег <nav>, куда можно просто помещать теги ссылок. После создания HTML-каркаса можно переходить к его стилизации с помощью CSS, где вы можете определять, каким будет ваше меню — вертикальным, горизонтальным, выпадающим и т.

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

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contacts</a></li>
</ul>

Изначально, без стилей наша навигация выглядит, как обычный список:

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

.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

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

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

Вертикальное меню

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

Блочные ссылки

Прежде всего нужно сделать все теги <a> блочными элементами:

.menu a { display: block; }

Существует несколько причин для этого:

1. Вы сможете задавать отступы для ссылок.

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

   
   
   GIF

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

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

Ширина меню

Следующее, что нам понадобится сделать — это задать ширину меню. Если у вас заранее не была определена ширина навигационной панели, и она не находится в контейнере, который ограничивает ее, то меню будет растянуто на всю ширину окна (как в нашем примере выше) — ведь блочный элемент по умолчанию ведет себя именно так. Вы можете задать необходимую ширину для элемента . menu, например:

.menu { width: 300px; }

Вместо этого можно установить ширину для пунктов <li> либо для ссылок <a> — визуально эффект может быть одинаковый, но учтите, что в таком случае ширина элемента .menu всё равно останется 100%.
 

Разделение пунктов

Чтобы визуально разделить пункты меню, можно задать каждому из них нижнюю или верхнюю границу. В зависимости от того, какую из них вы используете, у вас будет не хватать границы сверху или снизу меню. Это можно исправить, добавив еще одну границу к самому блоку .menu:

.menu a {
    border-top: 1px solid blue;
}
.menu {
    border-bottom: 1px solid blue;
}

Высота пунктов и вертикальное выравнивание

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

. menu a {
  height: 30px;
  line-height: 30px;
}

Как видно на анимации, свойство height влияет на высоту ссылки, а межстрочный интервал line-height изменяет уже высоту самой текстовой строки. Обязательно задавайте одинаковые значения для этих двух свойств, если хотите, чтобы текст ссылки был вертикально отцентрирован.

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

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

Способ первый

Первый вариант — задать пунктам списка свойство display со значением inline либо inline-block:

.menu li {
  display: inline;
}

При этом теги <a> внутри <li> нельзя делать блочными, иначе пункты перестанут выстраиваться горизонтально и снова встанут в вертикальную позицию.

После этого можно заняться оформлением ссылок. Например, можно сделать такой стиль:

.menu a {
  text-decoration: none;
  font-family: sans-serif;
  color: #5757a0;
  display: inline-block;
  padding: 10px 20px;
  background-color: lavender;
  border-bottom: 5px solid #5757a0;
}

Мы добавили фоновый цвет и нижнюю границу для каждой ссылки, а также увеличили ее размеры при помощи внутренних отступов padding. Заметьте, что между пунктами меню есть небольшие промежутки, хоть мы и не добавляли их через стили. Они возникают, потому что браузер так воспринимает символ возврата каретки между закрывающим и открывающим тегами <li>. Эти промежутки можно убрать, записав HTML-код списка в одной строке:

<ul>
 <li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Gallery</a></li>
 .  ..
</ul>

Однако это неудобно, ведь эти изменения придется вносить в HTML вручную, да и чтение кода затрудняется. Поэтому попробовать избавиться от промежутков можно с помощью отрицательного значения margin-right:

.menu li {
  margin-right: -5px;
}

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

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

Способ второй

Возможно, вы уже догадались, что второй вариант создания горизонтального меню заключается в использовании свойства float. Для этого добавьте стиль для тегов <li>:

.menu li {
  float: left;
}

Как видим, промежутков между пунктами уже нет. Все остальные стили работают, как и прежде. Но если вы добавите после навигации другой HTML-элемент (допустим, <h2>), то на него повлияет обтекание и он встанет в один ряд с пунктами меню. Отменить это действие можно, добавив заголовку свойство

.menu {
  overflow: hidden;
}

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

Примечание: если вы установите фон для элемента .menu, то вы не увидите его до тех пор, пока не примените к нему overflow: hidden. Логично, ведь как можно увидеть фон элемента, чья высота равна нулю?

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

Горизонтальное меню для сайта на HTML+CSS готовые шаблоны | Как создать красивое горизонтальное выпадающее меню с примером

Доброго времени суток, дорогие читатели. Сегодня мы разберем тему «как сделать горизонтальное меню используя HTML и CSS». Меню, как правило, находится в шапке сайта и является перечнем ссылок на самые важные страницы, его также называют главным меню. Данные ссылки пользователи будут постоянно нажимать. То, как вы их расположите и какой дизайн вы зададите меню будет влиять на поведение пользователей, конверсию, их общее впечатление от вашего сайта и, конечно, на seo-продвижение.

HTML-код для горизонтального меню

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

Для создания меню используют теги <ul>, <li> и <a>.

Если вам не совсем понятно, что такое эти html-теги, css, таблицы, то почитайте об основных технологиях для создания сайта.

Пример использования html тегов для создания меню в коде ниже:

<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Цены</a></li>
<li><a href="#">Контакты</a></li>
</ul>

Стандартные CSS стили для горизонтального меню

ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем отступы*/
  padding-left: 0; /*убираем отступы*/
}
a {
  text-decoration: none; /*убираем подчеркивание текста ссылок*/
}
li {
  float:left; /*Размещаем список горизонтально для реализации меню*/
  margin-right:5px; /*Добавляем отступ у пунктов меню*/
}

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

Пример каркаса (шаблона) вашего будущего меню

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

Существует так же несколько других CSS методов используемых для того чтобы сделать меню горизонтальным помимо float:left;, например, display:inline-block; или display:flex;, но рекомендуется использовать способ описанный выше.

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

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

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

Все «красивости» вы можете создать для своего сайта сами, а не искать в интернете. Проще всего это сделать взяв за основу один из примеров ниже

Простое меню синего цвета с раздельными пунктами

CSS стили «верхнего» меню

Ниже расположены стили данного меню. HTML остается тем же, что и в «каркасе» меню.

ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем отступы*/
  padding-left: 0; /*убираем отступы*/
  margin-top:25px; /*делаем отступ сверху*/
}
a {
  text-decoration: none; /*убираем подчеркивание текста ссылок*/
  background:#30A8E6; /*добавляем фон к пункту меню*/
  color:#fff; /*меняем цвет ссылок*/
  padding:10px; /*добавляем отступ*/
  font-family: arial; /*меняем шрифт*/
  border-radius:4px; /*добавляем скругление*/
  -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
  -o-transition: all 0.3s 0.01s ease;
  -webkit-transition: all 0.3s 0.01s ease;
}
a:hover {
  background:#1C85BB;/*добавляем эффект при наведении*/
}
li {
  float:left; /*Размещаем список горизонтально для реализации меню*/
  margin-right:5px; /*Добавляем отступ у пунктов меню*/
  
}

Главное меню, расположенное на цветной линии с красным фоном

CSS стили меню на цветной линии

ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем отступы*/
  padding-left: 0; /*убираем отступы*/
  margin-top:25px; /*делаем отступ сверху*/
  background:#FF4444; /*добавляем фон всему меню (заменив этот параметр, вы поменяете цвет всего меню)*/
  height: 50px; /*задаем высоту*/
}
a {
  text-decoration: none; /*убираем подчеркивание текста ссылок*/
  background:#FF4444; /*добавляем фон к пункту меню (заменив этот параметр, вы поменяете цвет всех пунктов меню)*/
  color:#fff; /*меняем цвет ссылок*/
  padding:0px 15px; /*добавляем отступ*/
  font-family: arial; /*меняем шрифт*/
  line-height:50px; /*ровняем меню по вертикали*/
  display: block; 
  border-right: 1px solid #F36262; /*добавляем бордюр справа*/
  -moz-transition: all 0. 3s 0.01s ease; /*делаем плавный переход*/
  -o-transition: all 0.3s 0.01s ease;
  -webkit-transition: all 0.3s 0.01s ease;

}
a:hover {
  background:#D43737;/*добавляем эффект при наведении*/
}
li {
  float:left; /*Размещаем список горизонтально для реализации меню*/
}

Выпадающее меню на HTML+CSS

Для реализации дополнительного выпадающего (раскрывающегося) меню на сайте у какого-либо пункта меню нам необходимо добавить дополнительный перечень пунктов в HTML-код для какой-либо ссылки из горизонтального меню и изменить стили CSS. В стилях мы будем применять простой трюк — изменение отображения раскрывающегося меню по средствам наведения на нужный нам пункт в верхнем меню. Для примера возьмем пункт «услуги».

Пример создания простого выпадающего меню

HTML код выпадающего меню

<ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Услуги</a>
        <ul>
            <li><a href="#">Услуга 1</a></li>
            <li><a href="#">Длинная услуга 2</a></li>
            <li><a href="#">Услуга 3</a></li>
        </ul>
    </li>  
    <li><a href="#">Цены</a></li>
    <li><a href="#">Контакты</a></li>
</ul>

Стили CSS выпадающего меню

ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем отступы*/
  padding-left: 0; /*убираем отступы*/
  margin-top:25px; /*делаем отступ сверху*/
  background:#819A32; /*добавляем фон всему меню*/
  height: 50px; /*задаем высоту*/
}
a {
  text-decoration: none; /*убираем подчеркивание текста ссылок*/
  background:#819A32; /*добавляем фон к пункту меню*/
  color:#fff; /*меняем цвет ссылок*/
  padding:0px 15px; /*добавляем отступ*/
  font-family: arial; /*меняем шрифт*/
  line-height:50px; /*ровняем меню по вертикали*/
  display: block; 
  border-right: 1px solid #677B27; /*добавляем бордюр справа*/
  -moz-transition: all 0. 3s 0.01s ease; /*делаем плавный переход*/
  -o-transition: all 0.3s 0.01s ease;
  -webkit-transition: all 0.3s 0.01s ease;

}
a:hover {
  background:#D43737;/*добавляем эффект при наведении*/
}
li {
  float:left; /*Размещаем список горизонтально для реализации меню*/
  position:relative; /*задаем позицию для позиционирования*/
}
     
    /*Стили для скрытого выпадающего меню*/
    li > ul {
        position:absolute;
        top:25px;
        display:none;   
    }
     
    /*Делаем скрытую часть видимой*/
    li:hover > ul {
        display:block; 
        width:250px;  /*Задаем ширину выпадающего меню*/      
    }
   li:hover > ul > li {
        float:none; /*Убираем горизонтальное позиционирование*/
    }

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

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

Поделитесь в одной из социальных сетей и скачивание сразу же будет доступно.

Благодарю за внимание.

Тег | htmlbook.ru

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

Описание

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

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

Синтаксис

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

<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>

Создание меню сайта с помощью движка и html-кода

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

Навигация в wordpress

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Что делать, если вы хотите изменить именно внешний вид? Для этого полезно будет воспользоваться инструментом для разработчиков – отладчиком. Хотя вы не разработчик, он вам пригодится.

Для его запуска в Google Chrome или Яндекс. Браузере нажмите F12. Вам нужно найти, какой кусочек кода ответственен за вывод блока меню. А точнее, нам нужно обнаружить стилевой класс или идентификатор у навигационного блока. Если это получится, то можно будет найти в css стили для этого элемента и изменить их на свои.

При наведении на html-код отладчик будет подсвечивать вам элемент, который он формирует. Так можно найти нужный элемент быстро и просто. Всего лишь в 2 клика нашли, что наше меню находится в блоке с классом all-width и лежит в теге nav.

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

Меню с помощью html

Теперь можно посмотреть, как на самом деле в коде выглядит практически любое меню. Для его создания сегодня принято использовать контейнер nav. Это парный html-тег, в который обычно помещают важные ссылки, которые есть на странице. Выводят такие ссылки обычно маркированным списком, в нем располагаются пункты списка, а уже в них – сами ссылки, то есть теги <a> с указанием обязательного атрибута href и прочих атрибутов, если они будут необходимы.

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

В общем, создание меню сайта в html выглядит примерно так:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

<nav id = «menu»> <ul> <li><a href = «#»>Пункт 1</a></li> <li><a href = «#»>Пункт 2</a></li> <li><a href = «#»>Пункт 3</a></li> <li><a href = «#»>Пункт 4</a></li> </ul> </nav>

И выглядит вот так:

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

Собственно, дальнейшая работа происходит в css. Например, если вам нужно убрать маркеры и сделать все пункты в ряд, то используют следующие свойства:

#menu ul{ list-style: none; } #menu li{ float: left; padding: 15px; }

И вот наша навигация выглядит уже более цивилизованно. А именно, вот так:

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

#menu li a{ display: block; background: purple; padding: 10px; color: #fff; } #menu li a:hover{ background: #333; }

И теперь навигация приобрела человеческий вид:

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

Что ж, у меня на этом все. Теперь можно практиковаться и создавать свое уникальное оформление для навигации на любом веб-ресурсе.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

CSS меню. Простое меню для сайта. Горизонтальное CSS меню.

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

Как и в прошлой публикации, меню сайта будет создано при помощи маркированного HTML списка (при помощи тегов <li> и <ul>). Оформлять горизонтальное меню для сайта мы будем при помощи таблицы стилей (CSS), мы не будем использовать JavaScript для создания горизонтального CSS меню. Как и в прошлый раз, мы не будем использовать изображений для создания горизонтального CSS меню.

Создание меню для сайта. Горизонтальное CSS меню. Шаг 1 -создание HTML макета меню.

Содержание статьи:

И так, начнем мы с создания HTML макета меню сайта. Для этого мы воспользуемся HTML списком, ненумерованным списком:

</p> <!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>Создание CSS меню</title> <link rel=»stylesheet» href=»style. css» type=»text/css» > </head> <body> <div> <ul> <li><a href=»#»>Home</a></li> <li><a href=»#»>Ссылка1</a></li> <li><a href=»#»>Ссылка2</a></li> <li><a href=»#»>Ссылка3</a></li> <li><a href=»#»>Ссылка4</a></li> </ul> <span><span><br></span></span> </div> </body> </html> <p>

Сразу подключаем файл таблиц стилей, который называется style.css. При помощи тегов <ul> и <li> создаем HTML макет меню для сайта. Поскольку, пункты нашего горизонтального CSS меню должны куда-нибудь вести, делаем их ссылками при помощи тега <a>, в качестве значения атрибута href устанавливаем #(хэш), ссылки с таким атрибутом никуда не ведут. HTML список меню помещаем в контейнер <div> с идентификатором hmenu, поскольку внутри элемента <body> могут находиться только блочные HTML элементы и элементы <ins> и <del>. После созданного списка стоит тег <br> — перевод строки, он нужен для того, чтобы растянуть меню сайта по горизонтали на всю ширину окна браузера.

Создание меню для сайта. Горизонтальное CSS меню. Шаг 2 — Задаем стили для меню сайта.

Первое, что нужно сделать — это задать цвет фона и ширину контейнера <div> в CSS, хотя вы знаете, что блочные HTML элементы занимают всю доступную ширину, в отличие от строчных HTML элементов:

#menu{ width: 100%; background-color: #333; }

Затем нам нужно задать общий стиль для горизонтального CSS меню:

#menu ul{ margin: 0; padding: 0; float: left;}

Здесь мы убираем внутренние и внешние отступы, а также «прижимаем» меню сайта к левой границе окна браузера.

Теперь можно задать стиль отображения для всех пунктов меню сайта:

#menu ul li{ display: inline;}

Мы знаем, что элемент <li> относится к блочным, то есть занимает всю область, в которой он стоит, из-за этого наше меню было вертикальным, добавив CSS свойство display: inline, мы сделали элементы <li> строчными, а наше меню стало горизонтальным.

Теперь мы можем задать CSS стили для содержимого контейнеров <li>, то есть стили для навигации горизонтального меню(для тега <a>):

#menu ul li a{ float: left; text-decoration: none; color: white; padding: 10.5px 11px; background-color: #333; }

CSS свойство float:left выравнивает горизонтальное меню и контейнер <div> по верхней границе. Все ссылки по умолчанию подчеркиваются браузером, чтобы избавиться от этого недоразумения мы используем свойство text-decoration:none. Далее мы задаем цвет ссылок, то есть цвет текста меню сайта. Внутренними отступами мы расширяем наше горизонтальное меню.

Задаем стили для посещенных пунктов меню и то, как будут отображаться пункты меню, при наведение на них курсора мыши:

</p> #menu ul li a:visited{ color: white;} #menu ul li a:hover{ color: #fff; background-color:#0b75b2;} <p>

Ну тут все понятно: мы задаем цвет текста и цвет фона для горизонтального CSS меню.

Осталось задать стиль для тега <br>, чтобы выровнять по высоте горизонтальное меню и элемент <div>:

</p> <p>br{clear:left;}</p> <p>

Это горизонтальное CSS меню будет растягиваться на всю ширину окна браузера и при это данное меню корректно отображается во всех браузерах.

Исходные коды примеров вы можете скачать на публичных страницах вконтакте: раз и два.

На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru. Не забываем комментировать и делиться с друзьями;)

Как сделать фиксированное меню

Узнайте, как создать «фиксированное» меню с помощью CSS.

Как создать фиксированное верхнее меню

Шаг 1) добавить HTML:

Пример

<div>
  <p>Some text some text some text some text..</p>
</div>

Шаг 2) добавить CSS:

Чтобы создать фиксированное верхнее меню, используйте position:fixed и top:0. Обратите внимание, что фиксированное меню будет накладывать другое содержимое. Чтобы исправить это, добавьте margin-top (к содержимому), которое равно или больше, чем высота вашего меню.

Пример

/* Links inside the navbar */
.navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change background on mouse-over */
.navbar a:hover {
    background: #ddd;
    color: black;
}

/* Main content */
.main {
    margin-top: 30px; /* Add a top margin to avoid content overlay */
}

Как создать фиксированное нижнее меню

Чтобы создать фиксированное нижнее меню, используйте position:fixed и bottom:0:

Пример

/* Main content */
.main {
    margin-bottom: 30px; /* Add a bottom margin to avoid content overlay */
}

Совет: Чтобы узнать больше о навигационных панелях, перейдите в наш Учебник CSS Navigation.

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

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

Как я и говорил, структура меню в обоих способах одинакова, меняется только id=menu_номер-примера:

<div>
 <ul>
      <li><a href="#">Пункт 1</a></li>
      <li><a href="#">Пункт 2</a></li>
      <li><a href="#">Пункт 3</a></li>
      <li><a href="#">Пункт 4</a></li>
      <li><a href="#">Пункт 5</a></li>
      <li><a href="#">Пункт 6</a></li>
      <li><a href="#">Пункт 7</a></li>
  </ul>
</div>

Первый способ

Стандартное горизонтальное HTML меню, которое можно увидеть на многих сайтах. Первым делом добавляем HTML структуру меню. Она будет состоять из «оберточного» дива с id=menu_1, в который кладем наш ненумерованный HTML список. Собственно, можно обойтись и без тега div (чем меньше тегов – тем лучше и все такое…), дописав наш id непосредственно к ul, но это будет зависеть от вашего шаблона. Иногда без «оберток» вообще ничего путного не сверстаешь.

<div>
    <ul>
      <li><a href="#">Пункт 1</a></li>
      <li><a href="#">Пункт 2</a></li>
      <li><a href="#">Пункт 3</a></li>
      <li><a href="#">Пункт 4</a></li>
      <li><a href="#">Пункт 5</a></li>
      <li><a href="#">Пункт 6</a></li>
      <li><a href="#">Пункт 7</a></li>
  </ul>
</div>

Далее добавляем CSS стили меню:

#menu_1{
    background-color: #69c;
}
    #menu_1 ul{
     list-style: none;
       margin: 0;
      padding: 0;
 }
   #menu_1 ul:after{
       content: "";
      display: block;
     clear: both;
        height: 0;
  }
       #menu_1 li{
         float: left;
        }
           #menu_1 li a{
               display: block;
             height: 50px;
               line-height: 50px;
              padding: 0 20px;
                background-color: #69c;
             color: #fff;
                text-transform: uppercase;
              text-decoration: none;
              cursor: pointer;
            }
           #menu_1 li a:hover{
             background-color: #369;
         }

Тут поподробнее:

1. Первым делом задаём фон «обёртки» тем же цветом, что и пункты нашего меню, иначе будем наблюдать «дребезг» в несколько пикселей при отрисовке страницы разными браузерами, куда будет заползать цвет «верхних» элементов, если таковые есть, или белый цвет body, если не задан другой;

2. Убираем маркеры у списка ul и обнуляем внешние и внутренние отступы;

3. Запрещаем обтекание, подробнее как сделать читаем в ранее написанной статье, это необходимое действие, так как для пунктов меню будет использоваться свойство float;

4. Используем float со значением left для элементов li, чтобы выстроить их в один ряд;

5. Для ссылок, указываем стили. Главное указать display со значением block чтобы ссылки стали блочными и заняли всё допустимое место внутри элемента li;

6. Готово.

В зависимости от дизайна макета, может возникнуть потребность растянуть меню на всю ширину, следует использовать следующие стили CSS, подробнее читаем в статье – HTML список на всю ширину.

HTML без изменений, для примера меняем id=menu_2.

Основной CSS остается практически неизменным, необходимый нам эффект заключен в следующих строках:

#menu_2 ul{
   list-style: none;
   margin: 0;
  padding: 0;
 text-align: justify;
    overflow: hidden;
   height: 50px;
}
#menu_2 ul:after{
 content: "";
  width: 100%;
    display: inline-block;
}
 #menu_2 li{
     display: inline-block;
  }

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

Второй способ

Второй способ реализации горизонтального меню заключается в превращении нашего списка в таблицу. Да да, мы не будет использовать теги table и иже с ними. Почему? Как писал выше – исторически сложившийся факт, HTML таблица не используется для построения меню, связано это, в первую очередь, с неудобством прикручивания такого меню к движку. А уж если попытаться сделать и выпадающие вкладки в пунктах, то вы получите такого «монстра», что нагнете всю дальнейшую структуру страницы в самом её начале.

Так вот, для реализации нам нужны стандартные свойства таблицы, поэтому мы воспользуемся нехитрыми манипуляциями с CSS стилями: элементу ul задаем свойство display со значением table а тегам li display — table-cell и, вуаля, перед нами уже горизонтальное меню в виде таблицы со всеми вытекающими свойствами.

Смотрим на пример с id=menu_3.

CSS, опять же, стандартный, отличаются только эти строки:

#menu_3 ul{
    list-style: none;
   margin: 0;
  padding: 0;
 display: table;
}
    #menu_3 li{
     display: table-cell;
    }

Как и в первом способе, пункты меню не будут растянуты на всю ширину нашего оберточного дива. Чтобы их растянуть следует дописать свойства table-layout — fixed и width — 100% к элементу ul. В этом случае ul растянутся на всю ширину, а элементы li станут одной ширины (смотрим пример с id=menu_4).

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

Добавление меню на ваш сайт

Обновлено 20 октября 2016 г., 10:16

Business Catalyst Объявление об окончании срока службы — узнайте больше.

Business Catalyst предлагает несколько типов меню, но лучше всего использовать тот, который создает чистый код, который хорош для SEO, и это только HTML. тип меню.

Рабочий процесс добавления меню состоит из следующих шагов:

• Создайте модуль динамического меню.
• Вставьте модуль

Создать модуль динамического меню

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

Вставить меню на страницу

• Откройте страницу в режиме редактирования, выбрав «Менеджер сайта»> «Страницы» и щелкнув страницу в дереве.
• Поместите курсор в редактор содержимого, куда вы хотите вставить меню.
• На вкладке «Модули» панели инструментов справа от редактора выберите «Модули сайта»> «Меню».
• Выберите модуль меню из списка и нажмите «Вставить».
• Business Catalyst вставляет тег-заполнитель, представляющий модуль. Пример: {module_menu, 1630715}. Когда вы публикуете страницу, меню заменяет тег-заполнитель.
• Нажмите «Опубликовать» или «Сохранить черновик».

Примечание: Вы также можете добавить меню в шаблон. См. Раздел Работа с шаблонами

Изменить меню

• Выберите «Менеджер сайта»> «Меню» и щелкните меню в списке.
• Чтобы отредактировать элемент меню, выберите его в древовидной структуре и внесите изменения. Нажмите «Сохранить элемент» после изменения каждого элемента.
• Чтобы изменить общий вид меню, выберите «Вид меню».Щелкните Сохранить, чтобы применить изменения.
• Чтобы изменить общий вид элементов меню, выберите «Вид элементов». Щелкните Сохранить, чтобы применить изменения.

Примечание: Изменения немедленно отражаются на любой странице, содержащей модуль динамического меню.

Как легко создавать собственные меню в WordPress!

WordPress — одна из тех платформ, на которых можно делать практически все. Достаточно провести пару минут в панели администратора, и вы сможете сделать свой сайт таким, каким вы хотите.То же самое и с пользовательским меню . Создавать их и управлять ими очень просто , и каждый может это сделать.

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

Как создавать собственные меню в WordPress

Создать собственное меню на самом деле очень просто.Я использовал Twenty Fifteen, тему WordPress по умолчанию, чтобы показать вам все шаги, которые необходимо предпринять для создания собственных пользовательских меню.

Давайте сделаем шаг за шагом.

Чтобы настроить меню вашего веб-сайта по умолчанию, вам нужно войти в панель управления WordPress, нажать Appearance , а затем Menus . Первое, что вам нужно сделать, это дать меню имя, а затем нажать кнопку Create Menu .

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

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

Я выбрал для теста все, но вы должны использовать только те, которые вам нужны.

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

Помимо стандартных меню, вы также можете создавать подменю. Просто перетащите пункт меню вправо от другого пункта меню. Вот так:

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

Как выбрать расположение пользовательского меню

Теперь, когда у вас готово настраиваемое меню, пора выбрать, где вы хотите его разместить.Но здесь нужно знать одну важную вещь.

Не все темы WordPress поддерживают несколько меню. Количество меню по умолчанию — два: первичное и вторичное (в случае Twenty Fifteen второе называется Меню социальных ссылок ). Затем, в зависимости от параметров настройки вашей темы, вы можете использовать больше. Например, некоторые темы позволяют создавать меню нижнего и верхнего колонтитула отдельно от меню по умолчанию.

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

Меню нижнего колонтитула, очевидно, будет находиться в нижнем колонтитуле, и оно может содержать такие элементы, как «Контакты», «О нас» или любые другие элементы, которые также можно найти в основном меню.

Теперь, в моем случае, вы увидите только два пункта меню — первичный и социальный — потому что тема Twenty Fifteen поддерживает только их. Но если ваша тема предоставляет больше меню, вы можете управлять ими на вкладке Управление местоположениями прямо здесь:

Итак, сколько меню использовать — это ваш выбор.Если вы планируете использовать более двух меню, заранее проверьте настройки темы.

Как удалять и переименовывать пункты меню

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

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

Наконец, нажмите одну из двух доступных синих кнопок Меню сохранения .Это эффективно сохранит все внесенные вами изменения.

Как добавить пользовательские ссылки в ваше меню

Все, что вам нужно сделать, это щелкнуть Custom Links в левом столбце, и на этом этапе вы можете добавить любую ссылку в свое меню. Каждая ссылка требует URL (его уникальный веб-адрес) и Link Text (имя ссылки в меню). Нажмите Добавить в меню , и все готово.

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

Как делать ссылки на страницы категорий или теги

Хотите добавить категории сообщений в свое меню? Щелкните вкладку Категории в том же левом столбце и выберите те, которые должны появиться в вашем меню. Действуйте так же, как и с другими предметами.

Как добавить социальное меню

Создать меню для социальных сетей даже проще, чем создать обычное. Щелкните ссылку «Создать новое меню» , введите имя и щелкните Создать меню .

Следующим шагом является установка флажка Меню ссылок на социальные сети внизу и использование вкладки Пользовательские ссылки для добавления ссылок на социальные сети.

Например, вы можете ввести «Twitter» в качестве текста ссылки и вставить адрес своей учетной записи Twitter в поле URL . Затем нажмите Добавить в меню, , и ваша учетная запись Twitter будет добавлена ​​в социальное меню.

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

Вот как выглядят мои два пользовательских меню после выполнения описанных выше шагов (я использовал тему Twenty Fifteen):

Было ли вам полезно это руководство? Сообщите нам, каким был ваш первый опыт создания настраиваемого меню в WordPress.

Бесплатный гид

5 основных советов по ускорению работы вашего сайта на WordPress

Сократите время загрузки даже на 50-80%

Меню сайта — Поддержка — WordPress.com

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

Содержание

Видеоурок

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

↑ Содержание ↑

Чтобы создать меню своего сайта, выполните следующие действия:

1. Перейти к Внешний вид → Настроить .
2. Нажмите на Меню :

3. Вы увидите, что по умолчанию для вас создано меню, обычно называемое чем-то вроде Primary или Main Menu . Перейдите к следующему разделу, чтобы начать добавлять элементы в это меню.

   Если вы еще не видите здесь меню, нажмите Создать новое меню .

4. Дайте вашему меню имя, например «Основное меню».
5. В разделе «Расположение меню» установите хотя бы один флажок. Ваше меню появится в выбранном вами месте. (Расположение, которое вы видите здесь, зависит от вашей темы.)
6. Щелкните Далее , чтобы начать добавлять элементы в новое меню.

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

Теперь, когда вы создали свое меню, вы можете добавить в него свои страницы и другие ссылки, выполнив следующие действия:

1. Нажмите кнопку + Добавить элементы .
2. В разделе Pages вы увидите список опубликованных страниц вашего сайта.Щелкните заголовок любой страницы, чтобы добавить его в свое меню. Вы также можете добавлять сообщения, проекты портфолио, категории блогов, настраиваемые ссылки на другие веб-сайты и многое другое.
3. Если вы хотите переупорядочить элементы, щелкните Изменить порядок . Более подробно это объясняется здесь.
4. Нажмите Сохранить изменения , чтобы опубликовать изменения на вашем сайте.

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

• Custom Link — настраиваемый URL-адрес, указывающий на другой сайт.
• Страницы — ссылка на другую страницу вашего сайта.
• Сообщения — запись в блоге на вашем сайте.
• Отзывы — ссылка на отзывы.
• Проекты — ссылка на страницу вашего портфолио проектов.
• Категории — лента сообщений блога из заданной категории.
• Теги — лента сообщений в блоге по заданному тегу.
• Типы проектов — ссылка на определенный тип проекта портфолио.
• Теги проекта — ссылка на конкретный тег проекта портфолио.

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

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

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

Обязательно установите хотя бы один флажок в разделе Расположение меню . Расположение главного меню вашего сайта обычно называется «Основное меню», «Заголовок», «Верх» или «Главное меню».

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

В разделе Опция меню s , отметьте «Автоматически добавлять новые страницы верхнего уровня в это меню», если вы хотите, чтобы вновь созданные страницы автоматически добавлялись в меню.

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

↑ Содержание ↑

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

1. Щелкните ссылку Reorder , которая находится под списком пунктов меню.
2. Щелкайте стрелки вверх или вниз, чтобы переместить пункт меню вверх или вниз в меню.
3. Щелкайте стрелки вправо и влево, чтобы вкладывать или отменять вложенность страниц под другими страницами. Так создаются выпадающие меню.
4. Нажмите Сохранить изменения вверху, чтобы сохранить изменения.

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

↑ Содержание ↑

Чтобы создать подменю , или раскрывающееся меню Меню , в котором при наведении курсора на пункт меню появляются дополнительные элементы, выполните следующие действия:

1. Добавьте все пункты меню, которые вы хотите иметь в меню вашего сайта.
2. Щелкните ссылку Повторный заказ .
3. Щелкните стрелку> вправо, чтобы вложить страницу под страницу над ней, создав раскрывающееся меню.
4. Когда раскрывающееся меню закончится, нажмите Готово .
5. Нажмите Сохранить изменения , чтобы опубликовать изменения на сайте.

↑ Содержание ↑

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

1. Щелкните Добавить элементы .
2. Щелкните опцию Custom Links .
3. В поле URL введите символ #, как показано на изображении справа.
4. В поле Link Text введите текст, который должен отображаться в вашем меню, как показано на изображении справа.
5. Щелкните Добавить в меню .

↑ Содержание ↑

Вы можете удалить элемент меню, сначала щелкнув его, чтобы развернуть параметры, а затем щелкнув Удалить :

Удаление страницы из меню не приведет к удалению страницы с вашего сайта. Он удаляет только ссылку на страницу из вашего меню.

↑ Содержание ↑

Вы можете изменить название пункта меню, как оно отображается на вашем сайте.

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

Например, вы можете назвать свою страницу как-то вроде «Связаться с командой», но в меню вы просто хотите, чтобы она отображалась как «Контакт.”

↑ Содержание ↑

Если вы хотите внести изменения в способ отображения меню, такие как положение, выравнивание или размер, вы можете использовать собственный CSS, доступный в плане WordPress.com Premium и выше.

Следующая страница: Меню в WP Admin

Страницы: 1 2 3 Просмотреть все

10 шагов для улучшения навигации по сайту

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

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

1. Планирование навигации

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

Документ Google или электронная таблица Excel:

Стиль диаграммы:

Список документов Word:

2. Удобный язык

Также важно учитывать язык навигации по меню и маркировку.При такой большой конкуренции в сети неудивительно, что мы пытаемся проявить творческий подход к копирайтингу, но иногда это происходит за счет ясности. Ваш сайт может быть отраслевым, однако важно не забывать о пользователях и о том, как они интерпретируют или понимают то, что вы делаете. Например, если вы назвали торговую зону «Торговая площадка», это не тот термин, с которым пользователи знакомы, и, следовательно, он оставляет возможность для толкования. Любая ссылка, на определение которой уходит больше секунды, или язык, который заставляет пользователя щелкнуть, чтобы узнать, что доступно, ставит под угрозу взаимодействие с пользователем.Если вам интересно, какая формулировка лучше подойдет для вашей основной навигации, вы можете провести A / B-тестирование. Чаще всего лучше, чтобы ваша основная навигация была простой и понятной, и если вы хотите добавить персонализацию, почему бы не попробовать это с помощью всплывающих окон и уведомлений? Приведенный ниже пример из Spread Shirt иллюстрирует умный копирайтинг, побуждающий пользователей оставлять отзывы.

Распашонка

3. Не изобретайте велосипед заново (используйте веб-соглашения)

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

Плоский или не

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

Сборка Амстердам

4. Первичная навигация

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

Zeis Excelsa

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

Лос-Анджелес Таймс

Интересная навигация слева с полосой прокрутки и вторым уровнем, который выдвигается вправо.

Cadbury Сборщик средств

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

Auberge Handfield Country Inn

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

Город Мельбурн

Верхняя и центральная навигация хорошо контрастирует с углем в качестве основного цвета и ярко-зеленым цветом для активных состояний.

The Gify’s

Прочный левый дизайн навигации, который хорошо выделяется на черном фоне (контент на этом сайте также очень интересный, так что наслаждайтесь гифками!).

5.Ссылка логотипа на главную страницу

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

6. Адаптивная навигация

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

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

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

Blue Cross мобильный

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

Дети родителей с психическими заболеваниями

Еще один сайт, над которым мы сейчас работаем, — это «Дети родителей с психическими заболеваниями» (COPMI), и вот как навигация ищет для мобильных устройств.

7. Толстые колонтитулы

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

YMCA NSW

8. Липкая навигация

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

Огромный

9. Укажите где вы находитесь

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

Торговый центр Мельбурна

Artspace

Чифли

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

IWSML

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

Блюкросс

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

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

10.Когда использовать мегаменю

Мега-меню — это большие навигационные панели, которые обычно выпадают или вылетают из глобальной панели навигации. Хотя они подходят не для каждого сайта, мегаменю могут создать для пользователя отличные возможности навигации, если все сделано правильно. Основное преимущество мегаменю заключается в том, что они позволяют отображать сразу несколько опций. В мегаменю могут использоваться значки и изображения, а также типографская иерархия, чтобы упростить сканирование. Итак, когда они пригодятся? На мой взгляд, мегаменю хорошо подходят для сайтов розничной торговли, где списки категорий довольно велики и не будут хорошо смотреться в стандартном раскрывающемся меню.Они также хорошо работают для сайтов с большим списком услуг, таких как, например, Virgin Australia или ING. Butterfly разработала несколько сайтов, использующих мегаменю, однако этот подход применялся только тогда, когда это было сочтено целесообразным. Ниже приведены несколько примеров ярких дизайнов мегаменю.

Заключение

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

• Тщательно спланируйте карту сайта в начале проекта
• Общее правило — пользователи должны знать, где они, куда они идут и где они были!
• Предоставляет множество вариантов навигации
• Соблюдайте веб-соглашения
• Не бойтесь сохранить отображение гамбургер-меню на сайтах для ПК, если это необходимо.
• Используйте простые понятные термины

Источники и источники вдохновения для блога

http: // blog.htc.ca/2013/09/03/web-design-conventions/
http://designbit.co.uk/2009/02/27/design-with-web-conventions/
http: //www.bkmediagroup. com / blog / item / 116-web-Conventions-Creating-a-user-friendly-navigation
http://netaccountant.net/website-design-for-accountants/web-design-conventions/
http: // blog .teamtreehouse.com / popular-web-design-Trends-for-responsive-navigation
http://bradfrostweb.com/blog/web/responsive-nav-patterns/#top
http://frankchimero.com/talks/ What-screen-want / transcript /
http: // www.smashingmagazine.com/web-design-navigation-showcases/

Бесплатный конструктор меню с онлайн-шаблонами

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

Создайте свое меню прямо сейчас

Начни с вдохновения.

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

Настройте шаблоны.

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

Проявите творческий подход к тексту.

Меняйте размер шрифта и типографику, чтобы выделить пункты меню. Используйте краткие описательные формулировки, чтобы привлечь внимание клиента. Adobe Spark позволяет легко настроить каждый аспект текста в меню, чтобы ваши слова имели большее влияние.

Скачать, поделиться, распечатать.

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

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

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

Лучшие практики навигации по веб-сайту — 7 советов и предупреждений по дизайну навигации по веб-сайту

Мелочи имеют большое значение. Навигация по вашему сайту — отличный пример. Структура и метки вашей навигации могут иметь огромное влияние на результаты. Вот почему:

• Навигация влияет на трафик: насколько высок ваш рейтинг, сколько трафика вы получите от поиска
• Навигация влияет на конверсии: насколько прост в использовании сайт, какой процент посетителей превращается в лидов и клиентов

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

1. Будьте информативны

«Что мы делаем» на самом деле не говорит о том, что вы делаете. Так же как «Продукты», «Услуги» или «Решения». Описательная навигация с использованием ключевых фраз лучше по двум причинам. Здесь на помощь приходят SEO и конверсии.

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

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

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

Внимание! Избегайте таких ярлыков, как «услуги» и «решения».

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

Никто не ищет «продукты» или «услуги», поэтому эти ярлыки не улучшают ваш рейтинг.

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

Для получения дополнительной информации прочтите, как сделать карту сайта.

2. Избегайте навигации на основе форматов

Навигационные ярлыки, такие как «видео», «фотографии» и «официальные документы», сообщают посетителям формат контента, но не тему.Люди не заходят на веб-сайты в поисках видео или технических документов. Они посещают веб-сайты в поисках ответов и информации.

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

3. Избегайте раскрывающихся меню

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

• Подходит для поисковых систем: Выпадающие меню могут быть трудными для сканирования поисковыми системами. В зависимости от того, как они запрограммированы, они могут привести к проблемам.

• Хорошо для посетителей: Исследования юзабилити показывают, что раскрывающиеся меню раздражают.И вот почему: посетители двигают глазами гораздо быстрее, чем мышью. Когда они наводят указатель мыши на пункт меню, они, скорее всего, уже решили щелкнуть… а затем вы дали им дополнительные возможности. Это сбой в сознании посетителя.

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

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

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

4. Ограничьте количество пунктов меню семью

Некоторые веб-сайты содержат сотни ссылок на главной странице. Плохо. Ограничение количества ссылок в основной навигации полезно по двум причинам.Это те же две причины для использования описательных этикеток:

• Меньше элементов в вашей навигации, подходящих для поисковых систем
  Ваша домашняя страница имеет наибольший «авторитет» у поисковых систем, потому что больше сайтов ссылаются на вашу домашнюю страницу, чем на ваши внутренние страницы. Эти полномочия переходят на более глубокие страницы через вашу навигацию.
  
  Если ваша домашняя страница содержит множество ссылок, этот разбавляет авторитет, переданный с нее на ваши внутренние страницы.Это снижает вероятность ранжирования ваших внутренних страниц.
  
  Чем лаконичнее ваша навигация, тем больше авторитетности будет отдаваться каждой внутренней странице, что повысит вероятность ранжирования ваших внутренних страниц.
  
  Дополнительные сведения см. В разделе «Рекомендации по внутренним ссылкам».

Пример: Если ваша домашняя страница имеет авторитет 38 в соответствии с Open Site Explorer, то она имеет как раз этот объем полномочий для передачи на внутренние страницы.

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

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

Совет! «Калькулятор ссылок» подсчитывает количество ссылок на любой странице. Он также оценивает увеличение авторитета, которое будет передано, если вы уменьшите количество ссылок. Он использует PageRank, а не авторитет домена, но концепция та же.

• Меньше элементов в вашей навигации, полезных для посетителей
  Кратковременная память содержит только семь элементов плюс-минус два. Это из знаменитой статьи по психологии, опубликованной Джорджем Миллером в 1956 году.
  
  Более поздние исследования показывают, что, хотя мозг использует «фрагменты» как метод улучшения воспоминаний в краткосрочной памяти, их количество зависит от категории. Для чисел может быть семь, а для слов — только пять.
  
  В любом случае, чем больше элементов в вашей навигации, тем сложнее информацию запомнить и обработать для ваших посетителей.Визуально восемь — НАМНОГО больше семи. Если их слишком много, глаза посетителей могут просканировать мимо важных предметов.
  
  Если вам нужно использовать более семи предметов, подумайте о том, чтобы разбить их на группы.

Внимание! Избегайте длинных списков.

Разбейте навигацию на группы по пять-семь элементов.

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

Чтобы принимать трудные решения, нужна дисциплина. Ты можешь это сделать. Испытайте себя и сократите его до пяти!

5. Порядок навигации по вашему сайту важен

Количество элементов имеет значение, но не менее важен их порядок.

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

• Эффект первенства: Элементы в начале списка легче запомнить.

• Эффект давности: Элементы в конце списка (или события, которые только что произошли) запоминаются легче.

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

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

Сначала дайте посетителям то, что они хотят, а затем они могут дать вам то, что вы хотите.

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

6. Как оптимизировать навигацию по сайту

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

Есть два отчета, которые покажут вам, какие элементы навигации чаще всего используются вашими посетителями.Одним из них является «сводка навигации» или «представление на странице» в отчете о поведении. Остальные — отчеты Behavior Flow / User Flow.

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

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

Еще одно представление о том, что люди нажимают, можно найти в отчете Поведение> Поток поведения . Этот отчет идентичен отчету Аудитория> Поток пользователей . Эти отчеты идентичны, если вы не отслеживаете события. Отслеживание событий добавляется к данным отчета «Поток поведения».

В любом случае отчет будет выглядеть примерно так:

Совет! Для получения дополнительной информации о том, как использовать отчет User Flow, прочтите основные пути на вашем веб-сайте.

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

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

• Удалите элемента, на которые редко нажимают, если они не критичны

• Переименуйте или измените метку, на которую редко нажимают, если они важны

• Переместить элементов, которые часто нажимаются, в начало

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

7. Навигация по сайту на мобильных устройствах

Адаптивный веб-дизайн принес с собой лучшие практики и стандарты мобильной навигации. Его можно описать двумя словами: «икона гамбургера».

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

Вот несколько примеров мобильной навигации.

Хотя это стало доминирующим стандартом, добавление слова «меню» может помочь посетителям найти этот тип «скрытой» навигации. Nielsen Norman Group предупреждает, что скрытая навигация увеличивает время выполнения задач для посетителей.

ProTip! Для мобильных посетителей: убедитесь, что номер телефона превращается в кнопку, которая набирает номер при нажатии. Просто добавьте tel: в код href для номера телефона мобильной версии вашего сайта.Код должен выглядеть примерно так:

Составление (и изменение) вашего курса

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

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

Сделайте так, чтобы ваша навигация работала как для посетителей-людей, так и для роботов поисковых систем. Ваша Аналитика поблагодарит вас за это!

Есть другие идеи или вопросы? А как насчет кнопки «домой»? Это необходимо? Вы помещаете свой номер телефона в шапку? Добавьте свой комментарий ниже.

Как сделать онлайн-меню для вашего ресторана за несколько простых шагов

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

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

А дальше вы попадаете в само меню. Это PDF-файл, и текст на экране телефона настолько мал, что вам понадобится микроскоп, чтобы его прочитать.

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

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

Зачем ресторанам нужно размещать свои меню в Интернете

Вы могли бы вообще избежать этих хлопот, просто не имея онлайн-меню для веб-сайта вашего ресторана, верно?

Неправильно.

Исследование Tripadvisor, проведенное в 2017 году, показало, что на 94% потенциальных гостей ресторана влияет его присутствие в Интернете, и что онлайн-меню является главным фактором, когда они решают, где поесть.

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

Думайте о своем онлайн-меню как о рекламе вашего ресторана. Это место, где вы можете продемонстрировать свою кухню, выделить фирменные блюда, показать гостям фотографии аппетитных творений и многое другое. Эффективное онлайн-меню может (и должно) укрепить отношения вашего бренда с гостями.

Почему меню PDF просто не работают

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

Вот почему меню в формате PDF или статические меню в целом не работают на сайтах ресторанов.

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

Данные подтверждают это. Среднестатистический пользователь тратит всего 15 секунд на меню PDF, прежде чем перейти в другое место — возможно, за пределы веб-сайта вашего ресторана, чтобы найти место с более читаемым онлайн-меню.

Так что же делать ресторанам вместо этого? Используйте Popmenu . В среднем пользователь тратит 1 минуту 50 секунд на меню Popmenu. Это более чем в семь раз больше, чем они тратят на PDF.

Как создать динамическое, удобное для пользователя онлайн-меню с помощью Popmenu

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

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

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

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

Другими словами, онлайн-конструктор меню Popmenu создает ценность для владельцев ресторанов двумя основными способами:

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

Popmenu делает гораздо больше, чем онлайн-меню

Popmenu — лучшее решение для создания уникальных онлайн-меню для ресторанов. Но он может гораздо больше.

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

Popmenu позволяет ресторанам управлять своим цифровым присутствием целиком. Это единственная подобная цифровая платформа, которая построила — всего для ресторанов с необходимыми инструментами.

А с Popmenu вы получаете все это за одну доступную фиксированную ежемесячную плату , которая никогда не повышается до .

Готовы расстаться с PDF-файлами и создать онлайн-меню своей мечты?

Попрощайтесь с меню в формате PDF навсегда и сделайте свой ресторан онлайн, который будет продавать его потенциальным гостям.