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 Pic Menu Builder

total pic menu builder Total Pic Menu - universal menu builder where you can customize practically any parameter (for each button it is possible to choose a three images: "flash buttons image", "on rollover flash buttons image", "on click flash buttons image"). Parameters of the sub menu buttons can be customized independently of the main menu buttons. It takes changing only one parameter to turn a horizontal menu into a vertical one!

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

Total pic menu builder demos

Free Download
Buy now (For only $44)

Total Pic 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 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).

Button text shadow color & alpha
This parameter determines the button text shadow 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).


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


Button height
This parameter sets the height of the buttons.

Remains selected
This parameter determines the selected state of the main buttons. If set to "0", the main menu button will be without selected state. If set to "1", the main menu button will be selected after click.

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.

Drop down speed
This parameter determines the drop down speed of a submenu. Drop down speed has three values: "max", "normal", "min".

Button text shadow distance
This parameter determines the shadow distance of a button text. The distance should be set in the following format: N, where N is a number (0-100).

Horizontal button text align
This parameter determines the horizontal button text align. Align has three values: "left", "center", "right".

Vertical button text align
This parameter determines the vertical button text align. Align has three values: "top", "center", "bottom".


Menu buttons


Button text
This parameter determines the button label text.

Button width
This parameter determines the width of each button.

Button image
This parameter points to the button image file. You can store your image files anywhere on server. But remember this path can be absolute (example: http://www.yourdomain.com/images/button.jpg) or relative to the directory with your HTML page (example: ../images/button.jpg).

Button rollover image
This parameter points to the button rollover image file. You can store your image files anywhere on server. But remember this path can be absolute (example: http://www.yourdomain.com/images/button_rollover.jpg) or relative to the directory with your HTML page (example: ../images/button_rollover.jpg).

Button onClick image
This parameter points to the button onClick image file. You can store your image files anywhere on server. But remember this path can be absolute (example: http://www.yourdomain.com/images/button_onClick.jpg) or relative to the directory with your HTML page (example: ../images/button_onClick.jpg).

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>
			<text Color="658185" rolloverColor="F58623" pressColor="000000" Alpha="100"/>
			<text_shadow Color="658185" Alpha="40"/>
		</main_menu>	
		<sub_menu>
			<text Color="658185" rolloverColor="F58623" pressColor="000000" Alpha="100"/>
			<text_shadow Color="658185" Alpha="40"/>
		</sub_menu>
	</colors_and_alpha>
	
	<buttons_view>
	
	<main_menu>
		<buttons_height height="20"/>
		<after_click_remains_selected state="1"/>
		<text_size size="8"/>
		<text_indent width="5"/>
		<text_shadow state="0"/>
		<text_shadow_distance distance="0"/>
		<horizontal_text_align align="center"/>
		<vertical_text_align align="bottom"/>
	</main_menu>
	
	<sub_menu>
		<buttons_height height="20"/>
		<drop_down_speed speed="min"/>
		<text_size size="8"/>
		<text_indent width="5"/>
		<text_shadow state="0"/>
		<text_shadow_distance distance="0"/>
		<horizontal_text_align align="center"/>
		<vertical_text_align align="bottom"/>
	</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="buttons actions" url="your.html" target="_blank" action="" button_width="189" button="but.jpg" button_roll="but_roll.jpg" button_click="but_click.jpg" disable="0">
		<sub text="loadMovie action" url="test.swf" target="_parent.test_mc.swfloader" action="loadMovie" button_width="189" button="sbut.jpg" button_roll="sbut_roll.jpg" button_click="sbut_click.jpg" disable="0"/>
		<sub text="gotoAndStop action" url="30" target="_parent.test_mc" action="gotoAndStop" button_width="189" button="sbut.jpg" button_roll="sbut_roll.jpg" button_click="sbut_click.jpg" disable="0"/>
		<sub text="gotoAndPlay action" url="playframe" target="_parent.test_mc" action="gotoAndPlay" button_width="189" button="sbut.jpg" button_roll="sbut_roll.jpg" button_click="sbut_click.jpg" disable="0"/>
		<sub text="myFunction action" url="1000" target="_parent.test_mc" action="myFunction" button_width="189" button="sbutf.jpg" button_roll="sbutf_roll.jpg" button_click="sbutf_click.jpg" disable="0"/>
	</main>
	<main text="Products" url="your.html" target="_blank" action="" button_width="189" button="but.jpg" button_roll="but_roll.jpg" button_click="but_click.jpg" disable="0"/>
	<main text="Services" url="your.html" target="_blank" action="" button_width="189" button="but.jpg" button_roll="but_roll.jpg" button_click="but_click.jpg" disable="0"/>
	<main text="Contact Us" url="your.html" target="_blank" action="" button_width="189" button="but.jpg" button_roll="but_roll.jpg" button_click="but_click.jpg" disable="0"/>
	<main text="Company" url="your.html" target="_blank" action="" button_width="189" button="but.jpg" button_roll="but_roll.jpg" button_click="but_click.jpg" disable="0"/>
	
	</buttons>

</menu>

Object HTML code


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


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).

Free Download
Buy now (For only $44)