In theory, all one would have to do is, go over to Modules | Site Modules, select your mainmenu or topmenu module (or any menu you’d like to apply this drop-down effect to), and make sure that Menu Style is set to Flat List and that Expand Menu is set to Yes. This would tell the menu to display in unordered lists and to show all the submenus constantly rather than just when the main menu item has been clicked.

There’s just one small problem. This doesn’t work. It’s not just the Expand Menu option either: submenus in general simply do not work if you’re displaying your menus as Flat Lists at this time in Joomla! 1.0.x. (I tried it from versions 1.0.8 to 1.0.12, and got zip, nada, squat.)

Never fear; as is the case with most open-source things, some very clever geek has figured out a solution to this problem and has it readily available for download as a module for Joomla!. Daniel Ecer has saved the day, so head over to his site, and download the Extended Menu module from the download section on this page: http://de.siteof.de/extended-menu.html.

If you’ve never installed a Joomla! Module, here’s your chance. The Menu module is all zipped up and ready to go. Once you’ve downloaded it, simply log on to your Administration Panel and head over to Installers | Modules. You’ should then browse, select the ZIP file, and hit Upload File and Install. (It’s exactly like installing a template which we discussed in Chapter 5.)

Once you have received the File Upload - Success message, you just need to move your menu items over into this new module. No worries, it’s easy. If you go to Modules | Site Modules and you should see the new Extended Menu. Be sure to publish the new Extended Menu and unpublish your previous menu. Now, click on the Extended Menu and set your preferences.

Figure 7.3 Expanding menu preferences

You’ll notice that there are over three times as many preferences to choose from as before, but you’ll want to make sure that the Extend Menu module is located in the same position as your old menu (in my case, the “main” module location) and that it’s assigned to the same menu name that your old menu (in my case, mainmenu). Now, you’ll want to set your Menu Style to Flat List. Last, we’ll set Expand Menu to Yes and we should be good to go. Let’s check it out:

Figure 7.4 Unordered lists with sublists

Selecting the menu and checking the DOM inspector shows us that the menu is in fact being displayed using an unordered list with unordered sub-lists.

We’re now ready to proceed with the rest of Patrick and Dan’s suggestions. To start, let’s just take their suggested code and see what happens. The unordered-list CSS that Patrick and Dan provide in their web article is intended to format the sublists as drop-down menus and looks like this:

    ul { /* all lists */
            padding: 0;
            margin: 0;
            list-style: none;
    }
    li { /* all list items */
            float: left;
            position: relative;
            width: 10em;
    }
    li ul { /* second-level lists */
            display: none;
            position: absolute;
            top: 1em;
            left: 0;
    }
    li>ul { /* to override top and left in browsers other than IE, which
    will position to the top right of the containing li, rather than
    bottom left */
            top: auto;
            left: auto;
    }
    li:hover ul, li.over ul { /* lists nested under hovered list items */
            display: block;
}

Now, in Joomla!, our menu item’s ul has an id called mainlevel, so Dan and Patrick’s code will need to be tweaked in order to work with Joomla!. And there may or may not be lots of other unordered lists used in our site, so we want to be sure that we only affect ul’s and li’s within that mainlevel id. Also, we want our menu list to remain vertical and have our drop downs coming out to the side, so we’ll simply tweak the CSS a bit to move items out to the left and add #mainlevel to each element in the Suckerfish CSS. The following code takes Dan and Patrick’s CSS, and tweaks it to work with our Joomla! template as follows:

#mainlevel { /* the mainlevel ul (no need to add ul here) */
        padding: 0;
        margin: 0;
            list-style: none;
}
#mainlevel li { /* all list items inside ul */
        width: 160px;
            border-bottom: 1px solid #333;
}
#mainlevel li ul { /* second-level lists */
        display: none;
        position: absolute;
            padding-left: 5px;
            padding-right: 10px;
            text-align: right;
            /*these are for IE placement only*/
        width: 160px;
            margin-top: 0px;
        margin-left: -200px;
            /**/
            list-style: none;
            background-color: #ddd;
}
#mainlevel li ul li { /* second level list items in ul */
        border-bottom: 1px solid #333;
}
#mainlevel li>ul { /* to override top and left in browsers other than
IE, which will position to the top right of the containing li, rather
than bottom left */
        width: 157px;
            margin-top: -15px;
        margin-left: -170px;
}
#mainlevel li:hover ul, #mainlevel li.over ul { /* lists nested under
hovered list items */
        display: block;
}

