Mac Style Menu for Dreamweaver

mac apple icon First impression. Web users form first impressions of web pages in as little as 50 milliseconds (1/20th of a second), according to the latest research. In the blink of an eye, web surfers make nearly instantaneous judgments of a web site's "visual appeal".
You get only one chance to create the first impression, so make it count. A clean, professional, and fast-loading drop down menu can ensure that your visitor's first impression will be a good one. This Dreamweaver extension provides you with a professionally designed tabbed flash menu.

Now the menu is search engine friendly!
The main disadvantage of flash navigation is now eliminated!
Set up navigation as ordinary HTML links. The flash menu file reads these links and draws the visually appealing Mac Style Menu. Everything is easier, more convenient and compact. Any search engine can read this navigation and index all the links.

Free Download

Buy now (Only $33)

What's the difference?

The free version is a fully functional web menu with the first button label "f-source.com". You can download the extension and test all menu features in action. However, you can change the first button only when you buy the menu.

If you buy the menu, you get full version 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 "Mac Style Menu users".

How to insert the menu?

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

1) Top menu "Insert" ==> "Media" ==> "Mac Style Menu"

Mac Style Menu

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 Mac Style Menu 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 width. There is no need to set it according to submenus height! The height of the flash object will change automatically when the submenu drops in a browser.

Menu Configuration.

1)The flash object In your Dreamweaver document window when you are in "Design view". Change its size according to your web site design by dragging the sizing handles.
if you want to eliminate left-side and right-side margins, add this code to the page where you have the Mac Style menu:

< style type="text/css">
 body {

    margin-left: 0px;
    margin-right: 0px;
 }
< /style>

< body marginwidth="0px">(for Opera and Netscape)

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

- _fontName - font type using in menu.
- _activeBNum - number of active main button on this page. To tell your visitors where they are.
- _activeSubNum - number of active sub button on the page.
- _BUTTEXTCOLOR - color of the text of main buttons..
- _BUTTONHEIGHT - height of main buttons.
- _BUTTONWIDTH - width of main buttons.
- _defaultActiveBColor - color applied to main buttons in active state, which don't have special color.
- _HighlightSubText - on/off rollover highlighting of the sub buttons text.
- _inActiveBColor - inactive state color for main buttons.
- _menuDelay - regulates the menu tabs switch delay.
- _STRIPEHEIGHT - height of sub buttons stripe.
- _subBTextSize - text size of sub buttons.
- _SUBBUTTEXTCOLOR - text color of sub buttons.
- _TEXTSIZE - text size of main buttons.
- bg_pic_URL - type the path to background picture, if you want to have one.
- xml_Path - type here the path to XML file with navigation settings, if you prefer XML (cut from a page the DIV with id='menu' and paste it in the XML file).

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 <b>, so the caption <b>Button1</b> should be like this: <b> Button1 &lt:/b>

< div><a href='http://...'>&lt;b&gt;Button&lt;/b&gt;</a>< /div>

Set individual color for each menu tab.

- If you want to set different colors for all main tabs in the active state, add style="color: ..." to a button div.

<div style='color:#9C9614'><a href='...'>Button</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
(http://www.yourDomain.com/navigation.xml).

Read detailed instructions here

But remember: XML file is not SEO frienldy. 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

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.