Mootools 1.2 and MenuMatic in Joomla 1.5

So, you’re using Joomla and you want to include a decent, accessible vertical flyout menu such as MenuMatic (which is fantastic by the way)? If that describes you, then I have 2 pieces of advice for you:

• Stop using Joomla – it’s horrible.
• Read this article, it will tell you how to do it.

The main obstacle to using MenuMatic in Joomla is that it doesn’t work! The reason for this is because Joomla includes Mootools version 1.1 and MenuMatic requires Moo version 1.2. You’ve probably guessed that they’re not compatible.

Now what really irritates me, is the fact that Joomla only makes use of mootools in the administrative area, yet the developers have seen fit include the mootools library in the front end also…. So the task at hand is to keep Mootools version 1.1 for the back end (trust me, it’s totally unusable without it), but switching to Mootools version 1.2 for the front end.

Here’s what you need to do. First of all, download the MenuMatic package, and Media65 menu module for Joomla 1.5 . There are probably several menu modules that will do the job, but I have chosen this one because the HTML it produces is nice and clean, and allows the inclusion of a parent level class/ id.
You’ll want to install that module in your Joomla backend and make sure it’s showing up. Done that? Good.

Ok, on to the code. First thing you need to do is disable Mootools in the frontend. For this you’ll need to open up the index.php file from your template. You’ll find it here:

/templates/your_template/index.php
Note: please replace all instances of ‘your_template‘ with the name of your chosen template eg beez.

Now find this line in the header:
<jdoc:include type=”head” />

And right before it, you need to add these lines.
<?php
$headerstuff = $this->getHeadData();
$headerstuff['scripts'] = array();
$this->setHeadData($headerstuff);
?>

This basically stops your template from calling the Mootools library, but be aware it can cause other modules/ plugins to break, so be sure to know what else you have in your setup. Or, you can use the following snippet to target the mootools and caption js files specifically (courtesy of Alex’s Hut):
<?php
$headerstuff = $this->getHeadData();
$scripts = $headerstuff['scripts'];
$jsForRemove = array(‘mootools.js’, ‘caption.js’);
foreach ($scripts as $key => $value)
foreach ($jsForRemove as $js)
if (strpos($key, $js) !== false) unset($scripts[$key]);

$headerstuff['scripts'] = $scripts;
$this->setHeadData($headerstuff);
?>

Ok that’s the important bit done. You’re now free to use Mootools 1.2 in your template.

To get this going, you’ll need to copy the MenuMatic_0.68.3.js into this folder: templates/your_template/js

Now add this code to the bottom of your index.php
<!– Load the Mootools Framework –>

<script src=”http://www.google.com/jsapi”></script><script>google.load(“mootools”, “1.2.1″);</script>

<!– Load the MenuMatic Class –>

<script src=”templates/your_template/js/MenuMatic_0.68.3.js” type=”text/javascript” charset=”utf-8″></script>

<!– Create a MenuMatic Instance –>

<script type=”text/javascript” >

window.addEvent(‘domready’, function() {

var myMenu = new MenuMatic({ orientation:’vertical’ });

});

</script>

As you can see, I’ve followed the convention used in the MenuMatic example page and loaded the mootools file from the google jsapi, but you could just as easily download it and copy it to your joomla structure somewhere.
Ok, nearly there. Next you’ll need some CSS to get the menu working properly. I recommend starting with the example CSS from MenuMatic
You can either copy and paste the CSS directly into your template.css file, or you can save the menu.css file to your templates/your_template/css folder. Bear in mind, if you follow the latter option, you’ll need to add a link to the header in the index.php file.
<link rel=”stylesheet” href=”<?php echo $tmpTools->templateurl(); ?>/css/menu.css” type=”text/css” />

or if you can’t be arsed with all that php
<link rel=”stylesheet” href=”template/your_template/css/template.css” type=”text/css” />

One last thing. Log into your Joomla admin area, and enable the media65 menu module. Also, in the parameters area, add the id ‘nav’ to the top level element (ul).
Ok, you’re done. Go have fun with your new accessible flyout menu. Maybe one day you’ll give up on Joomla, and we’ll talk some more.

In other news, notbanksy spotted a false widow in his bathroom – good job I was in there already cos I thought it was a proper widow at first. Nearly shat myself

Advertisement

Filed under: joomla, php