The last bit is the JavaScript that makes the hover work in IE. I call it is the DOM script (as many people do), but it’s basically just a JavaScript that rewrites your markup (how your DOM is being perceived by IE) on the fly. Basically, this drop-down effect relies on the CSS hover attribute. However, at this time, CSS in IE only recognizes the hover attribute if it is applied to (link) entity rules. This script appends our additional .over class to the li items in IE only.

You’ll need to add this script to your index.php page’s header tag. Dan and Patrick named their ul’s id nav, and that’s what this script is looking for. Our ul’s id is named mainlevel, so if you simply switching out navRoot = document.getElementById("nav"); to navRoot = document.getElementById("mainlevel"); it will work in IE as well.

The full script in your index.php page’s header tag should look like the following:

<script type="text/javascript"><!--//-->
<!
[CDATA[//><!--
startList = function() {
    if (document.all&&document.getElementById) {
        navRoot = document.getElementById("mainlevel");
        for (i=0; i<navRoot.childNodes.length; i++) {
            node = navRoot.childNodes[i];
            if (node.nodeName=="LI") {
                node.onmouseover=function() {
                this.className+=" over";
                }
                node.onmouseout=function() {
                this.className=this.className.replace(" over", "");
                }
            }
        }
    }
}
window.onload=startList;

//--><!
]]></script>

For demonstration purposes, I’ve kept the CSS pretty barebones and ugly, but when we check this out in our browser we now see the following:

Figure 7.5 Submenu items

It’s working! At this point, all that’s left is to fix the CSS to make it look exactly the way you want—semantic, SEO, and accessible as possible dynamic menus in Joomla!.

You’ve now popped a nice Flash header into your template. Here’s a quick trick to make it all the more impressive. If you’d like to keep track of what page your Joomla! user has clicked on and display a relevant image or animation in the header, you can pass your Flash SWF file a variable from Joomla! using PHP. The variable $Itemid is used by Joomla! to denote specific page content. If you’ve set Joomla! to use the standard URL strings you will probably notice something like this:

http://mysite.com/index.php?option=com_content&task=view&id=5&Itemid=6

If you’ve set Joomla! to use SEO-friendly URLs you will notice something like the following:

http://mysite.com/index.php/com_content/view/5/6

In the full URL string you can see the $Itemid variable being passed a value of 6. In the SEO-friendly URL, the $Itemid is always the last variable (item after a forward slash) shown. So here we can see that the page in question is $Itemid=6. Let’s say that we have a Flash file that will load a different header randomly but, every time we’re on page $Itemid 6, we want a special animation to play.

In your Flash authoring program, set up a series of animations or images that will load or play based on a variable set in the root time line called itemid. You’ll pass this variable to your ActionScript. If the variable does not equal 6, then any animation may play, but if the variable is 6, then our specific one will play.

Now, let’s get our PHP variable into our SWF file. Add the following to your object embed code where your SWFs are called:

<param name="movie"    value="http://fullpathtofile//myswfname.swf
                                       ?itemid=<?echo'$Itemid';?>" />
<embed src="http://fullpathtofile/myswfname.swf
                                       ?itemid=<?echo"$Itemid";?>"...

Now, every time that someone loads a page or clicks a link on your site, this PHP is going to be render out as:

myswfname.swf?itemid=6

or whatever the $Itemid for that page is. So your Flash file’s ActionScript is going to look for a variable called itemid in the root or level0, and do whatever you told it to do based on that value.

For extra credit, you can play around with the other variables passed to your Joomla! template via Joomla! and load special animations or images based on the section $task or $id variables passed to your template. Also, you can send more than one variable to your SWF by appending them together using & (ampersand) characters. For instance:

<embed src="http://fullpathname/myswfname.swf
                      ?itemid=<?echo"$Itemid";?>&id=?echo"$id";?>"...

There are a lot of possibilities for Flash control there.

Recently, the IE browser increased its security so that users have to validate content that shows up in the Flash player (or any other player). The animation will kick off, but there will be this grey outline around your Flash content area which may or may not mess up your design.

