Меню для сайта html горизонтальное: Как сделать горизонтальное меню в html

Использование горизонтальных и вертикальных меню в Adobe Muse

Узнайте, как добавлять и настраивать меню для сайта Adobe Muse. Узнайте, как создавать мобильные меню, состояния при наведении курсора и редактировать метки меню.

Примечание.

Новые функции больше не добавляются в Adobe Muse. Поддержка этого приложения будет прекращена 26 марта 2020 г. Для получения подробной информации и поддержки посетите раздел Часто задаваемые вопросы о прекращении обслуживания Adobe Muse.

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

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

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

Можно добавлять вертикальные или горизонтальные меню. Кроме того, в Adobe Muse можно создавать сэндвич-меню и состояния при наведении курсора для пунктов меню. Ниже представлены подробные сведения об этих возможностях Adobe Muse.

 

Добавление виджета «Меню»

1. В представлении Дизайн откройте страницу-шаблон для редактирования, а затем откройте библиотеку виджетов. Если она еще не открыта, выберите Окно > Библиотека виджетов.

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

   • Горизонтальное — для добавления горизонтального меню.
   • Вертикальное — для добавления вертикального меню.
   Выбор виджета «Горизонтальное меню» или «Вертикальное меню»

3. С помощью инструмента Выделение перетащите виджет и разместите его в нужном месте на макете. Например, можно разместить виджет «Горизонтальное меню» в области верхнего колонтитула.

   Разместите виджет «Меню» в верхнем колонтитуле поверх изображения коричневой ленты.

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

4. Нажмите палитру цветов на панели управления и выберите цвет для меню. Затем в поле Размер текста установите размер текста в меню.

   Задайте цвет шрифта и его размер для текста кнопок в виджете «Горизонтальное меню».

Конфигурация и настройка виджетов «Меню»

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

1. Выделите виджет «Меню» и нажмите синюю стрелку в правом верхнем углу виджета. Откроется панель Параметры.

   Настройка виджета «Меню» на панели параметров

2. Настройка виджета «Меню» с помощью панели параметров Можно настраивать следующие параметры:

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

Редактирование и оформление подписей меню

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

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

2. Чтобы изменить текст внутри пункта меню, откройте панель Текст (Окно > Текст).

   Выберите подпись и на панели Текст измените формат текста, используя обязательные параметры.
   • Шрифт: выберите шрифт, который требуется применить к подписи меню.
   • Стиль шрифта: выберите «курсив» или «полужирный» шрифт подписи (при необходимости).
   • Размер: выберите размер шрифта для подписи меню.
   • Цвет: в раскрывающемся поле «Цвет» введите шестнадцатеричный код цвета, который требуется применить. Либо выберите нужный цвет с помощью инструмента «Пипетка».
     
   Редактирование подписей меню в виджетах «Меню»

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

   Чтобы применить стиль абзаца, выберите стиль в раскрывающемся поле Стиль абзаца на панели Текст.

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

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

   Применение параметров «Заливка» и «Обводка» к подписям меню

Создание состояний при наведении курсора для элементов меню

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

2. Не снимайте выделение с подписи меню и в палитре цветов Заливка выберите вариант «Нет» (образец белого цвета с красной линией по диагонали).

3. Нажмите инструмент Текст и выберите в палитре цветов на панели управления кремовый оттенок белого цвета для состояния курсор над кнопкой.

4. На панели Состояния выберите состояние Нажата кнопка мыши. При выбранном инструменте Текст выберите в палитре цветов на панели управления более темный цвет для текста для состояния Нажата кнопка мыши.

5. На панели Состояния выберите состояние Активно. Нажмите элемент Заливка на панели управления, чтобы открыть меню Заливка.

6. В меню Заливка нажмите палитру цветов и выберите значение Нет. Нажмите значок папки рядом с разделом Изображение. В появившемся диалоговом окне Импорт выберите в качестве фонового изображения файл top-nav-over.png. Нажмите кнопку Выбрать. Диалоговое окно импорта закроется автоматически.

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

   Определите активное состояние пункта меню.

   Поскольку для виджета «Горизонтальное меню» установлен параметр по умолчанию Редактировать вместе, любые изменения подписи меню автоматически применяются к остальным кнопкам на панели навигации.

8. Выберите Файл > Сохранить, чтобы сохранить свою работу. Нажмите значок «X» на вкладке страницы «Шаблон-A», чтобы закрыть страницу в представлении Дизайн, и вернитесь в представление План. Обратите внимание, что после обновления на миниатюрах всех страниц отображается контент, добавленный на страницу-шаблон.

   Примечание.

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

Создание мобильного меню

