Горизонтальное многоуровневое меню: Меню многоуровневое горизонтальное и вертикальное CSS

JavaScript Полезности

Метки

AJAX CSS хаки cURL Git Google Google Chrome HTML шаблоны для сайтов JQuery Notepad++ SSH TinyMCE XAMPP Яндекс администрирование Concrete5 администрирование GetSimple администрирование MODX Evolution администрирование MODX Revolution администрирование Wolf безопасность блог на MODX Revolution новости объекты основы HTML основы PHP отладка отправка почты плагины для MODX Evolution примеры работа с API MODX Evolution работа с архивами работа с массивами работа со строками работа с файлами работа с формами в Drupal работа с элементами в JavaScript разное регулярные выражения редирект решение проблем сайт на MODX Evolution селекторы сниппеты в MODX установка CMS хостинг чанки

Посмотреть все метки »

Статистика спама

Akismet заблокировал 33 457 спамеров

Архивы

• Июнь 2014 (11)
• Май 2014 (5)
• Апрель 2014 (4)
• Март 2014 (6)
• Февраль 2014 (9)
• Январь 2014 (20)
• Декабрь 2013 (30)
• Ноябрь 2013 (29)
• Октябрь 2013 (15)
• Сентябрь 2013 (16)
• Август 2013 (23)
• Июль 2013 (7)
• Июнь 2013 (32)
• Май 2013 (5)
• Апрель 2013 (26)
• Март 2013 (58)
• Февраль 2013 (43)
• Январь 2013 (15)
• Декабрь 2012 (7)
• Ноябрь 2012 (21)

Editor X: использование стилизованных горизонтальных меню | Справочный центр

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

Из этой статьи вы узнаете, как:

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

Чтобы добавить стильное горизонтальное меню:

1. Нажмите Добавить  в верхней части Editor X.
2. Нажмите Меню & Поиск .
3. Нажмите Горизонтальные меню со стилями .
4. Перетащите соответствующее меню в нужное место на странице.
5. (Необязательно) Создайте новое меню с пользовательскими страницами:
   1. Нажмите Меню управления .
   2. Щелкните раскрывающийся список под Какое меню отображается? .
   3. Нажмите Управление меню сайта .
   4. Нажмите + Добавить новое меню внизу, чтобы создать пользовательское меню.

На панели «Инспектор» вы можете спроектировать каждую часть своего стилизованного горизонтального меню — контейнер меню и подменю, а также пункты меню и подменю.

Чтобы спроектировать меню:

1. Нажмите на стилизованное горизонтальное меню.
2. Нажмите значок инспектора  в верхней части Editor X.
3. Перейдите на вкладку Design .
4. Выберите вариант под Что вы хотите спроектировать? :
   • Контейнер меню
   • Элементы меню
   • Контейнер подменю
   • Элементы подменю
5. Используйте доступные параметры для разработки меню. Ты можешь:
   • Добавьте слои фоновой заливки и отрегулируйте непрозрачность каждого слоя.
   • Форматирование и стиль текста.
   • Добавьте границы, чтобы выделить эту область меню.
   • Закруглите углы вашего меню/подменю.
   • Добавьте тени, чтобы выделить меню или его элементы.
   • Настройка отступов вокруг меню или его элементов.

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

Для настройки макета меню:

1. Нажмите на стилизованное горизонтальное меню.
2. Щелкните значок Макет .
3. Выберите, над какой областью вы хотите работать: Меню или Подменю .
4. Настройте расположение меню и подменю в соответствии с вашими потребностями. Нажмите ниже, чтобы узнать больше о доступных параметрах:

Параметры макета меню

• Как отображать элементы, которые не помещаются в : Выберите, как отображать элементы, которые не помещаются в контейнер меню:
  • Wrap:  В ваше меню добавлено больше строк, чтобы отобразить все элементы.
  • Прокрутка:   Этот вариант делает ваше меню компактным и содержит только один ряд элементов. Посетители нажимают кнопку прокрутки, чтобы увидеть остальную часть меню.
• Расстояние между элементами по горизонтали/вертикали: Перетащите ползунки, чтобы отрегулировать расстояние между элементами меню.
• Элементы заполняют все меню: Включите этот переключатель, чтобы ваши элементы растягивались, чтобы заполнить все пространство контейнера меню.
  • (если переключатель включен) Выравнивание текста: Выберите способ выравнивания текста в пунктах меню: по левому краю, по центру или по правому краю.
  • (когда переключатель отключен) Выравнивание элементов:  Выберите способ выравнивания элементов меню: по левому краю, по центру или по правому краю.
• Показать элементы из: Выберите, показывать ли элементы меню слева направо или справа налево.
• Заполнение элемента: Перетащите ползунки, чтобы отрегулировать вертикальное и горизонтальное пространство, занимаемое каждым элементом в меню.

Варианты компоновки подменю

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

В зависимости от того, что вы выберете, можно настроить различные параметры макета:

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

навигация — горизонтальные и вертикальные меню в веб-приложениях

Горизонтальные меню не всегда поддерживают более одного уровня . Вложения или отступы труднодостижимы, что приводит к множеству сложных в использовании решений, широко задокументированных во многих статьях и здесь, на UX.SE. Например, я не большой поклонник веб-сайта Windows 8, на третьем уровне он просто становится странным.

Веб-документы обычно располагаются для прокрутки по вертикали. Люди больше привыкли к прокрутке в этом направлении, и как аппаратные интерфейсы (мыши, трекпады), так и текущие стандарты HTML/CSS предназначены в первую очередь для поддержки вертикальной прокрутки. Это приводит к тому, что ширина веб-документа обычно фиксирована, а высота может увеличиваться вместе с содержимым. Горизонтальное пространство быстро становится проблемой .

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

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

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

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

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