If your header content doesn’t require anything clicked in it, then the grey box is the only problem. If you have content in your header, which can be clicked on or moused over, then the user will have to double-click in the Flash content area first before the content itself becomes clickable. This can confuse some users and make them think your content is broken. You can get around this validation issue by including your Flash content via a JavaScript include. The following two JavaScripts will call the JavaScript code and set the parameters for the code:

<script src="<?php echo $mosConfig_live_site;?>/js/flash/loadFlash.js"
    type="text/javascript"></script>
<!--
// Globals
// Major version of Flash required
var requiredMajorVersion = 8;//or whatever version you'd like
// Minor version of Flash required
var requiredMinorVersion = 0;
// Revision of Flash required
var requiredRevision = 0;
// the version of javascript supported
var jsVersion = 1.0;
// -->
</script>

You’ll also need to add in this VB script which will do some “IE ActiveX magic” (and even I’m not entirely sure exactly what it does, but the loadFlash.js file won’t work without it):

<script language="VBScript" type="text/vbscript">
<!-- // Visual basic helper required to detect Flash Player ActiveX
    control version information
Function VBGetSwfVer(i)
  on error resume next
  Dim swControl, swVersion
  swVersion = 0
  set swControl = CreateObject("ShockwaveFlash.ShockwaveFlash." +
                                                           CStr(i))
  if (IsObject(swControl)) then
    swVersion = swControl.GetVariable("$version")
  end if
  VBGetSwfVer = swVersion
End Function
// -->
</script>

You’ll then call the embedded code above within a script like the following, which sets the file parameters and defines your alternative content (content that the user will see if they do not have the Flash Player or have the wrong Flash player version):

<script type="text/javascript">
<!--Set your alt content here for people who don't have flash-->
var altContent = '<img src="<?php echo $mosConfig_live_site;?>
                             flash/StaticReplaceImage.jpg" border="0"
                                        width="240" height="311" />';
<!--Calls the actual flash file and passes parameters-->
loadFlash('<?php echo $mosConfig_live_site;?>/flash/mySwfname.swf',
                        240, 310, 'Hope Tree', 'FFFFFF', altContent);
</script>

You included JavaScript (loadFlash.js), which will reference the Flash player version that you’re testing for and the VB ActiveX script, write the Flash embed tag on the fly to DOM of your pages (very similar to how the SuckerFish menu works in IE), and bypass IE’s ActiveX security restriction. The loadFlash.js will look like the following:

<!--
function loadFlash(file, width, height, name, bgcolor, altContent){
var hasRightVersion = DetectFlashVer(requiredMajorVersion,
                             requiredMinorVersion, requiredRevision);
if(hasRightVersion) {  // if we've detected an acceptable version
    var oeTags = '<object classid=
                        "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'
    + 'width="'+width+'" height="'+height+'"'
    + 'codebase="http://download.macromedia.com/pub/shockwave/
                                            cabs/flash/swflash.cab">'
    + '<param name="menu" value="false" />
                        <param name="movie" value="'+file+'" />
                        <param name="quality" value="high" />
                        <param name="bgcolor" value="#'+bgcolor+'" />
                        <param name="wmode" value="transparent" />'
    + '<embed src="'+file+'" quality="high" bgcolor="#'+bgcolor+'" '
    + 'width="'+width+'" height="'+height+'" name="'+name+'"
                                                      align="middle"'
    + 'play="true"'
    + 'loop="false"'
    + 'quality="high"'
        + 'wmode="transparent"'
        + 'menu="false"'
    + 'allowScriptAccess="sameDomain"'
    + 'type="application/x-shockwave-flash"'
    + 'pluginspage="http://www.macromedia.com/go/getflashplayer">'
    + '</embed>'
    + '</object>';
    document.write(oeTags);   // embed the flash movie
  } else {  // flash is too old or we can't detect the plugin
    var alternateContent = altContent;
    document.write(alternateContent);  // insert non-flash content
  }
}//end loadFlash
// -->

What’s nice about this method is that we account for the occasional user who does not have Flash, in which case they will see a nicely designed static image, which is defined in the “alternate content”. This can let the user know they’re missing out on the cool Flash content and ask them to get the Flash plugin. However, the actual content experience of the Joomla! site is not halted.