Newscoop 4.1 Cookbook
Pulldown menu with Superfish using jQuery
Download and documentation: http://users.tpg.com.au/j_birch/plugins/superfish/
Pulldown menus with sub-menus opening on mouse-over are very popular. We recommend using Superfish for elegance, flexibility and SEO compatible design. We show you how to add this to your Newscoop publication in five simple steps.
Superfish is a jQuery menu plugin developed by Joel Birch which adds neat usability to an existing CSS drop-down menu (so it degrades gracefully without JavaScript). You can see it in action at www.sourcefabric.org. Go to the Superfish website for more details, examples and documentation. Download the zip-file before we start.
In our example, we use the Template Package "Ushahidi Cooker". The Superfish navigation will be added beneath the header and above the breadcrumbs. You can download the "Ushahidi Cooker" at www.sourcefabric.org under Products > Newscoop > Templates. Without the pulldown menu, the design looks like this:
The "Ushahidi Cooker" is a directory of maps. We will now improve usability with a pulldown menu.
After you downloaded the Superfish zip-file, fire up your text editor and open the example.html file.
1. Adding JavaScript and CSS links to header
When you open the file example.html in the Superfish zip, you will see these lines in the header of the document, linking in the CSS files, the JavaScript files and initialise the jQuery plugin:
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript">
// initialise plugins
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</script>
Following the recommended folder structure described in an earlier chaper, I change these to:
<link rel="stylesheet" type="text/css" href="/templates/set_ushahidicooker/_css/superfish/css/superfish.css" media="screen"> <script type="text/javascript" src="/templates/set_ushahidicooker/_js/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="/templates/set_ushahidicooker/_js/hoverIntent.js"></script> <script type="text/javascript" src="/templates/set_ushahidicooker/_js/superfish.js"></script>
As you can see in this example, Superfish comes with a jQuery file (jquery-1.2.6.min.js). Note: there is a new folder now inside _css by the name of superfish with a subfolder css. Superfish has a css and an images folder, they both go into the new superfish folder. You'll make your life easier if you keep files in separate folders.
These changes need to be added in the sub-template for the header. For the "Ushahidi Cooker" this is:
set_ushahidicooker/_tpl/header.tpl
Because this file already calls jQuery (see below), I leave this line out. I add the lines just beneath the linked jquery.min.js and add the initialising JavaScript before the header closes.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- Superfish files -->
<link rel="stylesheet" type="text/css" href="/templates/set_ushahidicooker/_css/superfish/css/superfish.css" media="screen">
<script type="text/javascript" src="/templates/set_ushahidicooker/_js/hoverIntent.js"></script>
<script type="text/javascript" src="/templates/set_ushahidicooker/_js/superfish.js"></script>
<script type="text/javascript">
// initialise plugins
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</script>
</head>
2. Copying files to correct folders
Create the folder superfish inside _css and move the css and images folder into is. These are the files and folders you should now have:
set_ushahidicooker/_css/superfish/css/ - superfish.css - superfish-navbar.css - superfish-vertical.css set_ushahidicooker/_css/superfish/images/ - arrows-ffffff.png - shadow.png
Also move the JavaScript files into the _js folder.
3. Create the sub-template to build the navigation
The file you create is called sf-menu.tpl and is saved inside set_ushahidicooker/_tpl/
4. Generate the menu HTML with Newscoop
In our case, we are listing the sections as the visible menu items running horizontally, and the articles in each section are in the pulldown item. The code inside sf-menu.tpl looks like this:
<ul class="sf-menu">
{{ list_sections }}
<li>
<a href="{{ uri }}">{{ $gimme->section->name }}</a>
{{ list_articles }}
{{ if $gimme->current_list->at_beginning }}
<ul>
{{ /if }}
<li>
<a href="{{ uri }}">{{ $gimme->article->name }}</a>
</li>
{{ if $gimme->current_list->at_end }}
</ul>
{{ /if }}
{{ /list_articles }}
</li>
{{ /list_sections }}
</ul>
Again, the same list. Now we focus on the Newscoop action that is taking place:
List all sections and open a list item:
{{ list_sections }}
<li>
Create a link to the section, displaying the section name:
<a href="{{ uri }}">{{ $gimme->section->name }}</a>
List all articles. These will be the articles inside the current section from the list_section command. In other words: only the ones in the section we just printed:
{{ list_articles }}
Now we open another unordered list (ul). But only when we start with the listing of articles:
{{ if $gimme->current_list->at_beginning }}
<ul>
{{ /if }}
Now the articles are listed as list items:
<li>
<a href="{{ uri }}">{{ $gimme->article->name }}</a>
</li>
Then we close the unordered list, once we reached the last item and finish list_articles:
{{ if $gimme->current_list->at_end }}
</ul>
{{ /if }}
{{ /list_articles }}
Now we have left the sub-loop of articles, we are back again with the section. We close the list item and then the section:
</li>
{{ /list_sections }}
Note: if a section is empty, the sub-list will not be built by Newscoop.
5. Include sf-menu.tpl in the page
You can call this page now anywhere you want with:
{{ include file="set_ushahidicooker/_tpl/sf-menu.tpl" }}
The screenshot show the Superfish pulldown at the end of the template _tpl/title.tpl. Open the file title.tpl and add this line at the end. Then it should end like this:
...
<h1>{{ $gimme->publication->name }}</h1>
<span>Location and Map Directory with Geographic Data Feed (KML)</span>
</div>
{{ include file="set_ushahidicooker/_tpl/sf-menu.tpl" }}
Done. Now you could adjust the CSS files if you like. If you don't, the Superfish will look like this:
The "Ushahidi Cooker" now has a pulldown menu, showing the city maps for each section.