FormBox – A jQuery & CSS3 Drop-Down Menu With Integrated Forms

Hey guys. Today I’d like to share something new with you – I call it jQuery FormBox. When designing the layout for a website there’s one thing that we as designers are always conscious of – making things easier for users. No matter what it is your site offers, you’re still going to need to balance the interface in a way that keeps it very easy for users to find and perform core site functions around your site or service, ideally without having to load up a completely different page.

Some of these common functions are logging in, registering or even resetting a password, yet quite often in many cases we still provide users the same old experience – a separate page for logging in, another for signing-up and yet again another if you’ve forgotten what your login details were. Today I would like to present a project that tries to streamline this experience – FormBox.

Over the years one aspect of site design which has remained quite consistent is the concept of persistent navigation in the header.For example, if you look at websites such as Amazon.com or Facebook, you’ll notice that the design teams behind giants these tried their best to pack in access to many different areas of their sites through the use of drop-down menus near the top of the page.

When employed correctly, drop-down menus can be a very powerful user interface tool and they were the starting point for how I conceived FormBox. Recently, websites such as Twitter.com popularized the concept of tucking away a login box that popped out when you clicked a single link but what if we were to take these two concepts and integrate them? Drop-down menus and forms that only appear when you need them.

What Is FormBox?.

FormBox is a jQuery and CSS3 powered navigation menu that supports integrated forms. The version presented today features a login form, sign-up form, password reset and even a contact form, all of which are only dropped down when a user hovers over their corresponding menu elements. In technical terms, FormBox works much the way like a tabbed menu does, allowing you to switch between multiple panels of HTML content (forms) which only appear when the user has indicated an interest or need to use them.

This streamlined interface removes the requirement for dedicated registration, login and other types of pages which can instead be easily made available from any page the user is already on, saving them time and simplifying the process in one go. At under 2.5KB uncompressed (including support for graphical tool-tips), FormBox is also a very lightweight solution.

Why is FormBox Useful?

In addition to streamlining the way users are offered forms, in some cases FormBox can also lower the barrier of entry to some of the features your site may offer when it comes to forms. For example, if your website currently has registration and login features, how many clicks does it currently take for a user to get to those pages?. The average is usually between 1 and 2 for most (and that’s doubled if the user has to login again after signing up). How about how many clicks it takes them to reset their password or even get in touch with you?. With FormBox, there are no clicks. You simply hover over an item such as ‘Login’, ‘Register’ or ‘Contact’ and you’re presented with that form.

If you’re concerned about not being able to give your users sufficient instructions or feedback for form input, FormBox takes care of that too. You’re able to display a very visible graphical tooltip whenever a user hovers over an input field so if they need to know what length or content a password needs to contain, lack of space isn’t an issue. I wanted to stop short of including built-in form validation, but if you’re interested in using FormBox in a project, it’s fairly easy to integrate some of the existing jQuery validation plugins into the code. In my opinion FormBox is an elegant, simple proof of concept of a way we can further improve user experience by trying things outside of the norm.

How Do You Create FormBox?