В Adobe Muse также можно создать сэндвич-меню или мобильное меню. При создании этого типа меню раскрывающееся подменю отображается, когда пользователь наводит курсор на главное меню. Информация о создании этого типа меню представлена в разделе Создание подменю с помощью виджетов «Композиция».

Исключение страниц из меню

При каждом создании страницы верхнего уровня для сайта в режиме просмотра «План» Adobe Muse автоматически добавляет эту страницу в меню. Однако в некоторых случаях вам необходимо вначале протестировать страницу до публикации либо скрыть какую-либо страницу. В этих случаях Adobe Muse позволяет исключить определенные страницы из навигации; в результате они не будут отображаться в списке пунктов меню в виджете «Меню».

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

1. Если вы уже создали карту своего сайта, перейдите в режим просмотра План в Adobe Muse. В данном примере используется карта сайта, содержащая страницы «Главная», «Портфолио», «Моя история», «Контакты» и «Продукты».

   Просмотр карты сайта в режиме просмотра «План»

   При переходе на страницу-шаблон и перетаскивании виджета «Меню» вы увидите, что в меню включены все страницы.

2. Чтобы исключить определенную страницу, в режиме просмотра План нажмите правой кнопкой мыши нужную страницу. Нажмите Параметры меню > Исключение страниц из меню.

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

   Исключение определенных страниц из виджетов «Меню»

   Теперь при переходе на страницу-шаблон и просмотре меню вы увидите, что страница «Продукты» удалена из виджета «Меню».

   Примечание.

   Чтобы удалить меню полностью, перейдите на страницу, на которую был добавлен виджет «Меню». Выделите виджет и нажмите клавишу Delete.

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

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

Работа с виджетами «Меню»

В этом видео, представленном Брайаном Вудом (Brian Wood), показано, как добавить на страницу сайта виджет «Меню».

Adobe Press — Peachpit

Справки по другим продуктам

• Работа с виджетами

Вход в учетную запись

Войти

Управление учетной записью

Создаем горизонтальное меню

Навигационное меню сайта — это элемент который присутствует на каждом сайте, будь то домашняя страничка, блог или же интернет-магазин. В стандарте HTML 5, данный элемент выделили даже в отдельный тег <nav></nav>.

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

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

Как видно, структура очень проста и понятна. Для стандарта HTML 4 существует элемент — div, в котором и находится наше меню. Для HTML 5 — мы используем элемент nav. Приведем листинг HTML кода.

Структура для HTML 4

<div>
<ul>
 <li><a href="/index">Главная</a></li>
 <li><a href="/link1">Ссылка 1</a></li>
 <li><a href="/link2">Ссылка 2</a></li>
<ul>
</div>

Структура для HTML 5

<nav>
<ul>
 <li><a href="/index">Главная</a></li>
 <li><a href="/link1">Ссылка 1</a></li>
 <li><a href="/link2">Ссылка 2</a></li>
<ul>
</nav>

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

Зададим фиксированную высоту тегу <ul>, например 30 пикселей.

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

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

Для тега <a> устанавливаем свойство display: block, это необходимо для того, что бы элемент занял всю область элемента <li> и вся эта область была «кликабельна».

Теперь можно создать иерархическое меню

<nav>
<ul>
 <li><a href="#">Главная</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>
 <li><a href="#">Страница 5</a>
   <ul>
    <li><a href="#">Страница 5-1</a></li>
    <li><a href="#">Страница 5-2</a></li>
    <li><a href="#">Страница 5-3</a></li>
   </ul>
 </li>
</ul>
</nav>

А теперь используя CSS стилизуем наше меню

ul. site-navigation {
height: 30px;
 /* Зададим фон для списка */
 background-color: #3DA4B7;
}
ul.site-navigation li {
 line-height: 30px;
 height: 30px;
 float:left;
 width:auto;
}
ul.site-navigation li a {
 display: block;
 color: #fff;
 text-decoration:none;
 padding: 0 10px;
 border-right: 1px solid #f4f4f4;
 /* Анимация для браузеров основаных на Webkit */
 -webkit-transition: background-color 0.15s linear;
}
/* Добавим анимацию при наведении */
 ul.site-navigation li a:hover {
 background-color: #57BCCC;
}
ul.site-navigation li ul {
 background-color: #3DA4B7;
 display:none;
}
ul.site-navigation li ul li {
 float: none;
}
ul.site-navigation li:hover ul {
 display:block;
}

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

Статья подготовлена с использованием материалов сайта http://woorkup. com

Создать горизонтальное меню прокрутки с помощью CSS

Опубликовано в Программирование

ПОСЛЕДНЕЕ ОБНОВЛЕНИЕ: 4 ИЮЛЯ 2023 ГОДА

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

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

На десктопе или широкоэкранном устройстве это выглядит так:

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

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

Как создать меню с горизонтальной прокруткой с помощью CSS

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

