SevenSpark

What’s new in UberMenu 2.0? (A Responsive, More Flexible WordPress Mega Menu)

sevenspark — Fri, 10 Feb 2012 14:30:51 +0000

UberMenu 2.0 – WordPress Mega Menu Plugin brings some awesome new features to the table, including responsive menus, enhanced CSS, refreshed skins, and easily defined submenu columns.

It’s been a year since I first released UberMenu – WordPress Mega Menu Plugin. In that time it has sold almost 4,000 copies and continues to be an extremely popular WordPress menu solution. I’m so lucky that this plugin has had such success – it has allowed me to move my business to digital goods development full-time, which has been wonderful. I’d like to thank all of the great customers who have bought UberMenu, I truly appreciate it.

Are you upgrading from an old version of UberMenu to version 2.0? Please read the Important Upgrade Instructions

In the last year I’ve gathered a lot of insight into the menu process through my interactions with the many users I’ve supported. I’ve learned a lot about what features users make the most use of, what tends to cause confusion, common customization needs, and a whole lot more.

I’ve spent the last month and a half distilling this accumulated knowledge into what is now UberMenu 2.0, refining functionality and enhancing the feature set. My goals with UberMenu 2.0 have been:

Increase the intuitiveness of the plugin
Improve areas that tend to cause customer confusion
Increase javascript efficiency
Increase plugin extensibility
Improve menu design, robustness, and flexibility

I’m very proud of the new UberMenu 2.0, which represents a huge time investment to deliver major enhancements. Here are some of the new features in UberMenu 2.0.

Enhanced CSS

The basic CSS structure of UberMenu has been torn down and rebuilt to provide an even stronger foundation for the menu. This means menus act more intuitively out of the box, and customizations are simpler to implement. It also means that UberMenu works excellently as a pure CSS menu with full-width submenus.

More Efficient Javascript

A stronger CSS foundation means less calculations in the javascript, which leaves us with a much lighter weight and more efficient jQuery plugin enhancing UberMenu. The javascript has also been rewritten as a jQuery plugin, implementing jQuery best practices. The upshot is that UberMenu now loads and runs faster than ever.

Full Width Submenus and Defined Columns

One part of UberMenu 1.x which was less intuitive than it could be was column formatting. Columns were sized entirely based on their content size, which led to some interesting corner cases. While these issues were easily resolvable via custom CSS, for users without a working knowledge of the box model, such strange behavior was frustrating and confusing.

In UberMenu 2.0, columns can be sized in two ways, on a per-submenu basis: naturally, or in grid based columns. In a natural layout, each column is sized to its contents, and each column may be a different width. This is great for single-row submenus. For multiple-row submenus, UberMenu 2.0 adds the ability to set a submenu to be full-width, and apply a specific number of columns to the submenu. These columns will be uniformly sized, and extend the entire width of the submenu automatically.

I believe this new system is much more intuitive and will provide users a much better experience when wrangling their submenus into the formats they desire.

Fully Responsive Menus

When designing Agility HTML5 Template, I spent a long while studying responsive design best practices. UberMenu makes use of that knowledge to deliver a responsive mega menu. As the viewport changes, UberMenu’s contents size intelligently to optimize display at each size. (Note this can be disabled for non-responsive themes).

iPhone and iPad Compatibility

Going hand in hand with the responsive mega menu enhancements, UberMenu is now even more compatible with iOS devices, delivering an intuitive user experience for responsive themes.

More Flexibility

Another goal of UberMenu 2.0 is to build in some of the most common customizations into the Control Panel, to avoid core UberMenu edits. Now you can:

Customize dropdown animation speeds
Trigger via hover in addition to hoverIntent and click
Customize hover intent timing
Disable image resizing
Enable or disable loading UberMenu on registration and login pages

Fresh menu skins

Both design trends and my own design skills have advanced a lot in the last year. UberMenu 2.0 features refreshed menu skins, with progressive CSS3 enhancements. The designs are now cleaner and more modern (the old designs are still included for legacy use, if desired).

Watch for more menu skin options coming soon!

Rewritten Style Generator

The UberMenu Style Generator has been completely rewritten to make use of LESS via lessphp. This means more consistency and easier upgrades. The new Style Generator also has the ability to write your custom style to an external stylesheet rather than including the CSS in the site header (though that is still an option).

A note on backwards compatibility

