jQuery dropdown menu in TYPOlight
Inspired by a post on the TYPOlight-community.org, I decided to write a tutorial that shows how to implement easy-to-use dropdown menu called Superfish. Similar navigation can be found on the polish TYPOlight support website.
Before we start, you need to know that the default javascript framework in TYPOlight is MooTools. The menu will not work unless you marry TYPOlight and jQuery.
Required file
First of all, you need to download the Superfish menu plugin from http://users.tpg.com.au/j_birch/plugins/superfish/#download.
File location
Extract the downloaded archive into /typolight_root/plugins/jquery/ and rename it to superfish so that it is /typolight_root/plugins/jquery/superfish. This folder should now have three sub folders: css, images and js.
Template change
Now let’s include css and js files. You can either modify fe_page.tpl file in /templates directory (just like in jQuery+TYPOlight tutorial) or use the field “Additional <head> tags” in page layouts in backend.
Add the following lines to your template:
<link rel="stylesheet" href="plugins/jquery/superfish/css/superfish.css" type="text/css" media="screen">
<!-- you don't need this line: -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<!-- if you followed previous tutorial -->
<script type="text/javascript" src="plugins/jquery/superfish/js/superfish.js"></script>
<script type="text/javascript">
// initialise plugins
jQuery(function(){
jQuery('ul.level_1').addClass('sf-menu'); // apply demo's CSS
jQuery('ul.level_1').superfish();
});
</script>
Notice that the superfish is initialised on tag <ul class="level_1">, which is the top level of the menu.
Put the menu into the layout
All we have to do now is put the menu module into our website and see if it works.
Well, the submenu doesn’t actually show up. And that is because of the TYPOlight’s default css file that is included to every page.
CSS fix
The problem lies in /system/typolight.css file:
.block {
overflow: hidden;
}
So it is necessary to put an additional CSS definition:
.mod_navigation {
overflow: visible;
}
Now it should work.
The “Home” link is smaller than the others because of differences between template menu and superfish demo’s css.
We’re done!
That’s all. All you need to do now is to style this up. You might do it by editing the /system/plugins/jquery/superfish/css/superfish.css file or unlinking this file from the <head> tag and putting styles into your very own CSS files. Don’t forget to style the .active and .trail classes!
Good luck! 
Update @ 28th July 2010
I received several e-mails describing the problem with smaller “Home” link in the navigation. To fix it, you can either modify the nav_default.tpl template, or simply correct two lines in the superfish CSS file /system/plugins/jquery/superfish/css/superfish.css:
.sf-menu a, .sf-menu span {
display: block;
position: relative;
}
and
.sf-menu a, .sf-menu span {
border-left: 1px solid #fff;
/* etc. */
}
Contao’s default navigation template displays active item as a <span> tag, whereas normal item is displayed as a link <a>.
About Author
Ben March 18th
Excellent post, Kamil! I’ve used FSMenu from http://www.twinhelix.com in TYPOlight a few times, but I’ve wanted to try the jQuery SuperFish menu. Thanks for putting together this tutorial!
Martin March 30th
My superfish navi doesn’t work.
When I include the overflow:auto into the typolight.css file the menu can’t be clicked anymore!
Please help!
Greets
Martin
Kamil Kuzminski March 30th
Could you provide a link to your website? What TYPOlight version are you using?
Gary May 15th
Be, I also use FSMenu at the moment, is it worth changing to SuperFish?
What are the benefits?
Ta,
Gary.
Kamil Kuzminski May 15th
The main and biggest advantage is that Superfish is based on jQuery
ilithya July 7th
Thanks for the great tutorial on installing Superfish.
It has worked as a charmed in a website I’m developing, actually with the new CONTAO name, no longer Typolight.
Just one question, I’m having some trouble when I apply the:
overflow: visible
I get circle bullets appearing on the left side of each of my menu main buttons. I tried applying “list-style-type:none;” but that seems not to work. Any ideas why I do get the bullets on the left side???
If I don’t apply the overflow:visible, there are no bullets, but of course, as you display in here, I cannot see my submenu.
ilithya July 7th
Hello, me again.
Well, forget about my previous problem heheh.
I realized it didn’t work, because I only applied the list-style-type before to my class.
I had to do it to my class and ul list as this:
#myclass ul li {
list-style-type: none;
}
Thanks again, and happy coding!! =)
Peter January 6th
Hello and thx for this great tutorial. I used it with contao 2.9.1 and it worked pretty good. However there was one little thing that was driving me crazy. If you use the css solution for the / span issue it will result in a line break just before the little arrow. At least this was the case on the site I was working on. As I implemented the whole tutorial right away without checking the site between the steps, it took me a while to figure out that the changed css for span caused the issue.
After solving this by editing the nav_default.tpl, like described in the post on TYPOlight-community.org mentioned at the beginning of this one everything worked perfectly.
I hope that helps someone avoiding/solving this issue.
Cheers, Peter
Cheers, Daniel June 29th
Hello. I have the same problem like Martin. After when I apply to .mod_navigation overflow:visible, menu is not clickable anymore.
What can I do to fix this problem?
Please, help me.
I apply non-span a links in nav_default.tpl and it’s work fine.
Cheers, Daniel June 29th
Described earlier problem came on free hosting’s services, where are advertising scripts from hosting. Tested on non-free hosting with positive results. Added scripts are the problem.
Add Yours
YOU