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

alexxlab

Содержание

flexbox — Верстка горизонтального меню на CSS flex

Задать вопрос

Вопрос задан

Изменён 2 года 5 месяцев назад

Просмотрен 2k раз

Делаю горизонтальное меню на css. Нужно добиться эффекта, чтобы пункты меню (элементы li в которых a-ссылки) занимали всё место в блоке меню по горизонтали. Иными словами чтоб когда наводишь мышкой, ховер загорался от края до края, а не только на ширину слова в пункте меню.

Для наглядности прикладываю 2 скрина. Первый как надо сделать, второй — как получается сейчас

ul {
	list-style: none;
}

nav ul {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	height: 50px;
	background-color: black;
}

nav li {
	display: flex;
	margin-right: 10px;
}

a {
	text-decoration: none;
	
}

nav a {
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
	color: white;
	font-size: 14px;
	padding: 0 10px;
	
}

nav a:hover {
	background-color: #1A3039;
}
<nav>
					<ul>
						<li><a href="">Home</a></li>
						<li><a href="">About</a></li>
						<li><a href="">Gallery</a></li>
						<li><a href="">Help</a></li>
						<li><a href="">Contact</a></li>
					</ul>
          </nav>

Буду очень благодарен за помощь.

  • css
  • flexbox
  • menu

Для тега li добавил flex: 1;, для a — width: 100%.

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 50px;
  background-color: black;
}

nav li {
  flex: 1;
  display: flex;
}

a {
  text-decoration: none;
}

nav a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-transform: uppercase;
  color: white;
  font-size: 14px;
  padding: 0 10px;
}

nav a:hover {
  background-color: #1A3039;
}
<nav>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Gallery</a></li>
    <li><a href="">Help</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>

4 

ul{
  list-style-type: none;
  padding-left: 0;
  background-color: #000;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  text-align: center;
}
ul li{
  padding: 10px;
  width: 20%;
  max-width: 20%;
}
ul a{
  text-decoration: none;
  color: #fff;
}

ul li:hover{
  background-color: #1A3039;
}
<nav>
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Gallery</a></li>
      <li><a href="">Help</a></li>
      <li><a href="">Contact</a></li>
    </ul>
</nav>

2

Ваш ответ

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Горизонтальное меню без float / Хабр

GruZZ

CSS *

Пост скорее для себя, чем для других.

Код и подробности под катом.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <style type="text/css">
  6. * {
  7.   padding:0;
  8.   margin:0;
  9.   border:0;
  10. }
  11. #content {
  12.   margin:50px;
  13.   padding:50px;
  14.   background:#eee;
  15.   text-align:center;
  16.   list-style:none;
  17.   white-space:nowrap;
  18. }
  19. #content LI {
  20.   display:inline-block;
  21.   margin:0 -2px;
  22.   vertical-align:top;
  23. }
  24. #content LI A {
  25.   display:inline-block;
  26.   background:#f9f9f9;
  27.   border:#ccc 1px solid;
  28.   margin:0 2px 0 0;
  29.   padding:5px 15px;
  30.   text-decoration:none;
  31.   color:#00f;
  32.   vertical-align:bottom;
  33. }
  34. #content LI A:hover {
  35.   color:#f00;
  36.   background:#fff;
  37. }
  38. @-moz-document url-prefix() {
  39.   #content LI {display:-moz-inline-grid;display:inline-block;} /*For FF2 only*/
  40.   #content LI {margin:0 -2px;} /*For FF*/        
  41.   #content LI, x:-moz-any-link, x:default { margin:0 -2px;} /*For FF3*/
  42. }
  43.  
  44. </style>
  45. <!--[if lte IE 7]>
  46. <style type="text/css">
  47. #content LI {
  48.   display:inline;
  49.   margin:0;
  50. }
  51. </style>
  52. <![endif]-->
  53.  
  54. <title>Title</title>
  55. </head>
  56.  
  57. <body>
  58.  
  59. <ul>
  60.   <li><a href="#">Главная</a></li>
  61.   <li><a href="#">О нас</a></li>
  62.   <li><a href="#">О вас</a></li>
  63.   <li><a href="#">О них</a></li>
  64.   <li><a href="#">Ссылки</a></li>
  65.   <li><a href="#">Форум</a></li>
  66. </ul>
  67.     
  68. </body>
  69. </html>
* This source code was highlighted with Source Code Highlighter.

Пояснения:

