PixoPoint » dropdown

Animating your dropdown menu

Ryan — Mon, 11 Jan 2010 22:00:36 +0000

In our IE Hovers post we outlined how the Superfish jQuery plugin can be used to create a smooth flowing animated effect for your dropdown menu. However the Superfish script is reasonably large and many people don’t require the various options which are available with the Superfish plugin. So here is an explanation of a new way to create smooth animated dropdown menus with only a few lines of code (plus jQuery).

The following code will produce a clean smooth flowing animation effect just like you can see in the menu above for our own site.

function suckerfishmenu(){
	$('#suckerfishnav ul').css({display:'none'}); // Opera Fix
	$('#suckerfishnav li').hover(function(){
		$(this).find('ul:first').css({display:'none'}).slideDown(300);
	},function(){
		$(this).find('ul:first').css({display:'none'});
	});
}
 $(document).ready(function(){
	suckerfishmenu();
});

To make this work, you simply need to insert the above code after you load jQuery and between the tags for your page and use a dropdown menu with an ID of #suckerfishnav. Make sure you reference the jQuery.js file correctly (available here). If you are using WordPress, then you will want to make sure you are loading jQuery via the enqueue method to avoid clashes with plugins which use jQuery and add var $ = jQuery; to ensure that jQuery works with the non-conflict mode of the version of jQuery version bundled with WordPress.

If all of that seems too complicated, don’t despair as the new version coming soon of our PixoPoint Menu plugin has this new animation method built in so that you won’t need to touch any code to get it working.

What the heck are Superfish and Suckerfish?

Ryan — Tue, 15 Dec 2009 06:22:02 +0000

Many people get confused when working with our WordPress menu plugins and CSS generator as to what exactly “Suckerfish” is and what the difference is between it and “Superfish“. Most of you will never need to understand the difference, but for those of you keen to dive in and either custom build your own menu or tinker around under the hood of our plugins, here is a brief run-down on what they are and how they work.

Suckerfish

The original Suckerfish javascript code was posted on A List Apart by Patrick Griffiths and Dan Webb. As outlined in our :hover pseudo class post, it simply adds support for the same effect as the :hover pseudo class in Internet Explorer 6 and older browsers.

The following code is based on the most popular form of the Suckerfish script, the “Son of Suckerfish” by HTML Dog. This code works with any unordered list with an ID of #suckerfishnav.

