Вверху - пример меню, созданного в программе Swimbi.


Меню создается за несколько последовательных шагов.

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

Continue previous project - Открыть ранее созданный и сохраненный проект
Open Page - Открыть страницу, на которую нужно вставить созданное меню (страница создается заранее)
Open FTP - Открыть программу передачи файлов
Create new - Создать новый проект. Нужно выбрать папку, куда будет помещена страница с меню. Страница создается автоматически при публикации меню.

Лучший вариант - заранее создать страницу, на которую при публикации будет вставлено меню.

Выбор дизайна меню
Выбор дизайна меню осуществляется, используя опцию Base Style. Программа предлагает на выбор несколько вариантов оформления - Dark Glossy, Yahoo, Media и пр.
Варианты оформления меню отличаются друг от друга набором настроек.
Так, одни варианты имеют опции настроек появления главного меню, выбора размещения, цвета, прозрачности, размеров.
Другие варианты позволяют изменять размер значков, позицию, тень и эффект мультипликации.
При выборе можно просмотреть все варианты дизайна в окне предварительного просмотра.

Выбор конфигурации меню
Опция Confic позволяет выбрать цвет создаваемого меню и его расположение на странице (горизонтально или вертикально).

Пункты меню (вкладка "Navigation")
Разработка всей структуры меню с пунктами и подпунктами произволится на вкладке "Navigation".
Программа изначально содержит дерево пунктов и под-пунктов, которое Вы должны изменить в соответствии со структурой Вашего сайта.
Для этого нужно выделить пункт в дереве и ввести свои данные:
Icon - выбор значка для пункта (под-пункта) меню. Можно создавать пункты без значков.
Name - Название пункта (под-пункта). Это название будет стоять на кнопке меню.
Link - Ссылки (абсолютные или относительные)
Target - Адресат. Можете выбрать "blank"

Кнопки ниже:
+ Item - Добавить пункт
+ Child Item - Добавить под-пункт
Remove - удалить выделенный пункт (под-пункт).
Для перемещения пункта (под-пункта) в дереве выделите пункт и используйте кнопки вверх - вниз - вправо - влево. Это самое простое средство определения иерархии всех страниц сайта и создания многоуровнего меню.

Вкладка "Menu"
Создание  оформления меню для меню верхнего уровня (Main Menu) и меню под-уровней  (Sub Menu).
Можно вернуться к выбору стиля (Style), выбрать расположение и полную ширину (Layout), высоту меню, цвет (Color), прозрачность (Transparency), закругление углов (Round Corner Radius), эффекты анимации для под-пунктов (Animation effect) и другое.
При изменении ширины меню при настройках появляется линейка, показывающая ширину меню в пикселях (с версии v 1.4.0 -  ноябрь 2014).
Для преобразования созданного горизонтального меню в вертикальное выберите настройку Layout - Vertical Flyout. После этого установите нужную ширину вертикального меню (Width). Вертикальное меню также можно преобразовать в горизонтальное выбором соответствующей опции в настройках Layout.

Вкладка "Items"
На вкладке определяются отступы текста от краев кнопок (Padding), подбираются цвета и прозрачность кнопок при создании эффекта Rollover (эффект проявляется при наведении курсора на кнопку, при этом она изменяет свое оформление).

Вкладка "Icons"
Производится настройка выбранных для пунктов (под-пунктов) значков.

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

Вкладка "Fonts"
Выбор типа шрифта, его размера, цвета и пр.

Вкладка "Publication"
Настройки публикации.

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

Сохранение и публикация.

Для сохранения проекта в меню File выберите Save (Сохранить).
Для публикации проекта после сохранения щелкните по кнопке Publish (вверху справа).

Появляется Окно предварительного просмотра, а также  3 полезных кнопки:
Default Browser   - предварительный просмотр в браузере
Containing folder  -    Открывает папку с файлами меню
Source Code  -   Переключение на Редактора Кода (и назад на редактирование меню)

Откройте папку со страницей, на которую вставлено меню. По умолчанию меню вставляется вверху страницы, Вы можете скорректировать положение меню переносом кода меню в нужное место.

После публикации также создается дополнительная папка  "menu_files"с файлами CSS, JavaScript и файлом сохраненного проекта формата .json.

Вверху - пример меню, созданного в программе Swimbi.
 
Примечание:
Чтобы зарегистрировать меню перед публикацией, необходимо зарегистрировать домен сайта в нашей базе. Регистрация позволяет использовать любое меню Swimbi на сайте без ограничений.
Нет никакой разницы между зарегистрированным и незарегистрированным меню при тестировании на компьютере. Но когда вы публикуете меню на сайте, появится кнопка "Зарегистрироваться" .


Вернуться к обзору
Последнее обновление: ноябрь 2018 г.