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
CSS Menus made easy by SWIMBI, drop down menus, vertical menus

Yahoo! Style Menu Bar for Dreamweaver

(Version for Dreamweaver MX 2004)

Yahoo Style Menu Bar iconFlash menu. One of the main things you must determine when designing a Web site is what kind of navigation/menu system you will use to make it easy for your visitors to find their way around the site. You need an intuitive, professional, and fast-loading menu. SEO friendly and good looking.
Flash technology offer better and richest multimedia experience, but has a serious disadvantage, it's invisible to the major search engines. Is it a reason to reject flash? Not now, we've solved the problem. Our menu is flash + HTML links which are SEO friendly. This Dreamweaver extension provides you with a horizontally-oriented, professionally designed flash menu bar.

The depth of nested submenus is unlimited!

The menu is search engine friendly!
The main disadvantage of flash navigation is now eliminated!

A menu navigation settings is a set of ordinary HTML links in usual form. The flash menu file reads these links and builds the visually appealing Yahoo! Style Menu Bar. Everything is easier, more convenient and compact. Any search engine can read this navigation and index all the links.

Download free version and test menu in action!

A free version is a fully functional flash menu, however you cannot edit the first button of a free version. It's a good chance to try before you decide to buy.

Buy the menu to get a menu system without limitations along with our support and assistance. You can get all updates and future versions of the menu extension for free. We can even make a personal upgrade at your request (if you buy multidomain version). Your website can be listed in the "Yahoo Style Menu Bar users".

How to insert the menu?

Don't forget to disable the Active Content Converter first.

1) Top menu "Insert" ==> "Media" ==> "Yahoo Style Menu Bar"

Yahoo Style Menu Bar

2) Type a file name in the pop up dialog window "Save flash element", for example "menu.swf".

play flash menu 3) Now you can check the appearance of the Yahoo Style Menu Bar by pressing the "Play" button in your " Property inspector" (Ctrl + F3). The menu will work with default navigation settings. Test in browser,press F12(Opt+F12 on Mac OSX) to check your navigation settins. To avoid mistakes test your page in browser each time you make changes in the menu code.

The height of the flash object must be equal to the main menu height. There is no need to set it according to submenus height! The height of the flash object will be changed on the fly, when a submenu drops in a browser.

Menu Bar Configuration.

Important! For local testing you need to set "Always allow" in the online 'Adobe Flash Player Security Setting Manager' (No changes needed if you test on a web server.)

1) The flash object appears in your document window in "Design view". There is no need to change the height of the flash object according to submenu height. You need only to set the flash object width according to the real menu bar width (which appears in browser) by dragging the sizing handles.flash object

2) All parameters of the menu appearance can be configured in "Tag Inspector" (Click on Flash Object, then F9).

menu properties - _mainButtonHeight - height of the main menu bar.
- _mainButtonTextColor - main button text color.
- _mainButtonWidthExt - button width depends on the text width + this extension.
- _mainFont - font type for main buttons.
- _mainFontSize - font size for main buttons.
- _mainHighlightColor - main button highlight color.
- _menuColor - color of main navigation bar.
- _minSubWidth - minimal width for submenus.
- _removeSubDelay - delay in milliseconds of submenu removal.
- _subButtonHeight - height of submenu buttons.
- _subButtonTextColor - submenu button text color.
- _subFont - font type for the submenu buttons.
- _subFontSize - font size for the submenu buttons.
- _subHighlightColor - color of subbuttons highlighting.
- _subMenuColor - color of the drop submenu.
- _TransparencyMain - regulate the transparency of the main menu bar (0 - 100)
- _TransparencyShadow - regulate the transparency of the main drop shadow (0 - 100)
- _TransparencySub - regulate the transparency of the submenus (0 - 100)
- bg_Pic_URL - url of picture (jpeg only) to place under the menu.
- clickSoundURL - path to the mp3 file, if you want to make some sound when mouse clicks on menu .
- mainSoundURL - path to the mp3 file, if you want to make some sound when mouse gets over main buttons .
- searchFieldWidth - width of search field.
- searchTextColor - search input text color.
- showSearchField - show or hide search field.
- stretch_width_to - stretch the menu bar to particular width (in pixels).
- subSoundURL - path to the mp3 file, if you want to make some sound when mouse gets over sub buttons .
- xml_Path - the path to XML, to make XML driven menu

Setting up the navigation.

Switch to the "Code View" and find the DIV id="menu". Each line of the DIV code represent a button. Edit links and button labels right here. The menu combine cool Flash navigation with standard HTML links, so your page always remains accessible to search engines - while your site visitors see nothing but Flash brilliance. For you convenience each menu provided with the Navigation Guide. Press Ctrl+Shift+F to open it.
web menu navigation guide Add, rename and move the code lines. To check yourself press F12(Opt+F12 on Mac OSX).
(When you press "Play" button the menu appears with default navigation settings.)

Add the target attribute if you need to set new window or specific frame name as a target for a link.

< div><a href='http://...' target='_blank'>Button</a>< /div>
  • _self - specifies the current frame in the current window (the menu use it by default).
  • _blank - specifies a new window.
  • _parent - specifies the parent of the current frame.
  • _top - specifies the top-level frame in the current window.

If you want to make a button text bold change the bold caption tag to &lt;b&gt;, so the caption <b>Button1</b> should be like this: &lt;b&gt; Button1 &lt:/b&gt;
< div><a href='http://...'>&lt;b&gt;Button&lt;/b&gt;</a>< /div>

You can keep navigation settings in one XML file.

Cut the DIV id='menu' from the page and paste it in XML file. This file is an ordinary text file with .xml extension. It must contain nothing but the DIV id='menu'.
Set a path to your XML in the Tag Inspector.
The parameter xml_Path can be relative (navigation.xml) or absolute

Read detailed instructions here

But remember: XML file is not SEO friendly. It's just one of the ways to keep all navigation settings in one file. As SEO friendly alternative we recommend to use "Library Item" or "Dreamweaver templates".

Learn how to make a Library item

Setting up the search feature.

Use parameter _showSearchField (Yes/No) to show/hide the search field.

You can use any search script with GET parameters, any public search engine for example,
"" - google search in Web
"" - search on your web site
or Yahoo:
"" - Yahoo search in Web.

There is only one rule for any search engine: put the search query parameter to the end of the link ("http://www.someSearchScript?query=") the search request will be added to the end of the link, for example: searching of "flash menu" ("http://www.someSearchScript?query=flash menu")
Example of the button code:

<div><a href='http://www.someSearchScript?query='>SEARCH</a></div>

Advanced settings. (Custom Javascript)

A menu button can call any javascript function from a page. Use the link target 'callJSF'

<div><a href='http://...' target='callJSF'>Button3</a></div>
<div><a href='firstURL' target='callJSF'>Button1</a></div>
it will call the function JSF from the page: (located in the DIV id="f-source-menu")
function JSF(url){
   if(url=="firstURL") alert("First button is pressed");
   if(url=="secondURL")alert("Second button is pressed");
the function will get in a pressed button link, so it can be used to identify which button is pressed. Here you can insert any code you need, for example the Google Analytics Tracking Code - urchinTracker('url') or AJAX functions.

That's all. Now you can see your results.

menu bar is ready

Still have questions?

Ask your questions right now. We're ready to assist and help our customers.

Click here to contact us