Menu Tutorial: Integrate Dynamic Menus in CMS

Once you develop a great looking dynamic menu, you will want to integrate it in your web site. In this part of our Menu tutorial we will show how to integrate a dynamic menu in some of the most popular CMS (Content Management System).

We will use the Flash menu, which development process was presented in our Flash Menu tutorial.

How to Integrate a Flash Menu in Joomla 1.5?

First we will start with the Flash menu integration in Joomla 1.5.

Install the CMS following our comprehensive Joomla 1.5 tutorial. Download the Flash menu module from the following URL. The module can be installed as an ordinary extension, following our tutorial. Before the module installation open the Joomla administrator area -> Extensions > Plugin Manager and enable the Legacy plugin. Once the module is installed, enable and set it through the Joomla administrator area -> Extensions > Module Manager -> Flashmenu1. Set its position to the top and the Flash menu will be situated in the upper part of your Joomla web site template. Once you are ready with the changes save the new configuration.

Upload the top.js file, which is included in the module package. The file should be stored under the root folder for your Joomla installation. In the same location upload your Flash menu file. The files can be uploaded and edited through cPanel -> File Manager. You can check our cPanel tutorial for more details. Edit the following lines of the top.js file and enter the correct file name.

If the Flash menu file is called mymenu.swf, the code will be:

document.write('<param name="movie" value="mymenu.swf" />n');
document.write('<embed src="mymenu.swf" quality="high" wmode="transparent"
bgcolor="#ffffff" width="511" height="83" name="topmenu" align="center"
allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="
http://www.macromedia.com/go/getflashplayer" />n');

Once you are ready with the modifications load your web site and test the newly included menu.

How to Integrate a Flash Menu in Drupal?

The integration of a Flash menu in Drupal is more complicated. You should edit the style.css and the page.tpl.php files, located under your theme folder.

The files can be edited through cPanel -> File Manager. You can find more details on how to edit files in our cPanel tutorial. The files are located under the your_drupal_installation_folder/themes/your_theme_folder/ directory, where you should replace the your_drupal_installation_folder and the your_theme_folder strings with your actual Drupal installation folder and your theme folder. More about the Drupal themes can be found in our comprehensive Drupal tutorial.

The code which you should include in your style.css file is:

#mymenu{ position: static; }

You can include this snippet under the logo-floater definition. (after the last } of the definition)

The code which should be included in the page.tpl.php file is:

<div id="mymenu" align="center">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.
macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="375"
height="75" id="mymenu" >
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="http://yourdomainname.com/sdrpl/sites/default/files/top.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="http://yourdomainname.com/sdrpl/sites/default/files/top.swf" quality="high"
bgcolor="#ffffff" width="375" height="75" name="mymenu" allowScriptAccess="sameDomain" allowFullScreen="false"
type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>
</div>

This is a standard code for embedding of Flash movies. You can find a detailed explanation in our Flash tutorial. We will use the menu, developed in our Flash menu tutorial, but we will shrink its size by 25% through the width and the height parameters. The code should be included after the logo-floater closing div.

(<div id="logo-floater">...some code...</div>).

The result is as follows:

With the basic understanding of CSS, Javascript and Flash you should be able to create and integrate dynamic menus in most CMS.