Sunday, November 28, 2010

Slideout Panels for Viewing/Expanding Content

Slideout Panels can be a useful way to feature additional content on a page without requiring the visitor to navigate to a different page. In short, it is frequently shown initially as a "tab" on a page, but there are unlimited ways of implementing content that "expands". The expansion usually occurs on "click". It could also expand on "hover", but since the content is actually "growing", it would probably be best to occur on a click action, so the user can have a greater expectation that a substantial change will occur.  This "expansion" behavior is also seen in advertising, where a flash ad will expand if someone clicks on or hovers over the ad.

Expanding content or panels are a little different than a "lightbox" style popup.

In a lightbox (see lightbox blog), the content  usually appears by "floating" in the middle of the screen, and the rest of the screen goes dark around it.

In a slideout panel, the entire panel usually grows by expanding along the top, bottom, or side of the browser window. Depending on the implementation and the page layout, the expanding panel may either overlap the page content, or the panel may "push" the page content out of the way (the "push" method would only work effectively with top or bottom panel placement). Generally, the overlapping style is more common. There is generally no darkening of the surrounding page content when this method is used.
http://web-kreation.com/demos/Sliding_login_panel_jquery/
http://jalbum.macosxsupport.com/
Slideout Panel vertical

Slideout Panel left

In expanding content, the expanding container simply grows its dimensions, usually in an overlapping manner. Again, there is generally no darkening of the surrounding page content when this method is used.
http://demo.tutorialzine.com/2010/04/slideout-context-tips-jquery-css3/demo.html
Expanding content
Essentially, there many ways that JavaScript (and to be more specific, the Jquery library, bundled with Drupal), can be used to modify the display and provide a deeper level of interactivity with the end user. As always, a non-JavaScript alternative should be available for search engines and browsers with JavaScript disabled.

The Jquery plugins homepage should provide a good source of ideas and possibilities.

No comments:

Post a Comment