Another Framework Theme?

Yes, there's already loads of them around, but Tundra is very different from all of them and it offers unique features and a different approach to code organization. The theme itself resembles a theme framework as it has a built-in feature management and css-writing system.

Part of the Tundra development process was also creating a new jQuery dropdown-menu plugin from scratch. The included jQuery SooperFish plugin enriches Drupal with multi-column animiated menus that are fully configurable in the theme settings form.

Why does it matter?

Tundra is the first theme that offers advanced jQuery features with the ease of a point-and-click interface. All configuration is pulled into the theme settings form to form an interactive theme configurator. Some of the features are:

• Sooper Easing: This exposes advanced animation easing to all other features
• Sooper LivePreview: Makes changes to theme settings form for most features visible immediately, to ease the configuration process. See configurator demo.
• SooperFlex Grid System: Full grid control in both flexible and fixed width layouts without breaking in internet explorer 6. Skinr module is used to expose float (left/right) control and width control. Supports rational proportions and irrational proportions based on golden ratio (phi).
• Sooper DropdownKit: For usage and configuration of the jQuery SooperFish plugin.
• Sooper SlideshowKit: A jQuery cycle based solutiuon for creating configurable slideshows.
• : A jQuery nivo based solutiuon for creating configurable image or photo slideshows.
• Sooper LayoutKit: A theme-settings based system to configure fixed or fluid theme width, sidebar widths and mi-/max width.
• Sooper FontKit: A cufon based solution for using custom fonts and special effects (gradients/shadows) in your theme. 25+ fonts included in feature.
• Sooper BackgroundImageKit: A solution for settings a background image in the theme settings. Easy to extend with your own images.
• Sooper Linkicons: Automatically adds mime type and email icons to links. Includes 2 free icons sets.

Tundra is the theme that powers all of the premium drupal themes on SooperThemes.com. We made all the premium features GPL, and Tundra is our way of giving back to the community: it's a vessel with all of the code that was developed over the years.

Download Tundra on the Drupal.org project page

Here is some additional info, it's a screenshot of the product page on sooperthemes.com

I just released SooperFish Multi-Column dropdown menus version 0.2. Changelog:

SooperFish 0.2, 15-06-2010
----------------------

- Added classnames to indicate when menus are multicolumn
- Checked compatibility with jQuery 1.4, worked fine for me

Nothing special. I got a complaint about the menu not loading with jQuery 1.4.2. I tried it and it worked fine with 1.4.2, and also with 1.3.x. If anyone still has problems with this, let me know, and if possible also check for any errors in the firebug console!

SooperFish is a highly configurable solution for animated dropdown menus. It combines the features of superfish, structured programming of Droppy and a ton of new features like multi-column dropdown menus and configurable show AND hide animation with custom easing.

It was originally created to power the drop-down menus for the premium drupal themes on this site and now it's avaiable to anyone.

Demo:

Also check the Synopsis premium drupal theme for an excellent demonstration of SooperFish combined with Cufon!

Download:

edit 29-12-2011: Due to the jQuery repository having problems I've put SooperFish on github:

https://github.com/jjroelofs/jQuery-SooperFish

http://plugins.jquery.com/project/SooperFish

Feature List:

• Automatic dual or triple columns based on number of child menu items
• Optional delay before hiding menu on mouse-out
• Optional automatic indicator arrows (in black or white)
• Configurable show AND hide animations
• Custom easing supported
• Works with jQuery backlava plugin (optionally)
• Works fine with Javascript disabled
• Comes with several free themes to demonstrate styling
• 3.65kb uncompressed
• 2.01kb minified

Todo List:

• Fix keyboard accessibility, menu should work with tabbing in absence of mouse input

This plugin works with jQuery 1.2.6 and higher, haven't tested it with anything lower.

Code for demo:

This goes in your header:

{syntaxhighlighter brush: xml} {/syntaxhighlighter}

ul.sf-menu should be adapted to point to your own menu, using a CSS selector.

Using the features:

Here is a more advanced usage of sooperfish, with overrides for most of the settings:

{syntaxhighlighter brush: jscript} $(document).ready(function() { $('#header > div > ul').sooperfish({ hoverClass: 'over', delay: '400ms', dualColumn: 7, tripleColumn: 14, animationShow: {height:'show',opacity:'show'}, speedShow: '800ms', easingShow: 'easeOutTurbo2', animationHide: {width:'hide',opacity:'hide'}, speedHide: '400ms', easingHide: 'easeOutTurbo', autoArrows: false }); }); {/syntaxhighlighter}

Example simple usage:

{syntaxhighlighter brush: jscript} $(document).ready(function() { $('ul.sf-menu').sooperfish(); }); {/syntaxhighlighter}

Example intermediate usage:

{syntaxhighlighter brush: jscript} $(document).ready(function() { $('ul.sf-menu').sooperfish({ animationShow: {'width':'show'}, speedShow: 400, animationHide: {'width':'hide'}, speedHide: 100 }); }); {/syntaxhighlighter}

Example advanced usage:

{syntaxhighlighter brush: jscript} $(document).ready(function() { $('ul.sf-menu').sooperfish({ dualColumn : 6, //if a submenu has at least this many items it will be divided in 2 columns tripleColumn : 8, //if a submenu has at least this many items it will be divided in 3 columns hoverClass : 'sfHover', delay : 500, //make sure menus only disappear when intended, 500ms is advised by Jacob Nielsen animationShow : {width:'show',height:'show',opacity:'show'}, speedShow : 750, easingShow : 'easeOutBounce', animationHide : {width:'hide',height:'hide',opacity:'hide'}, speedHide : 300, easingHide : 'easeInOvershoot', autoArrows : true }); }); {/syntaxhighlighter}

Work in Progress

If you spot a bug or want a feature, feel free to drop a comment or file an issue at the jQuery plugin page

Update: This plugin has materialized, check out the SooperFish jQuery multi-column drop-down plugin

From previous blog posts I've learned that multi column / animated dopdown menus are really in demand. I've now pretty much completed a new jQuery plugin that handles all this. At first I started modifying superfish but I had learned that superfish uses some really funky events bindings and event handling which caused the submenu-hide animations to fail on sub-sub menus, and there were some other weird bugs.

So I spent the whole day coding a new plugin based on the much leaner jQuery droppy plugin and had a much better time working up from there! So now I thought why stop now, maybe someone can think of some cool features that I haven't yet implemented.

Here is an overview of the options it currently takes:

As you can see it also uses custom easing!

If you can think of any cool behaviours that can be added to this plugin don't hesitate to drop a comment!

And no, it does not magically allow you to create true mega-dropdown menus with blocks and grouped menus and all. Unfortunately I lack the skills and understanding to create a decent module that somehow combines Drupals otherwise awesome menu system with blocks and views
.
Though if you are interested in this have a look here:
http://drupal.org/node/778452
http://drupal.org/project/megamenu

Some advantages of this jQuery plugin (compared with superfish):

1. Automatic multicolumns submenus
2. Full configurable animations
3. Custom easing support
4. menu-Hide animation
5. Dropped hoverIntent plugin in favor of simple setTimeOut on mouseOut.
6. Optional automatic submenu indicator arrows available in black and white
7. All new CSS, more compact and easy to skin
8. Readable, documented and well organised jQuery code. Though I must admit I'm not a top notch programmer and the code is very verbose, but if you're a beginner you'll love it.