html5 css menu creator | html5 and css menu builder | Get free drop down menu maker | CSS drop down menu example

SWIMBI screenshots

User interface overview


Navigation tab thumbnail image Navigation tab in the Swimbi user interface. Here you can select a menu item in the tree or in the Live Preview pane, edit, move or delete the item.

Menu design - "Flat Glossy".
Configuration - "Basic".
Menu tab thumbnail image Menu tab in the Swimbi user interface. Controls main menu appearance, style, layout, color, transparency, sizes, pattern overlay. And sub menu appearance.

Menu design - "Dark Glossy".
Configuration - "Basic".
Items tab thumbnail image Items tab in the Swimbi user interface. Controls main and sub menu items view and rollover effects.

Menu design - "Adobe".
Configuration - "Basic".
Shadows tab thumbnail image Shadows tab in the Swimbi user interface. Controls the main menu and sub menu shadow, text shadow, text rollover shadow.

Menu design - "Business".
Configuration - "Basic".
Fonts tab thumbnail image Fonts tab in the Swimbi user interface. Controls both main and sub menu text sizes, colors, rollover colors, styles and font family.

Menu design - "Orange".
Configuration - "Digital".
Publication tab thumbnail image Publication tab in the Swimbi user interface. Here you can specify the menu position on a page. Register your domain in our system.

Menu design - "Media".
Configuration - "Clean".


Basic workflow


Select file window Swimbi File choose pop up window appears when you open the Swimbi application. Contains three options:

1.Select a recent file
2.Select a folder where Swimbi should create new page
3.Select a page, where you want to insert a menu
Welcome tour Swimbi The welcome tour pops up when you open the Swimbi app for the first time. (You can start it again through the top menu => Help =>Welcome tour)

The tour shows 6 simple steps to get you started with Swimbi.
Help window in Swimbi Help window show context help on a focused control. Minimize the window clicking outside of it, on the live preview pane. Or close the window clicking on close button.

(You can open it again through the top menu => Help =>Show help window
3 simple steps in Swimbi 3 steps to get started:

1.Choose a Base Style
2.Choose a Configuration
3.Click Publish button
Preview window in Swimbi Page Preview window pops up when you click the Publish button. Contains 3 useful buttons:

Default Browser - preview in browser
Containing folder - open a folder with the menu files
Source Code - switches to the Code Editor (and back to the Design View)
Navigation basics swimbi user interface Navigation basics. Choose a menu item right in the Live Preview pane, or find it in the tree. Edit the item in the right side.

Add new items clicking "+" buttons, remove clicking "-" button. Move items with the arrow buttons, or just drag-and-drop items in the tree.