Dock Menu

Posted by snowcat
November 19, 2008

Get Adobe Flash player



Download this Dock Menu here: dockmenu.zip

How to install the Dock Menu on your website

From the dockmenu.zip archive copy the following files:
- dockmenu.swf
- swfobject.js
- settings.xml
- images.xml
- along with the images folder,
and paste them into the same folder with the HTML or PHP file which you want the Dock Menu to be embedded into.
(The additional files and folders are for Lightbox - showing a bigger image when clicking on a menu’s thumb)

An index.html and an index.php file with the code below is also included in the archive.

Open the HTML or PHP file with a text editor and insert somewhere between the <head> </head> tags the following lines:

  1. <script type="text/javascript" src="swfobject.js"></script>
  2. <script type="text/javascript">
  3. var flashvars = {};
  4. flashvars.settingsXML = "settings.xml";
  5. var params = {};
  6. params.scale = "noscale";
  7. params.salign = "tl";
  8. params.wmode = "transparent";
  9. var attributes = {};
  10. swfobject.embedSWF("dockmenu.swf", "DockMenuDiv", "600", "200", "9.0.0", false, flashvars, params, attributes);
  11. </script>

Somewhere between the <body> </body> tags, in the place you want to insert the Dock Menu, add this div:

  1. <div id="DockMenuDiv"></div>

You’ll be able to define a maximum size of 1680 in width and 1050 in height in the 3rd and 4th arguments of the swfobject.embedSWF() function above. Usually the same values as for dockWidth and dockHeight (which you will set below).

Now you will have to define the properties of your Dock Menu.

You can do that in two ways:
1. By editing the settings.xml file, or much simpler, set your values on the Live Demo above and press Generate settings.xml button, then select all (Ctrl+A) and copy-paste over the existing content of settings.xml file.

2. By using FlashVars. Right after this line:

  1. var flashvars = {};

insert the values you desire for each property, like this:

  1. flashvars.imagesXML = "images.xml";
  2. flashvars.direction = "horizontal";
  3. flashvars.dockWidth = "600";
  4. flashvars.dockHeight = "200";
  5. flashvars.spacing = "5";
  6. flashvars.expandingDirection = "center";

Note that the properties written through FlashVars will override those written in the settings.xml file.

If you want to check the default value for each property, click here.

For a transparent background set in settings.xml file:

  1. <backgroundColor value="0" />

or through FlashVars:

  1. flashvars.backgroundColor = "0";

Now all you have to do is to put your own images, add the tooltip text and add the behavior for when clicking each image. All these through the images XML file. Open the XML file with a text editor and define in each row the image path, the URL to go to when clicking the image, the target (_self for the same browser window, or _blank for a new browser window), and the tooltip text.
You can have as many images as you like. To add a new image add a new row in the XML file.

The Lightbox functionality (showing a bigger image and a description when clicking on an image) is provided too in the dockmenu.zip archive, specifically in the index-with-lightbox-test-on-http-server.html file.

dockmenu.swf has about 50 KB and embeds only the Verdana font. To be able to embed any other font you’ll need the Carousel Flash component.

If you’ll want to use the Dock Menu in Flash projects (FLA files), the Dock Menu is available as a Flash component (MXP file) in the commercial archive available at FlashComponents.net

Instructions on how to use the Carousel component in Flash you will find here.

License

The files included in the dockmenu.zip archive are available free of charge. You can install the dockmenu.swf file on any website (personal or commercial) as long as you don’t try to hide the FlashXML.net label in the top-left corner of the menu. If you don’t want to have the FlashXML.net label you must purchase the commercial archive from FlashComponents.net. You have to purchase a license for each different website you want to include the Dock Menu (without the FlashXML.net label) into. Both personal and commercial licenses are available. Please read more at Dock Menu’s page on FlashComponents.


Share:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Design Float
  • Furl
  • Reddit
  • StumbleUpon
  • BlinkList
  • MySpace
  • NewsVine
  • Technorati
Components

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

119 Responses to “Dock Menu”

