html5 menu builder | Get css drop down menu | HTML5 menu example | CSS menu maker | Menu html css example | Web menu design | Web menu inspiration
This is old product page. Use new version from swimbi.com:
CSS Menus made easy by SWIMBI, drop down menus, vertical menus

Total Menu Builder

total menu builder Total menu - universal flash menu tool where you can customize practically any parameter. More than 1600 variants are possible, not taking into account all color and transparency variations. Parameters of the sub menu buttons can be customized independently of the main menu buttons. You will also appreciate simplicity of the "Total menu": it takes changing only one parameter to turn a horizontal menu into a vertical one!

Component info

Flash Component - is a standard extension for Macromedia Flash MX2004, Flash 8 and Flash CS3 (ActionScript 2.0). You simply install the MXP file and then you just drag & drop the extension from the Components panel onto the scene of your movie. All parameters can be modified in a really easy to use interface (Custom UI). Also, component can operate with external XML file.

Flash SWF Object info

The object is a ready-to-use SWF file that you simply integrate into your HTML page. We have developed the object for users who do not have Macromedia Flash. The object cannot be controlled with ActionScript. It can set up only through an XML file.

Online demos

flash menu builder demos


Total Menu Builder features




Description of parameters


Menu properties

Menu width
This parameters sets the maximal width of the main and sub menus. If buttons (placed one after another) are wider than the maximal width of the menu, the last button will be moved to the next line. (If you set the maximal width to "0" you will get a vertical menu)

Menu background
This parameter is the path to the menu background file. Its value may be either an external jpeg or swf (+ gif & png, if you work in the Flash 8) file path. If no name is specified, the background will not be used. If the name is incorrect, the background will not be used.

Menu rollover sound
This parameter is the path to the menu buttons rollover sound file. Its value may be either an external mp3 file path. If no name is specified, the rollover sound will not be used. If the name is incorrect, the rollover sound will not be used.


Menu style (Independent color settings for main and sub menus)


Button background color & alpha
This parameter determines the button background color & alpha. The color should be set in RGB in the following format: NNNNNN, where N is a hexadecimal number (0-F), alpha: N, where N is a number (0-100).

Button background gradient colors & alpha
This parameter determines the button background gradient colors (topColor and bottomColor) & alpha. The color should be set in RGB in the following format: NNNNNN, where N is a hexadecimal number (0-F), alpha: N, where N is a number (0-100).

Button border color & alpha
This parameter determines the button border color & alpha. The color should be set in RGB in the following format: NNNNNN, where N is a hexadecimal number (0-F), alpha: N, where N is a number (0-100).

Button emboss light color & alpha
This parameter determines the button emboss light color & alpha. The color should be set in RGB in the following format: NNNNNN, where N is a hexadecimal number (0-F), alpha: N, where N is a number (0-100).

Button separator color & alpha
This parameter determines the button separator color & alpha. The color should be set in RGB in the following format: NNNNNN, where N is a hexadecimal number (0-F), alpha: N, where N is a number (0-100).

Button rollover bar light color
This parameter determines the button rollover bar light color & alpha. The bar color will be displayed when the user will rollover the cursor on the button. The color should be set in RGB in the following format: NNNNNN, where N is a hexadecimal number (0-F), alpha: N, where N is a number (0-100).

Button rollover bar light gradient colors & alpha
This parameter determines the button rollover bar light gradient colors (topColor and bottomColor) & alpha. The color should be set in RGB in the following format: NNNNNN, where N is a hexadecimal number (0-F), alpha: N, where N is a number (0-100).

Button text colors & alpha
This parameter determines the button text colors (textColor, rolloverColor, pressColor) & alpha. The color should be set in RGB in the following format: NNNNNN, where N is a hexadecimal number (0-F), alpha: N, where N is a number (0-100).


Buttons style (Independent color settings for main and sub menus)


Button width
This parameter sets the width of the buttons.

Button height
This parameter sets the height of the buttons.

Button emboss
This parameter determines the emboss state of the buttons. If set to "0", the menu button will be without emboss effect. If set to "1", the menu button will be embossed.

On click button event
This parameter determines the expand type of a submenu. If set to "0", the sub menu will be expand with rollover event. If set to "1", the sub menu will be expand with onclick event.

Identical maximal buttons width
This parameter determines the identical width of a buttons. If set to "0", the buttons width will be different. If set to "1", the buttons width will be identical to the maximal button width.

Button separator
This parameter determines the visibility of a button separator. If set to "0", the separator will be unvisible. If set to "1", the separator will be seen.

Button rounded corners
This parameter determines the radius of the button rounded corners. The radius should be set in the following format: N, where N is a number.

Button text size
This parameter determines the text size of the button. The text size should be set in the following format: N, where N is a number.

Button text indent
This parameter determines the text indent from sides of the button. The text indent should be set in the following format: N, where N is a number.

Button text align
This parameter determines the text align of the buttons. The text align should be set in the following format: "align type", where "align type" is a "left", "center", "right".

Button text font
This parameter determines the button label font.

Button text bold status
This parameter determines the bold status of a button label. If set to "0", the bold status will be disabled. If set to "1", the bold status will be enabled.


Menu buttons


Button text
This parameter determines the button label text.

Button actions
If you want that the button was visible without execute any action then set it's ACTION to "".

"GetUrl" opens url in target window(action - "getUrl", then url - what you open in window, target - target window).

If the object is loaded into other flash document:

