Configure menus to your template
1. Choosing a menu library provider.
2. Configuration menu specific IDs, CSS styles, JavaScript etc.
3. Adding the necessary code to head and body of your template.
Sample Files can be downloaded at Downloads tab if you’re registered.
1. Choosing a JavaScript library files provider
There are many popular libraries for JavaScript menus that are available for free or commercially.
To name a few Jquery & Mootools there are many examples out on the public Web that
show you how to implement menu systems into your templates.
The difficulty here was trying to configure it to work with Joomla.
What I have done is allow you to be able to fine tune the modules
CSS ID and classes of the menus output to work with most of the popular library’s out there.
In this example I will work with Jquery and the famous sucker fish top menu.
I have found an excellent example at this URL Superfish
This menu example is so powerful that allows three basic types of menus horizontal and vertical and horizontal tabbed submenu.
it is by far one of the most powerful many systems I have seen available for free and it would suit most users needs.
As time goes on I will post other menus and resources available now due to licensing issues and may not be able to
post the code but I can teach you how to implement it within Joomla.
The goal of this module is so that you can figure
out and easily implement any third party menu into your Joomla templates.
2. Look at the menus configuration
Each menu script provider has a different way to configure the menu to work whether it’s
going to be a horizontal menu or a vertical menu etc.
Most of these menus need to work
with unordered lists “UL” and CSS classes and JavaScript.
An unordered list work well with CSS
style sheets and it is key to formatting
Unordered lists
A great example of what can be achieved with unordered list.
http://www.alistapart.com/stories/taminglists/ each menu has a way of configuring
control over unordered list but in
principle most of them need to control the ID property of the unordered list
or the class propertyin some cases there is also a div tag that surrounds the unordered list.
Our module leaves plenty of room for you to be able to configure these IDs either within the module itself or your Joomla template most of the time it’s in both.
3. Adding the necessary code to head and body of your template.
Most Java Scripts will need to be called inside of
And depending upon the JavaScript library you may have to call more than one file.
Below is an example of the JavaScript call with some Joomla dynamic path and template name
Includes.
This was added to a normal JavaScript call inside the source property src=””
<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>
URL Base of your Joomla install:
<?php echo $this->baseurl ;?>
Joomla default Templates folder:Templates
Prints out your Current template folders name:
<?php echo $this->template ;?>
URL/templatesfolder/yourtemplatesFoldersname/
What it needs to look like.
URL/templatesfolder/yourtemplatesFoldersname/JavaScriptFolder/menulibrary/JavaScriptfile.js
Now most menus will need more than one call to its JavaScript library files so just repeat the above example with your menus JS file calls per the JavaScript menus library docs etc.
Also most JavaScript menus libraries come with CSS Style sheets that need to be added.
This could be added in one of two ways.
1. Adding the menu CSS style to your existing style sheets.
2. Linking directly to the menu style sheet with the code below.
<!--Menu css-->
<link href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/js/jsuperfish/superfish.css" rel="stylesheet" type="text/css" />
As you may have noticed all that was added was a normal link to the CSS and some special Joomla PHP code which I explained above.
Once you have gone over your JavaScript library documentation and added the appropriate links inside of the header tags.
All you need to do now is add a Joomla module position inside of your template.
<jdoc:include type="modules" name="top" style="none" />
That module position name will need to be assigned to the menu module so it renderers your many links inside the template.
Depending on your JavaScript library module position may have to be surrounded by Div tag with an ID=”” Property.
<div id="nav">
<jdoc:include type="modules" name="top" style="none" />
</div>
But this is dependent upon the library that you’re using in most cases all you need to do is configure the
UL unordered list properties which are done through the menu module parameters.
Now in the case of the JsuckerFish Menu the full code inside Header tags.
<!--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>
Now if we look at the last JavaScript call you will see the “ul.sf-menu” this is calling the UL CSS style.
All we need to do is to add this to the Media 65 Menu Module Param > Menu Class Master.
If we look at the “ul.sf-menu” it’s calling a UL tag but the real CSS class is “sf-menu”.
This needs to be added to the menu module advance parameters.
So your setting would look like this :
All that’s left to do is add the module position to your template and edit the Menus CSS to your design style.
|