Pages: « 1 2 3 4 5 6 7 [8] Show All

  1. 105
    Blake Says:
    May 12th, 2009 at 5:28 pm

    Can video be used with this component?

  2. 106
    m. ross Says:
    May 15th, 2009 at 9:41 pm

    installed dockmenu but the the left side of the frame has a “black” margin. How can that be adjusted to the images fill the frame to the left edge?

    Thanks,

  3. 107
    MagicOPromotion Says:
    May 25th, 2009 at 11:12 pm

    [b]=== XRumer 5.0 Palladium RULEZ! ===[/b]

  4. 108
    Fishman Says:
    May 28th, 2009 at 6:19 am

    Is it possible to use Dock Menu with the HTML file in the root directory, dockmenu.swf in a separate includes folder, and images.xml and settings.xml in the respective images directories? I have 5 pages that are in the root directory where I’d like to use Dock Menu, presenting different thumbnails and images on each page. The images are in subfolders - images/folder1, images/folder2, etc. I’ve tried changing the file paths in the images.xml file, but I can’t get Dock Menu to work unless all the files are in the same directory. Thanks for your help.

  5. 109
    Sandee Says:
    June 6th, 2009 at 7:06 am

    I LOVE YOUR STUFF! Great code! Way easy! Thanks!

  6. 110
    Maurice Says:
    June 8th, 2009 at 11:48 am

    Is there a way to make the tooltip text always visible on all images in the dockmenu? I would like to put a price on every image.

    Thanks!

  7. 111
    rudi Says:
    June 8th, 2009 at 4:52 pm

    IS there a way to open url in a frame?

    i just test url=”index2.html” target=”_frameName”

    thank a lot!

    PD: Great stuff

  8. 112
    Rich Says:
    June 10th, 2009 at 4:35 pm

    Is there any way to desaturate images in the normal state and saturate them in the rollover state?

    thanks

  9. 113
    Christian Hurst Says:
    June 11th, 2009 at 4:38 am

    I have to ask a question before I purchase this item. Is there a way to program this slider so that each image that you click on can open it’s own gallery in the lightbox?

    It would be great if I could hear back about this. I appreciate your time.

  10. 114
    qadi Says:
    June 15th, 2009 at 8:37 am

    IS there a way to open url in a iframe?

    i just test url=”www.website.com\index.html” target=”I1”

    thanks

  11. 115
    melissa Says:
    June 17th, 2009 at 1:32 am

    Hi - 2 questions (and sorry if I just haven’t seen the answer elsewhere here yet)
    1 - I see “showDescription = false” in your instructions at flashcomponents.net but that is not one of the properties I see in the component inspector; nor can I just set that value like this: component_name.showDescription = false; . Do I have an old version of the component? Is there something I missed? I can’t figure out how to turn off the rollovers.

    2- I would like to call a flash method instead of opening a new URL when the image is clicked. Do you have an example of that somewhere?

    Thanks!

  12. 116
    yve Says:
    June 25th, 2009 at 10:34 pm

    Hi do you have a solution available to people who do not have access to their FTP?

    Eg: people who are using standard templates to manage their website and can only have access to the html and css bit.

    Do you have this available in widget java script available?

  13. 117
    yelo Says:
    June 28th, 2009 at 5:03 pm

    hi snocat, big thanks… i’m currently studying this one, novice ^_^ actually. just want to ask the code or if it can work using iframe/target within the page. thanks again.

  14. 118
    Steve Waldner Says:
    June 30th, 2009 at 12:32 am

    Snowcat, purchased your professional version and have a couple of issues:

    1) CPU usage spikes way up when I load more than about 40 images. In IE 7, the
    usage is incremental. In Firefox 3.0.11 dockmenu raises the cpu
    utilization to an even 30%, even with a few images. Even your own demo on
    this page exhibits this behavior in Firefox. I have a test page available
    for you to see at
    http://dev.hebronbrick.com/Bricklicious/test.aspx?numimages=45. You can
    vary the number of images with the url parameter.

    2) When you have many images in the list, viewing the entire image and
    description of the far left or right image becomes difficult.

  15. 119
    CocoChanels Says:
    July 3rd, 2009 at 4:30 pm

    Who knows where to download XRumer 5.0 Palladium?
    Help, please. All recommend this program to effectively advertise on the Internet, this is the best program!

Pages: « 1 2 3 4 5 6 7 [8] Show All

Leave a Reply