"loadMovie" load your file (jpeg, swf + (gif & png) if you work in the Flash 8) in target movie clip (action - "loadMovie", then url - path to file which you want to load, target - target movie clip where you want to load file).
"gotoAndStop" go and stop to frame or label in target movie clip (action - "gotoAndStop", then url - frame to go or label to go, target - target movie clip where you want to execute action).
"gotoAndPlay" go and play to frame or label in target movie clip (action - "gotoAndPlay", then url - frame to go or label to go, target - target movie clip where you want to execute action).
"nameofyourfunction" execute your function in target movie clip and transfer parameter in it (if it is necessary) (action - "nameofyourfunction", then url - parameter which is transferred in your function, target - target movie clip where your function placed).

Button visibility
If you want that the button was unvisible then set disable="1".


XML File Format


To prepare your object for work you need setup configuration xml file. The component settings XML file is a usual text file of the following format:
<menu>

	<properties>
	
		<menu_width>
		
			<main_menu width="615"/>
			<sub_menu width="615"/>
		
		</menu_width>
		
		<colors_and_alpha>
		
			<main_menu>
				<background Color="FFFFFF" Alpha="100"/>
				<background_gradient topColor="FFFFFF" bottomColor="FFFFFF" Alpha="100"/>
				<border Color="658185" Alpha="60"/>
				<emboss_light Color="658185" Alpha="15"/>
				<buttons_separator Color="000000" Alpha="100"/>
				<text Color="658185" rolloverColor="F58623" pressColor="000000" Alpha="100"/>
				<rollover_bar_light Color="658185" Alpha="40"/>
				<rollover_bar_light_gradient topColor="373C49" bottomColor="555C6F" Alpha="0"/>
			</main_menu>
		
			<sub_menu>
				<background Color="CCCCCC" Alpha="100"/>
				<background_gradient topColor="F58623" bottomColor="F58623" Alpha="100"/>
				<border Color="F58623" Alpha="100"/>
				<emboss_light Color="FFFFFF" Alpha="30"/>
				<buttons_separator Color="000000" Alpha="100"/>
				<text Color="FFFFFF" rolloverColor="FFFFFF" pressColor="000000" Alpha="100"/>
				<rollover_bar_light Color="FFFFFF" Alpha="40"/>
				<rollover_bar_light_gradient topColor="373C49" bottomColor="555C6F" Alpha="0"/>
			</sub_menu>
		
		</colors_and_alpha>
		
		<buttons_view>
		
			<main_menu>
				<buttons_width width=""/>
				<buttons_height height="20"/>
				<emboss state="1"/>
				<on_click_expands_submenu state="0"/>
				<identical_max_width state="0"/>
				<buttons_separator state="0"/>
				<round_corners radius="6"/>
				<text_font name="_sans"/>
				<text_bold state="0"/>
				<text_size size="8"/>
				<text_indent width="5"/>
				<text_align align="center"/>
			</main_menu>
		
			<sub_menu>
				<buttons_width width=""/>
				<buttons_height height="20"/>
				<emboss state="1"/>
				<identical_max_width state="1"/>
				<buttons_separator state="0"/>
				<round_corners radius="6"/>
				<text_font name="_sans"/>
				<text_bold state="0"/>
				<text_size size="8"/>
				<text_indent width="12"/>
				<text_align align="center"/>
			</sub_menu>
		
		</buttons_view>
		
		<your_background>
			<bg bg_file_path="menus/menu1/bg.jpg"/>
		</your_background>
		
		<buttons_sound>
			<rollover_sound mp3source="menus/menu1/sfx.mp3" mp3volume="10"/>
		</buttons_sound>
	
	</properties>
	
	<buttons>
	
	<main text="Button actions" url="" target="" action="" disable="0">
		<sub text="getUrl action" url="your.html" target="_blank" action="getUrl" disable="0"/>
		<sub text="loadMovie" url="tst.swf" target="_parent.test_mc.swfloader" action="loadMovie" disable="0"/>
		<sub text="gotoAndStop action" url="30" target="_parent.test_mc" action="gotoAndStop" disable="0"/>
		<sub text="gotoAndPlay action" url="playframe" target="_parent.test_mc" action="gotoAndPlay" disable="0"/>
		<sub text="myFunction action" url="1000" target="_parent.test_mc" action="myFunction" disable="0"/>
	</main>
	<main text="Products" url="your.html" target="_blank" action="getUrl" disable="0"/>
	<main text="Services" url="your.html" target="_blank" action="getUrl" disable="0"/>
	<main text="Contact Us" url="your.html" target="_blank" action="getUrl" disable="0"/>
	<main text="Company" url="your.html" target="_blank" action="getUrl" disable="0"/>
	
	</buttons>



Object HTML code (for SWF object users)


To start working simply paste object HTML into your page and setup xml configuration file. You can place configuration file anywhere on your server.

Paste this code into your HTML-page and replace object stage parameter with your values. (following HTML-code supports MS Internet Explorer and Netscape Navigator)
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="width" height="height">

<param name="movie" value="swf file path">
<param name="quality" value="high">
<param name="scale" value="noscale">
<param name="bgcolor" value="background color">
<param name="flashVars" value="xmlURL=path to configuration file">

<embed src="swf file path" width="width" height="height" flashvars=" xmlURL=path to configuration file" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" scale="noscale" bgcolor="background color"></embed>

</object>

Object stage parameter (for SWF object users)


Width
This parameter controls width of flash object stage on your HTML-page. The width of the object can be different.

Height
This parameter controls height of flash object stage on your HTML-page. The height of the object can be different.

Swf file path
This parameter points to the object swf file. You can store your swf files anywhere on server.

Background color
This parameter controls background color of object stage. So you can adjust its look and fee. The color should be set in RGB in the following format: #NNNNNN, where N is a hexadecimal number (0-F).

Path to the configuration file
This parameter points to the object xml configuration file. You can store your xml files anywhere on server.
But remember this path can be absolute (example: http://www.yourdomain.com/config/menu01.xml) or relative to the directory with your HTML page (example: ../config/menu01.xml).