Joomla Friendly Menu jquery Jsuperfish

This Menu needs you to have the

Media 65 Joomla Menu Module
Integrating third-party Top menus into Joomla 1.5

The module can be found at this link you need to be registered to download it but its free.

joomla!› modules› Media 65 Joomla Menu Module

See install and config page for the Module.
joomla!› modules› Menu Module Parameters

This code bellow goes into is side your head tags of your Joomla Template index.php page.

Menu Head Code

<!--jquery Main library -->
<script language="JavaScript" type="text/javascript" src="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/js/jsuperfish/jquery-1.2.6.min.js"></script>

<!--hoverIntent-->
<script language="JavaScript" type="text/javascript" src="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/js/jsuperfish/hoverIntent.js.js"></script>

<!--superfish-->
<script language="JavaScript" type="text/javascript" src="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/js/jsuperfish/superfish.js"></script>

<!--Menu css-->
 <link href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/js/jsuperfish/superfish.css" rel="stylesheet" type="text/css" /> 
 
<!-- javascript init -->
<script type="text/javascript"> 
 
    $(document).ready(function() { 
        $('ul.sf-menu').superfish(); 
    }); 
 
</script>

You need to insert a module position for the menu in your index.php template page.

PHP Code:

<jdoc:include type="modules" name="menu" style="none" /> 


Any Joomla module position name is fine.

Next>
Joomla back-end administrator extensions > module manger>
Assign the "M65Menu" to your module position name in the
index.php page.

in this case postion name="menu"

Special Note:
If you insert a module position name to your index.php template page that's
not yet in the module manager system you can add it in one of two ways.


1.Save the index.php in Dreamweaver and click in the Joomla Template Kit xml wizard button this will add the position name to the templateDetails.xml file.
Then upload your changes then assign the position to the module.

2. In the pulled field for the Media 65 menu Joomla module "M65Menu"
Position: select list click inside and type in the module position name
and save the module settings.

J superfish menu is super power full.

it has a lot of setting more then I explain in a short time.
Please see the developers site examples page.
Superfish - Suckerfish on 'roids

A few things to think about.
This menu can ave many different configurations.
Which means that you need to change some settings.

1. File's used in the Menu Head Code above
there are paths to the files.
You many need to add filesto many a function of this menu system work.

See this article about want how the code paths work.
look for this section in the Article
Adding the necessary code to head and body of your template.
joomla!› modules› Configure menus to your template

2. In the "JavaScript init" in the haed section of the template.

<!-- javascript init -->
<script type="text/javascript"> 
 
    $(document).ready(function() { 
        $('ul.sf-menu').superfish(); 
    }); 
 
</script>

Each menu style with this menu system has parameters
that you can set.
To make look different see the developers site for this info.
Superfish - Suckerfish on 'roids

"JavaScript init"
Also gives you clues on what CSS
class to add to the Media 65 menu Joomla module "M65Menu"

Advanced Parameters > Menu Class Master

See > sf-menu

$('ul.sf-menu').superfish();

That's what goes into this Param .

Menu Class Master
Some settings use more then one CSS class
Navbar Style Menu example that the developers sites uses 2 Class.

sf-menu sf-vertical

So the param settings Menu Class Master
Would need to need to match these to get the same effect.

Example:
class space class
class space class space class.
it looks wired but it works.

I will add source files in a bit.