Добавление и оформление виджетов «Меню» в Adobe Muse

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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