Создание сайта. Выпадающее меню.

Задача:
Научиться делать выпадающее меню.

Урок:
Для начала нужно нарисовать кнопку меню и расположить её на странице. Вот что получилось у меня.

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

Теперь скопируйте кнопку в буфер обмена (ctrl+c), перейдите на слой MouseOver и вставьте кнопку на то же самое место (shift+ctrl+v). Поменяйте кнопке цвет, каким он должен быть при наведении курсора мыши. Вы это уже должны уметь, потому как читали первый урок. После этого нужно выделить обе кнопки и нижнюю и верхнюю и создать мягкую группу (Arrange>Apply Soft Group). Такая группа не переносит объекты с других слоёв в один и не изменяет порядок их расположения.

Не снимая выделения с группы кликните правой кнопкой мыши по ней и выберите пункт меню Create Navigation Bar. Перед Вами появится окно настройки выпадающего меню.

Здесь всё просто. Ориентация горизонтальная или вертикальная, дальше идёт выравнивание, ниже расположение кнопок. Больше опций к сожалению нет - для более сложных меню нужно добавлять javascript или flash ролики.

В окне Buttons and Menu составляете древовидную структуру. Когда Вы вписываете свой текст в заголовок, то текст на кнопке изменится. Сделайте двойной клик в пункте (Double-click to add button) и у Вас появится дополнительная кнопка, Xara продублирует её автоматически. Вот какое меню сделал я.

И вот что получилось когда я нажал File>Preview web page.

 

Что бы попасть в окно редактирования меню нужно опять кликнуть на группу правой кнопкой мыши и выбрать пункт меню Edit Navigation Bar.

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

Здесь к сожалению тоже очень мало настроек.

• Font - шрифт.
• Bold - жирный шрифт (италика почему то нет).
• Font size - размер шрифта.
• Direction - направление выпадения меню.
• Horizontal offset - расстояние от края кнопки по горизонтали.
• Spacing - расстояние между пунктами меню.
• Border - рамка.
• Animation - скорость появления.
• Transparency - прозрачность.
• Vertical offset - расстояние от края кнопки по вертикали.
• Menu background - цвет фона.
• Menu text - цвет шрифта.
• Menu background (over) - цвет фона при наведении курсора мыши.
• Menu text (over) - цвет шрифта при наведении курсора мыши.
• Border - цвет рамки.

После того как Вы введёте все пункты меню, настроите стили - задайте каждому пункту ссылку на нужную страницу в поле URL, а в поле Tooltip можно добавить стандартную HTML всплывающую подсказку.

Меню получается довольно простенькое и аскетичное, но для многих проектов этого достаточно. Продублируйте меню на остальные страницы как это было рассказано в первом уроке (Repeat on all pages) и простенький сайт с интересным меню - готов.