Код HTML:

 

  JavaScript
  Загрузка Spring
  Ткинтер
  ...
 

Код CSS:

 .hscroll{
    переполнение-x: прокрутка;
    переполнение-y: скрыто;
    пробел: nowrap;
}
 

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

Заключение

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

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

Часто задаваемые вопросы (FAQ)

1. Как создать меню с горизонтальной прокруткой с помощью CSS?

Чтобы создать горизонтальное меню прокрутки, вы можете использовать свойства CSS, такие как display: flex , overflow-x: auto и white-space: nowrap . Настроив контейнер с этими свойствами, вы можете добиться горизонтального макета, который прокручивается горизонтально, когда содержимое превышает ширину контейнера.

2. Могу ли я настроить стиль меню с горизонтальной прокруткой?

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

3. Как сделать меню с горизонтальной прокруткой адаптивным?

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

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

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

5. Могу ли я включить функции JavaScript в меню с горизонтальной прокруткой?

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

Вам также может понравиться:

• Динамическое добавление Iframe на веб-страницу с заданным кодом HTML

• Создание современной панели навигации со значками с использованием HTML, CSS и эффекта наведения

• Как создать всплывающее меню в CSS?

• Как создать кнопку «Назад» и «Далее» с помощью CSS?

Простое меню с горизонтальной прокруткой с помощью CSS

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

Хотя я, конечно, не первый, кто использует эту идею, она использовалась в ранних версиях приложения Facebook и используется на некоторых страницах веб-сайта Apple. Это шаблон, который может стать идеальной заменой меню «гамбургер». Итак, в этом посте цель состоит в том, чтобы использовать только CSS для горизонтальной навигации с прокруткой.

Чего мы хотим избежать при создании этого меню

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

Обычно фиксированные элементы, так как для них требуется два метчика

То, как работает Mobile Safari на iOS, ужасно для всего, что закреплено в нижней части области просмотра. Централизация его в окне просмотра слева или справа может скрыть содержимое, что, в свою очередь, будет столь же раздражающим. Затем все сводится к тому, что более неудобно для пользователя; так как есть несколько хороших примеров использования нижней навигации на веб-сайте.

Любой список, подобный

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

Коснитесь/щелкните, чтобы перейти в меню

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

Так чем же лучше горизонтальная навигация?

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

Реализация

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

УСБ

Здесь работают два свойства: white-space: nowrap и overflow-x: auto . Вы должны убедиться, что элементы не переносятся, в противном случае он будет вести себя нормально, а разрешение прокрутки с использованием auto означает, что прокрутка будет доступна при необходимости. Это небольшое количество CSS заставит любую область иметь горизонтальную прокрутку.

 /*
[1]: Все элементы помещаются в одну строку, что приводит к переполнению при необходимости.
[2]: автоматическое переполнение означает, что полоса прокрутки не будет отображаться, если она не нужна.
[3]: Сделайте плавную прокрутку на устройствах iOS, прежде чем
[4]: скрыть уродливые полосы прокрутки в Edge, пока не будет наведена прокручиваемая область.
[5]: скрыть полосу прокрутки в браузерах WebKit.
*/
.прокрутить {
  пробел: nowrap; /* [1] */
  переполнение-х: авто; /* [2] */
  -webkit-overflow-scrolling: сенсорный; /* [3] */
  -ms-overflow-style: -ms-autohiding-scrollbar; /* [4] */ }
/* [5] */
. scroll::-webkit-полоса прокрутки {
  дисплей: нет; }
 

Важно использовать -webkit-overflow-scrolling , так как это увеличивает скорость и простоту использования областей прокрутки. Однако, начиная с Safari 13, это поведение по умолчанию. На устройствах Android по умолчанию проще прокручивать, поэтому вам не о чем беспокоиться. -ms-overflow-style: -ms-autohiding-scrollbar позволяет пользователям IE 10, 11 и Edge использовать полосу прокрутки при наведении.

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

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

HTML

 <заголовок>
   me">Логотип
  <навигация>
    Блог
    Портфолио
    Загрузки
    О нас
    Контакты
  

 

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

Варианты использования

См. Навигацию по горизонтальной прокрутке пером Стива (@stevemckinney) на CodePen.

Убедитесь, что для элементов не задана ширина

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

Минусы

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

Потребность в возможностях

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

Не совсем идеально, если пользователь просматривает в узком окне в Windows

Горизонтальная прокрутка не самая лучшая на настольном компьютере (если у вас нет Magic Mouse). Если вы работаете в Windows, вам не обойтись без перетаскивания полосы прокрутки. Единственный разумный метод скрытия полос прокрутки существует для IE11 и Edge, если вы хотите, чтобы он вел себя аналогично OS X.