My last jQuery post looked at the Superfish plug-in showing how easy it is to turn an HTML unordered list into a flyout menu. The only downside with it is if the menu structure is very big there’s quite a large overhead in your HTML template with the menu. I present a simple solution in this post which involves caching the menu structure as a Javascript variable in a separate .js file.
The menu in the HTML template
The menu in the HTML template only needs to contain the top level menu, and needs to be surrounded by a containing <div>. For example:
<div id="menu">
<ul class="sf-menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
The menu in the Javascript file
The Javascript file contains the entire menu as a variable. For example (and using the same menu as used in the previous post):
var menu = ' \ <ul class="sf-menu"> \ \ <li><a href="#">Item 1</a> \ <ul> \ <li><a href="#">Subitem 1.1</a> \ <ul> \ <li><a href="#">Subitem 1.1.1</a></li> \ <li><a href="#">Subitem 1.1.2</a></li> \ <li><a href="#">Subitem 1.1.3</a></li> \ </ul> \ </li> \ <li><a href="#">Subitem 1.2</a></li> \ <li><a href="#">Subitem 1.3</a></li> \ <li><a href="#">Subitem 1.4</a></li> \ </ul> \ </li> \ \ <li><a href="#">Item 2</a> \ <ul> \ <li><a href="#">Subitem 2.1</a></li> \ <li><a href="#">Subitem 2.2</a></li> \ <li><a href="#">Subitem 2.3</a></li> \ <li><a href="#">Subitem 2.4</a></li> \ </ul> \ </li> \ \ <li><a href="#">Item 3</a> \ <ul> \ <li><a href="#">Subitem 3.1</a></li> \ <li><a href="#">Subitem 3.2</a></li> \ <li><a href="#">Subitem 3.3</a></li> \ <li><a href="#">Subitem 3.4</a></li> \ </ul> \ </li> \ \ </ul> \ ';
Note in the above example the allows line breaks to be contained in the Javascript. I have only done this for legibility because in my own code there are no line breaks for this Javascript variable.
Injecting the Javascript variable into the HTML with jQuery
When the page has finished loading, use jQuery to replace the HTML within the “menu” <div> with the HTML from the “menu” variable, and then call the .superfish() function to initialise the menu like so:
$(document).ready(function(){
$("#menu").html(menu);
$("#menu ul.sf-menu").superfish();
});
Putting it all together
The following would then be present in the <head> section of your HTML template, where X.Y.Z are the appropriate version numbers and /path/to is replaced with the actual paths to the files, and “menu.js” is the file containing the menu variable (although you could consolidate it with other data and/or Javascript code in another file):
<script language="javascript" src="/path/to/jquery-X.Y.Z.min.js"></script>
<script language="javascript" src="/path/to/menu.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/superfish.css" />
<script language="javascript" src="/path/to/superfish.js"></script>
<script language="javascript">
$(document).ready(function() {
$("#menu").html(menu);
$("#menu ul.sf-menu").superfish();
});
</script>
Conclusion
It’s really easy to make flyout menus with the Superfish jQuery plug-in. It’s also very easy to cache the menu structure into a separate Javascript file, as shown in this post, so it doesn’t add extra weight to the webpages as they are served. The Javascript file containing the meun will be cached which helps to speed up page load.
In a later post I’ll show how I’ve styled the Superfish plug-in to match a different template; I’ve been using it in the new version of the healthy.co.nz website which is due to go into production in a few weeks.
In the meantime, be sure to check out the Superfish website for more examples and full documentation for the effects possible. The plug-in can be downloadedhere from the jQuery website.