Иногда требуется сделать такое меню, которое и горизонтальное, но при этом находится по центру странички. Как обычно делается горизонтальное меню? А очень просто — при помощи float:left; Но вот отцентрировать такое меню у вас вряд ли получится. (ну ладно, получится; но какой ценой? upd: habrahabr.ru/blogs/css/49756/#comment_1306559)

Многие начнут думать над проблемой и придут к выводу, что нам поможет такое замечательное CSS свойство как display:inline-block! И ведь правда — везде работает! В FF3, Opera 8-9, Safari 3 и даже в IE (если специально для него написать display:inline;)!

Кажется, что проблема решена! Просто и достаточно элегантно! Но… но тут мы посмотрели в FF2 и… всё. Приплыли. Не работает 🙁

Лезем на mozilla.org и ищем что-нибудь такое эдакое, чтобы разделить стили для FF2 и FF3. И ведь находим! Наш помошник — свойство display:-moz-inline-grid;

@-moz-document url-prefix() {
#content LI {display:-moz-inline-grid;display:inline-block;} /*For FF2 only*/
#content LI {margin:0 -2px;} /*For FF*/
#content LI, x:-moz-any-link, x:default { margin:0 -2px;} /*For FF3*/}

И работает.

Вроде бы. Кстати, способ можно пользовать и для картинок: gruzzilkin.110mb.com/nofloat

И еще. Валидацию такой документ не пройдет из-за @-moz-document url-prefix.

UPD: По просьбе gryzzly выкладываю наиболее интересные варианты, предложенные в комментариях:

  • www.mauzon.com/?p=87 — горизонтальное выравнивание меню, основанного на плавающих блоках. Способ всем хорош, только используется лишний оберточный DIV
  • Как всегда, я навалил кучу лишнего кода. минимизируем
  • Несколько вариантов, так или иначе использующих display:inline-block:
    www.ruzee.com/blog/2007/05/align-list-items-horizontally-with-css,
    foohack.com/2007/11/cross-browser-support-for-inline-block-styling,
    www.brunildo.org/test/ImgThumbIB.html.

Теги:

  • css
  • inline-block
  • вёрстка
  • nofloat

Хабы:

  • CSS

Всего голосов 91: ↑72 и ↓19 +53

Просмотры

19K

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

Николай Садовников @GruZZ

Пользователь

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

Как сделать горизонтальное меню в Joomla 3

Иван Мельников

Время на чтение: 4 минуты

901

Формат меню имеет значение. Есть разница между тем, горизонтальное у вас меню или вертикальное.

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

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

Содержание

  • Как сделать меню горизонтального формата в Joomla
  • DJ-Menu
  • jQuery Slide-Down-Box Menu
  • RokNavMenu
  • Sticky Horizontal Bar Module Joomla
  • Candy Horizontal Menu

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

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

  1. Проходите в административную панель, авторизуетесь.
  2. Далее переходите в «Менеджер расширений» и там выбираете пункт «Модули».
  3. Чтобы увидеть установленные модули, откройте «Модули сайта». Там появится ваше расширения элемента меню.
  4. Жмете «Изменить».
  5. Переходим во вкладку «Подробности» и указываем позицию в шаблоне — то есть где будет размещен модуль.
  6. А во вкладке «Параметры» задаем стиль «Горизонтальное меню».
  7. Сохраняем нововведения.

Теперь ваше меню появится на сайте и будет иметь горизонтальный формат. Не забудьте в админке Joomla добавить пункты для меню, иначе оно останется пустым.
https://www.youtube.com/watch?v=vhmPQnWFaeU&spfreload=10

DJ-Menu

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

  • можно редактировать CSS для изменения стиля отображения;
  • анимационное эффекты можно включить или выключить;
  • вы можете прописать в CSS ID вашего div-шаблона, чтобы модуль привязался к заданному стилю;
  • можно создать как горизонтальное, так и вертикальное меню.

jQuery Slide-Down-Box Menu

Данный модуль подходит для Joomla 2.5 и 3.5. Суть работы расширения в использовании библиотек jQuery, за счет которых обеспечивается анимационный эффект модуля. Это расширение идеально подходит для сайтов, где критически не хватает анимации. Учтите, что у модуля особенная настройка. Вот инструкция:

  1. Скачайте модуль и установите в Joomla через вкладку «Менеджер расширений».
  2. Активируйте или деактивируйте загрузку библиотеки jQuery. Учтите, что если у вас уже имеется модуль или плагин, который использует эту библиотеку, тогда функцию необходимо деактивировать.
  3. Определите ширину модуля. По умолчанию установлен параметр 960 пикселей.
  4. Укажите число пунктов меню для первого уровня. Если используете стандартную ширину меню, то лучше указать до 7 пунктов.
  5. Опубликуйте созданное горизонтальное меню в доступной позиции в шаблоне Joomla.

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

RokNavMenu

Хоть данный модуль и идет в комплекте с шаблоном Joomla от RocketTheme, но его можно использовать как самостоятельное расширение. Модуль позволит вам сделать мощное, анимированное, плавное и адаптивное горизонтальное меню за очень короткие сроки. Огромное преимущество RokNavMenu — понятная даже ребенку настройка. В два счета вы сможете создать потрясающее меню из иконок, картинок и целых галерей. И, что самое важное, RokNavMenu можно скачать бесплатно и пользоваться расширением без каких-либо ограничений!

Sticky Horizontal Bar Module Joomla

По мнению некоторых маркетологов, данный плагин способен увеличить конверсию вашего сайта на 30 %. Под словом «конверсия» подразумевается уменьшение числа отказов, то есть люди будут чаще кликать на ваше меню и делать от двух переходов на сайте. Sticky Horizontal Bar Module Joomla позволит вам сделать красивое меню, по которому будет жалко не кликать.

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

Candy Horizontal Menu

Изначально модуль Candy позволял делать исключительно вертикальное меню. Но по многичисленным просьбам пользователей разработчик все же решил выпустить новую горизонтальную версию модуля. Большой плюс новой версии Candy — это независимая работа даже при отключенном JavaScript в браузере. Вы сможете создать менюшку с различными эффектами, которые будут нормально отображаться в любом браузере. Candy Horizontal Menu легко устанавливается и так же просто настраивается, так что у вас не должны возникнуть вопросы во время пользования модулем.

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

Как сделать горизонтальное меню — Joomla

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

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

  1. Авторизуемся в административной панели
  2. Выбираем пункт меню Модули -> Модули сайта (Modules -> Site Modules)
  3. Выбираем модуль меню которое необходимо сделать горизонтальным
  4. Нажимаем кнопку Изменить (Edit)
  5. В разделе Подробности задаем позицию в шаблоне (например top) в которой будет опубликован модуль (параметр Позиция)
  6. В разделе Параметры устанавливаем Стиль меню — Горизонтальный
  7. Нажимаем кнопку Сохранить (Save)

Joomla!® CMS — пожалуй, лучшая система управления контентом с открытым исходным кодом

Joomla! — это больше, чем просто программное обеспечение, это люди, включающие разработчиков, дизайнеров, системных администраторов, переводчиков, копирайтеров, и, что самое главное — простых пользователей.

Мы рады пригласить вас в ряды нашего сообщества!

Скачать Joomla! 4.2.2 Русский язык для Joomla Документация Joomla! CMS

Свернуть

Развернуть

  • WT Yandex map items

  • Компонент и плагин для защиты форм сайта Joomla 4 от спама.

  • Опубликован скорректированный план выпуска релизов Joomla 4 и Joomla 5

  • Вышел релиз безопасности Joomla 4.

    2.1

  • Вышел релиз Joomla 4.2

  • Joomla 4.2 RC 1 — помогите сделать её стабильной

  • Joomla 4.2 RC 1 — помогите сделать её стабильной

  • Joomla 4.2 Beta 2 — улучшение и доработка

  • Новая функция в Joomla 4: процессы публикации

  • 90 баллов в Pagespeed для сайта на Joomla

  • Компоненты магазинов для Joomla топ 2020

  • Подсказки эксперта как правильно выбрать хостинг

  • Топ 10 лучших расширений для Joomla в 2020 году

  • Шаблоны и стили Joomla

Популярные записи

  • Вышли релизы Joomla 4. 1.5 и Joomla 3.10.10
  • Joomla 4.2 Beta 2 — улучшение и доработка
  • Вышел релиз Joomla 4.2
  • Joomla 4.2 RC 1 — помогите сделать её стабильной
  • Вышел релиз безопасности Joomla 4.2.1

Форум о Joomla

  • Re: WT JoomShopping Schema.Org плагин добавления микроразметки

    SEO

  • Re: Ошибка при добавлении фото товара на сайт JoomShopping

    JoomShopping

  • Re: Ошибка при добавлении фото товара на сайт JoomShopping

    JoomShopping

  • Не работает логин форма

    Joomla 4.x: Общие вопросы

  • Re: Не отображается картинка в материале с другого хостинга

    Joomla 3. x: Общие вопросы

Как сделать горизонтальное меню под названием сайта — Вопрос от Андрей Башкар

  • Вопросы
  • Горячие
  • Пользователи
  • Вход/Регистрация

>

Категории вопросов

Задать вопрос +

Основное

  • Вопросы новичков (16345)
  • Платные услуги (2084)
  • Вопросы по uKit (81)

Контент-модули

  • Интернет-магазин (1430)
  • Редактор страниц (236)
  • Новости сайта (497)
  • Каталоги (805)
  • Блог (дневник) (111)
  • Объявления (294)
  • Фотоальбомы (431)
  • Видео (255)
  • Тесты (60)
  • Форум (575)

Продвижение сайта

  • Монетизация сайта (218)
  • Раскрутка сайта (2446)

Управление сайтом

  • Работа с аккаунтом (5289)
  • Поиск по сайту (425)
  • Меню сайта (1754)
  • Домен для сайта (1526)
  • Дизайн сайта (13441)
  • Безопасность сайта (1463)
  • Доп. функции (1304)

Доп. модули

  • SEO-модуль (225)
  • Опросы (62)
  • Гостевая книга (98)
  • Пользователи (431)
  • Почтовые формы (317)
  • Статистика сайта (196)
  • Соц. постинг (212)
  • Мини-чат (91)

Вебмастеру

  • JavaScript и пр. (642)
  • PHP и API на uCoz (233)
  • SMS сервисы (10)
  • Вопросы по Narod. ru (422)
  • Софт для вебмастера (39)

…

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

лучших примера горизонтального меню на сайте

151 результаты для »

  • Собрать

  • jpg"},"slug":"build-your-buck-shack","title":"Build Your Buck Shack","createdAt":1661323602,"tags":["Brown","Food & Drink","Red","Promotional","Menu — Horizontal","Wordpress","GSAP Animation","Graphic design","Webpack","Single page","Photo & Video","Video","Black"],"type":"submission"}»>

    Собрать

  • Собрать

  • jpg"},"slug":"design-is-yummy","title":"Design Is Yummy","createdAt":1660286122,"tags":["Design Agencies","Animation","Clean","Graphic design","Portfolio","Scrolling","Black","Pink","White","Menu — Horizontal"],"type":"submission"}»>

    Собрать

  • Собрать

  • png"},"slug":"verve-coffee-roasters","title":"Verve Coffee Roasters","createdAt":1657694320,"tags":["E-Commerce","Food & Drink","Clean","Colorful","Green","Pink","Yellow","Menu — Horizontal","Storytelling","Shopify","Interaction Design"],"type":"submission"}»>

    Собрать

  • Собрать

  • png"},"slug":"robbrecht-en-daem-architecten","title":"Robbrecht en Daem architecten","createdAt":1656660037,"tags":["Architecture","Graphic design","Minimal","Portfolio","Typography","Black","White","Menu — Horizontal","Content architecture"],"type":"submission"}»>

    Собрать

  • Собрать

  • jpg"},"slug":"chaz-dean","title":"Chaz Dean","createdAt":1652854959,"tags":["Design Agencies","E-Commerce","Fashion","Big Background Images","Colorful","Black","White","Yellow","Menu — Horizontal","Storytelling","Shopify","Filters and Effects","Content architecture"],"type":"submission"}»>

    Собрать

  • jpg"},"slug":"biciclette-zecchini","title":"Biciclette Zecchini","createdAt":1650610867,"tags":["Business & Corporate","E-Commerce","Promotional","Clean","CSS","HTML5","SEO","Black","Orange","White","Menu — Horizontal","Storytelling","GSAP Animation","Angular","UI design","Contentful"],"type":"submission"}»>

    Собрать

  • org/ListItem»>193748525.png"},"slug":"allcaps","title":"AllCaps","createdAt":1648458266,"tags":["Art & Illustration","Design Agencies","E-Commerce","Fullscreen","Minimal","Responsive Design","SVG","Typography","Web Fonts","Black","White","Menu — Horizontal","React","Next.js"],"type":"submission"}»>

    Собрать

  • js","Swiper.js"],"type":"submission"}»>

    Собрать

  • Собрать

  • jpg"},"slug":"le-crans-hotel-spa","title":"LE CRANS HOTEL & SPA","createdAt":1645169688,"tags":["Food & Drink","Hotel \/ Restaurant","Animation","Clean","Graphic design","Minimal","Video","Brown","Silver","White","Menu — Horizontal","GSAP Animation","Real Estate","Vercel","Next.js","Tailwind CSS","Swiper.js","Locomotive Scroll"],"type":"submission"}»>

    Собрать

  • jpg"},"slug":"decor-systems","title":"Decor Systems","createdAt":1645056000,"tags":["Architecture","Business & Corporate","E-Commerce","Animation","Clean","Black","Brown","Green","Menu — Horizontal","GSAP Animation","React","Content architecture","UI design","Microinteractions","Vercel","Figma","Sanity","Cinema 4D"],"type":"submission"}»>

    Собрать

  • jpg"},"slug":"black-star-pastry","title":"Black Star Pastry","createdAt":1644824459,"tags":["E-Commerce","Food & Drink","Web & Interactive","Photography","White","Menu — Horizontal","Gestures \/ Interaction","Craft CMS","About Page","Contact Page","Figma"],"type":"submission"}»>

    Собрать

  • jpg"},"slug":"stoov-r","title":"Stoov\u00ae","createdAt":16342,"tags":["E-Commerce","Colorful","Photography","Responsive Design","Green","Orange","Silver","Menu — Horizontal","Responsive","Shopify","Filters and Effects"],"type":"submission"}»>

    Собрать

  • jpg"},"slug":"quartz-decor","title":"Quartz Decor","createdAt":1638516765,"tags":["Business & Corporate","CSS","Fullscreen","HTML5","Minimal","Unusual Navigation","Black","Brown","White","Menu — Horizontal","PHP","Content architecture","UI design","Javascript","Vanilla JS","Figma"],"type":"submission"}»>

    Собрать

  • Собрать

  • 2c1220478210116. jpg"},"slug":"personal-blog","title":"Personal blog","createdAt":1637566463,"tags":["Magazine \/ Newspaper \/ Blog","Culture & Education","Colorful","Retro","Typography","Unusual Navigation","Black","Blue","Red","Illustration","Menu — Horizontal","Figma","Tilda"],"type":"submission"}»>

    Собрать

  • js","3D","Svelte"],"type":"submission"}»>

    Собрать

  • Собрать

  • jpg"},"slug":"film-talents","title":"Film Talents","createdAt":1634887049,"tags":["Fashion","Film & TV","Animation","Big Background Images","Clean","CSS","Minimal","Scrolling","Black","Green","White","Photography","Menu — Horizontal","GSAP Animation","React","Gatsby"],"type":"submission"}»>

    Собрать

  • Собрать

  • jpg"},"slug":"jan-jansen-amsterdam","title":"Jan Jansen Amsterdam","createdAt":1632378840,"tags":["Fashion","Parallax","Photography","Black","Red","White","Gallery","Menu — Horizontal","Shopify","Locomotive Scroll"],"type":"submission"}»>

    Собрать

  • js","Sass"],"type":"submission"}»>

    Собрать

  • Собрать

12345

ПОКАЖИТЕ БОЛЬШЕ

Меню горизонтальной и вертикальной навигации «Плюсы» и «Против»

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

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

Что такое горизонтальная навигация?

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

Ниже приведен скриншот горизонтальной навигации на нашем сайте.

Что такое вертикальная навигация?

Вертикальная панель навигации представляет собой список ссылок с левой или правой стороны каждой страницы.

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

Плюсы и минусы горизонтальной навигации

Плюсы

  • Дизайн многих современных сайтов включает полноразмерные изображения. Горизонтальная навигация легче интегрируется с этим типом дизайна.
  • Англоязычные пользователи читают слева направо, поэтому расположение ссылок слева направо на горизонтальной панели навигации кажется естественным.
  • На большинстве веб-сайтов используется горизонтальная навигация, поэтому пользователи с ней знакомы.
  • Горизонтальная навигация дает дизайнеру больше гибкости в отношении дизайна основной области содержимого, основной части страницы. (См. нашу статью по теме: Что такое структурные части веб-сайта.)
  • Пространство для горизонтальной навигации ограничено. Поэтому дизайнеры должны работать в рамках ограниченного пространства. Это может показаться недостатком (см. «Минусы» ниже), но на самом деле это требует от разработчиков более внимательного отношения к конкретным словам, которые они используют. Исследования показывают, что читатели Интернета на самом деле не читают. Скорее, они сканируют текст. Чем лаконичнее текст, тем больше шансов, что они быстро и легко найдут то, что им нужно.
  • The Eyetrack III: Что мы видели, когда смотрели их глазами В ходе исследования 46 человек в течение часа наблюдали за тем, как их глаза следили за фиктивными новостными веб-сайтами и реальным мультимедийным контентом. Навигация, размещенная в верхней части главной страницы, работает лучше всего.

Минусы

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

Pros

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

Минусы

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

Конечно, из каждого правила есть исключения.

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

Какой стиль основной панели навигации следует использовать?

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

Если вы хотите узнать больше о наших услугах, позвоните по телефону (518) 392-0846, напишите по электронной почте [email protected] или посетите нашу страницу услуг по дизайну и разработке веб-сайтов.

Виджеты вертикального и горизонтального меню Avada — ThemeFusion

Перейти к содержимому

Как мы можем вам помочь?

Поиск:

18/01/2021

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