In developing UberMenu 2.0, I’ve made every effort to maximize compatibility with previous UberMenu installations. All menu items and their options, as well as UberMenu Control Panel options, will remain intact. Unfortunately, some sacrifices had to be made in the name of progress. Because the underlying CSS structure has been enhanced, some types of customizations may no longer appear as desired and may need to be reworked – though in some cases they will no longer be necessary at all! Specifically, submenu positioning and column resizing may need to be readdressed. However, all previous class names and IDs have remained consistent to minimize the impact and make the transition for users from 1.x to 2.0 as smooth as possible.

Well, that’s about it. I hope UberMenu customers enjoy the upgrade! It’s been a long process getting to this point, and I’m very pleased with the results. Feedback is always welcome and will be considered for future releases whenever possible.

Thanks again to all UberMenu customers for your business!

SevenSpark - Web Design Studio

ReplyPantry – Text in a Can for the Envato Marketplaces

sevenspark — Sun, 01 Jan 2012 16:34:21 +0000

Download View on GitHub

ReplyPantry is a Google Chrome Extension that allows Envato Marketplace users to insert customized text snippets into forum posts or item comments.

Once you install ReplyPantry you’ll see the can icon below your reply boxes in the forums – and above in the item comments. Click the can icon to show the canned text snippets (“cans”), and click a can title to insert that canned text. You’re able to add, save, edit, and remove cans. Hopefully it’s fairly intuitive.

If you’re using Google Chrome, clicking the download link should allow you to download and prompt you to install the extension.

SevenSpark - Web Design Studio

How to create a counter for Contact Form 7

sevenspark — Thu, 03 Nov 2011 21:07:48 +0000

Here’s an easy way to set up a counter for your contact form using Contact Form 7 and Contact Form 7 Dynamic Text Extension. Basically, we’re setting up an action that will increment a counter each time an email is sent. We’re grabbing that count and placing it in the email using CF7 DTX.

Add the functional code

First, here’s the code to add (anywhere, but functions.php works well. It’ll be added to CF7 DTX some time down the road hopefully).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//Define the key to store in the database
define( 'CF7_COUNTER', 'cf7-counter' );

//Create the shortcode which will set the value for the DTX field
function cf7dtx_counter(){
$val = get_option( CF7_COUNTER, 0) + 1; //Increment the current count
return $val;
}
add_shortcode('CF7_counter', 'cf7dtx_counter');

//Action performed when the mail is actually sent by CF7
function cf7dtx_increment_mail_counter(){
$val = get_option( CF7_COUNTER, 0) + 1; //Increment the current count
update_option(CF7_COUNTER, $val); //Update the settings with the new count
}
add_action('wpcf7_mail_sent', 'cf7dtx_increment_mail_counter');

Configure the Contact Form

Next, we set up our contact form. We’re going to add a new hidden dynamic field to it using CF7 DTX and the new shortcode we just wrote. Here’s what that code would look like in the Contact Form 7 Form Settings:

1	[dynamichidden cf7-counter "CF7_counter"]

Finally, we want to include the count in the message we receive, so we’ll add it to the CF7 Message Body field:

1	Count: [cf7-counter]

Some Notes

The counter only increments when the mail is actually sent. Form loads and failed sends won’t trigger the count to increase.
If two contact forms are submitted without reloading the page, the count will be incremented properly, but it won’t be reflected in the email. This is because the count that is sent in the email is only updated when the page loads. To update it without a page load, you’d need to write some JS that hooks into CF7′s send callbacks.

That’s about it – enjoy! Let me know in the comments if you find this useful (or run into any trouble).

SevenSpark - Web Design Studio

Apple-style Menu Skin for UberMenu

sevenspark — Tue, 04 Oct 2011 17:53:02 +0000

Download (5.11 kB)

Here’s a free CSS3 Apple-style menu skin for use with UberMenu – WordPress Mega Menu Plugin.

How to install

Copy the contents of the download to your plugins/wp-uber-menu/styles/skins/custom.css file.
In Appearance > UberMenu > Style Settings, set Style Application to Preset
Set Style Preset to Custom

Enjoy!

SevenSpark - Web Design Studio

CSS3 Progress Bars

sevenspark — Tue, 13 Sep 2011 13:35:44 +0000

Demo Code

Here’s a set of pure CSS3 Progress Bars. They are currently static (their progress percentage is set via CSS), but they could be adapted to any progress bar script I expect.

Inspiration and Resources:

SevenSpark - Web Design Studio