sfHover = function() {
var sfEls = document.getElementById("suckerfishnav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

The following code is more suitable for situations in which you need support for multiple dropdown menus on the same page as it works on any unordered list with a class of .sf-hover (ie: you can’t have two menus with the same ID therefore this class system works better in such situations).

function sfHoverEvents(sfEls) {
var len = sfEls.length;
for (var i=0; i
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(" sfhover", "");
}
}
}
function sfHover() {
var ULs = document.getElementsByTagName("UL");
var len = ULs.length;
for(var i=0;i
if(ULs[i].className.indexOf("sf-menu") != -1)
sfHoverEvents(ULs[i].getElementsByTagName("LI"));
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Superfish

Superfish is a plugin for the jQuery javascript framework. Unlike the simple Suckerfish methods outlined above, Superfish adds many more features to your menu than just :hover pseudo class support in IE6.

Some features of the Superfish jQuery plugin are:

Timed delay on mouseout to be more forgiving of mouse-piloting errors.
Animation of sub-menu reveal. The animation speed is customisable
Keyboard accessibility. Tab through the links and the relevant sub-menus are revealed and hidden as needed.
Supports the hoverIntent plugin. Superfish automatically detects the presence of Brian Cherne’s hoverIntent plugin and uses its advanced hover behaviour for the mouseovers (mouseout delays are handled by Superfish regardless of the presence of hoverIntent).
Indicates the presence of sub-menus by automatically adding arrow images to relevant anchors. Arrows are fully customisable via CSS.

To see a demo of the Superfish plugin in action, hover over the menu of the Dunedin Ice Hockey Association.

HTML

We will post another blog post soon outlining best practices and how to create your own custom HTML for your menu.

Other scripts

There are many other alternative scripts out there too. If you have any favourites, please post a link to them in the comments.

Revolution Generated – magazine style template

Ryan — Fri, 16 Jan 2009 04:00:54 +0000

We have received numerous requests for the implementation of a magazine style templates into the PixoPoint template generator. We originally intended to launch an entirely new magazine style theme of our own creation, however Brian Gardner of the Revolution themes recently announced a new site, RevolutionTwo.com, which features a wide range of great magazine style themes which are all GPL licensed. Since they are GPL licensed we have been allowed to implement these directly into the PixoPoint template generator. Instead of having to modify the Revolution themes code to create the magazine style theme that you want, you can simply modify a few options in the template generator, hit the export button and have your very own magazine style WordPress theme!

Revolution Generated

Revolution Generated template for the PixoPoint template generator

The design of the Revolution Generated template is based on the Revolution Church theme. This is a great design and we have ported it over to look almost exactly like the original design. Since we expect most people to use the design for non-church themes we have removed some of the ‘churchy’ styling on it and replaced them with a more generic design which will hopefully be more suitable for those of you looking to modify it for your own purposes.

Demo

You can see a live preview of the theme in the template generator … Live preview demo

Note:The template editor has been removed for the time being. It needs some major updates which will be available at a later date.

Or if you want to dive right in and start editing … Start editing Revolution Generated (link no longer works)

To download the theme, go to ‘Upload/Save’ and choose ‘Export to WordPress’ in the editing area.

Improvements over previous magazine themes

A common complaint heard from users of magazine themes is they have to add a custom field for every post they create. We have alleviated this problem by allowing you to specify a default image URL in the themes WordPress admin page for each section of the home page. When a default image URL is specified, that image will be shown in the particular home page area whenever you forget (or can’t be bothered) to add a custom field.

We have also made it easier to control what content is shown on the home page. Instead of making modifications to the theme code, you can now alter which categories of posts and how many characters from those posts are displayed in the various sections of the home page directly from your WordPress admin page.

These changes are all GPL licensed, so feel free to use them in your own themes. Links back to our site are much appreciated though

Credits

All credit for the styling of this theme goes to Brian Gardner of RevolutionTwo.com who created the Revolution Church theme which this template was based on.

New Aqua Vaccinium WordPress theme

Ryan — Mon, 01 Dec 2008 01:49:54 +0000

The Aqua Vaccinium template features a smooth blue and green design and has a prominent dropdown menu built in (no plugin needed). The template was originally released as a standalone theme, but has been incorporated as one of the standard templates in the PixoPoint Template Generator.

Download template as a WordPress theme

Download Aqua Vaccinium WordPress theme

The big blue bar

The blue section (below the main menu) is controlled via the ‘Main menu shadow’ section in the ‘Main Menu’ box in the template generator control panel.

If you require any (paid) customisations specific to your site, please get in touch via our contact form.

Naming

The word Aqua came from the mixture of the blue and green tones of the design. The name Vaccinium is the genus for a variety of berries including blue berries which we baked a pie for in honour of the new theme.

Multi-level Navigation Plugin for WordPress

Ryan — Mon, 02 Jun 2008 02:58:12 +0000

This plugin is a replacement for the now defunct Suckerfish dropdown menu plugin for WordPress.

The plugin generates the code necessary to create a Son of Suckerfish horizontal dropdown, vertical flyout or horizontal slider menu. The plugin produces W3C valid HTML and CSS and only requires Javascript to function for very old browsers such as IE 6. The Javascript is held in an external file which is linked via IE conditional comments, so only the browsers which require it will download the file. You have control over what items (pages, categories, archives, blogroll etc.) appear in your dropdown via the plugins options page.

To style your menu, head over to the Multi-level Menu CSS Generator page. Simply copy and paste the CSS from the generator to the plugins options page.

Demo

Demo is available here … Multi-level Navigation Plugin demo

Download

The plugin is available for download here … Multi-level Navigation Plugin

Installation

Add the following code wherever you want the dropdown to appear in your theme (usually header.php) and activate the plugin in your admin panel.

This code adds a button for your home page and dropdowns for your Pages, Archives, Categories and Blogroll.

Customisation

You can modify the look of your dropdown by using our new Multi-level Menu CSS Generator page. The generator has been designed with this plugin in mind, so just copy and paste the CSS code from the generator to the plugins options page.

If anyone out there would like a custom designed dropdown, then please get in touch with us via our contact page for pricing information.

Compatibility

The menus (CSS sourced from generator page) have been tested (and work correctly) in the following browsers:

Mozilla Firefox Version 3.0
Mozilla Firefox Version 2.0
Mozilla Firefox Version 1.5
Opera Version 9
Safari Version 3.0
Google Chrome
Internet Explorer Version 8 RC2
Internet Explorer Version 7.0
Internet Explorer Version 6.0 (with Javascript on)
Internet Explorer Version 5.5 (with Javascript on)
Internet Explorer Version 5.0 (with Javascript on)

Live Examples

There is a list of live examples in our forum … live examples

Credits

Thanks to Patrick Griffiths and Dan Webb for their article which we used as a model for the CSS used in this plugin. And thanks to Miriam Schwab for writing the blog post which motivated us to create it.

Support

For support, please visit the dropdown menus board in our support forum.

Aqua Vaccinium WordPress theme

Ryan — Sat, 23 Feb 2008 16:35:33 +0000

The “Aqua Vaccinium” WordPress theme was originally intended for use on a clients site, but they have since decided to go with a red theme and use Dreamweaver (ick!) instead of WordPress, so we have decided to release this theme to you for free.

Aqua Vaccinium features a smooth blue and green theme and has a prominent Suckerfish dropdown menu built in (no plugin needed).

Live Demo

Visit our WordPress theme demo site to see Aqua Vaccinium in action.

Download

Aqua Vaccinium download

Bugs/feature requests

If you find a bug or would like an extra feature which isn’t present in the standard Aqua Vaccinium theme, feel free to leave a comment in our themes forum.

If you require any customisations specific to your site, please get in touch via our contact form.

Theme files

We’ve tried to keep the theming as simple as possible to allow for easy customisation. There are only five template files, plus images, javascript and css files. I’ve included the original build file for the logo (PSD format), so you can edit it to match your own site name.

The main dropdown menu is set to display categories by default, but you can insert other pages into your dropdown if you like (leave a post in our themes forum if you need help with this).

The blue section (below the main menu) displays either the blog description or the category description depending on what page you are on. If the blog or category description is missing, this will be left blank.

Naming

more information »

WordPress Dropdown Menu Plugin

Ryan — Mon, 14 Jan 2008 12:35:47 +0000

Note: This plugin has been superceded by the ‘PixoPoint Menu Plugin‘.

This plugin generates the code necessary to create a Son of Suckerfish WordPress dropdown menu.

Download

The plugin is available for download here … Suckerfish WordPress Plugin

Installation

Add the following code wherever you want the dropdown to appear in your theme (usually header.php) and activate the plugin in your admin panel.

This code adds a button for your home page and dropdowns for your Pages, Archives, Categories and Blogroll.

Customisation

You can modify the look of your dropdown by using our new Online Suckerfish Dropdown CSS Generator. The generator has been designed with this plugin in mind, so just copy and paste the CSS code from the generator to the plugins options page.

Credits

Support

For support, please visit the dropdown menus board in our support forum. Please note that many new features are available in the ‘Multi-level Navigation Plugin‘ so you should check that out before asking any questions about this plugin.