If you’ve ever used an implementation of tabs powered by jQuery (or another JS framework), you’ll find using FormBox quite straight-forward. Each individual form ‘menu’ is actual a tab panel which can be triggered by clicking on a menu link referencing it’s hash ID (eg. #tab2). This approach allows for both standard menu links and form drop-downs to be supported easily.

Let’s first take a look at the HTML required to create FormBox – as you can see we begin by creating a UL/LI list of links and attaching a class of ‘regular’ or ‘dropdown’ to each of these menu items.  Next, we define a FormBox panel which contains our HTML/Form code. For the sake of length I am only including one example of these but if you grab the sources you’ll be able to see each drop-down panel is defined similarly.

HTML

Home
Login
Sign-Up
Forgot Password
Pricing
About
Contact
 






 

Username

Password


 Remember Me


Login

 

JavaScript

The jQuery used in FormBox powers the drop-down menus, animation, tool-tips and re-positioning. Below you can find the most important functions used in this demo or alternatively you can pick up the sources to see the code in full.

By default, FormBox works as a hover-based interface. Hovering over a menu item with a drop-down on it displays the menu. You can of course change this behavior by changing tabMenuLinks.hover() into a click() function and defining a separate piece of CSS or jQuery to cover the addition of the active class to your menu links. The below will give you everything you need to get started with either:

$(window).load(function(){
var tabs = $("#tabs");
var tabPanesContainer = $("ul#tabPanes");
var tabPanesAll = tabPanesContainer.find("li").css("position", "absolute");
var tabMenuLinks = $("ul#tabMenu .dropdown");
var regularLinks = $("ul#tabMenu .regular");
var dropDownSpeed = 200;
var dropUpSpeed   = 200;
var menuHeight = '240px';
/*Handle menu links - display the form panel on hover*/
tabMenuLinks.hover(function()
{
    var thisMenuItem = $(this);
    /*get the offset of this item in respect to the page*/
    var thisMargin   = thisMenuItem.offset().left;
    /*get the offset of the navigation bar in respect to the page*/
    var tabsOffset   = tabs.offset().left;
    var thisIndex = thisMenuItem.index();
    thisMargin = Math.floor(thisMargin - tabsOffset);
    /*correct the offset*/
    var thisOffset = thisMargin - 52;
    tabPanesContainer.css('margin-left', thisOffset);
    /*begin animateing the drop down*/
    tabPanesContainer.stop().animate({
        height: menuHeight
    }, dropDownSpeed);
    /*remove the active class from other menu items*/
    tabMenuLinks.removeClass('activeTab');
    /*add the active class to the current menu item*/
    thisMenuItem.addClass('activeTab');
    /*detect and switch to the current form panel*/
    var thisHash = thisMenuItem.find("a").attr('href');
    var tabClicked = tabPanesAll.filter(thisHash);
    tabClicked.appendTo(tabPanesContainer).show();
    return false;
}, function() {
   $(this).stop();
});
/*Close the currently open menu*/
function closeMenu()
{
tabMenuLinks.removeClass('activeTab');
    tabPanesContainer.stop().animate({
        height: '0px'
    }, dropUpSpeed);
}
/*Handle non tab-menu links*/
regularLinks.hover(function()
{
    tabPanesContainer.stop().animate({
        height: '0px'
    });
    tabMenuLinks.removeClass('activeTab');
    $(this).addClass('activeTab');
}, function() {
    $(this).removeClass('activeTab');
});

CSS

My FormBox demo is quite graphical in nature but what we want to focus on is the CSS for the drop-down tab panes and the FormBox menu itself (the div called ‘tabs’). In the complete sources you can find the classes used to enable regular links in the tabbed interface as well as the drop-downs. You can also find the code to the raised CSS3 buttons in this pack.

#tabs {
width:604px;
height:47px;
background-image:url('../images/wooden8.png');
-webkit-box-shadow: 0px 5px 6px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 5px 6px ;
box-shadow: 0px 5px 6px ;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family:Arial;
font-size:14px;
margin:0 auto;
}
ul#tabPanes
{
    margin-left:52px;
    position:relative;
    width:227px;
    overflow: hidden;
    clear:both;
    font-family:Arial;
    list-style-type: none;
    margin-top:-0px;
    position:absolute;
}
ul#tabPanes li
{
    width: 227px;
}
ul#tabPanes li#tab1,li#tab2,li#tab3,li#tab4
{
    height:227px;
    margin-top:-30px;
    margin-left:-3px;
    display:none;
    text-shadow: #ffffff 0px 1px 0px;
     background-color:#C9AA7C;
     -moz-border-radius-bottomright: 5px;
     -moz-border-radius-bottomleft: 5px;
     -webkit-border-bottom-right-radius:5px;
     -webkit-border-bottom-left-radius:5px;
     background-image:url('../images/wood3.jpg');
     background-repeat:no-repeat;
    -webkit-box-shadow: 0px 3px 4px rgba(0,0,0,0.6);
     -moz-box-shadow: 0px 3px 4px ;
     box-shadow: 0px 3px 4px ;
}

The Tooltips – JavaScript

If you’ve had a chance to watch my jQuery Plugin In Under 5 Minutes screencast, the next piece of code will look a little familiar. This is the jQuery that powers the tooltips found in FormBox. When a user hovers over an input field, the code checks to see if an alt tag has been defined for it. If it has, we append the tooltip to the DOM and then position it relative to the element the user has hovered over. When a user hovers off the element, we simply remove the tooltip from our stack.

An alternative approach to this (which may trim a few milliseconds off the display time) is using a single persistent element for your tooltip object which you can then hide/re-position/populate and show as and when needed. Both techniques use some of the same code code and the below code snippet covers this functionality.

$('input').hover(function()
{
var thisItem = $(this);
var msgTip = thisItem.attr('alt');
if(msgTip.length)
{
  $('body').append('\'+  msgTip +'\');
		var pos = thisItem.offset();
		var width = thisItem.width();
		$("#menuTooltip").css( { "left": (pos.left
+ 115) + "px", "top":pos.top - 90 + "px" } );
		$("#menuTooltip").fadeIn('slow');
}
}, function()
{
  $('div#menuTooltip').remove();
});

Demos and Downloads
And that’s it!. If you would like to download the sources to FormBox or check out a demo, please see below for the links. FormBox is compatible with FireFox, Chrome, Safari and Internet Explorer 6.0+.

Enjoyed this post?, please feel free to share it with your friends and colleages by clicking the retweet button.