9/17/2010

Full Size Background Image jQuery Plugin

I guess I am on a jQuery plugin kick since it seems to be all I am doing lately. I just really dig how versatile the jQuery library is and all the amazing things you can do to a Web site with it. I had to create a resizing background image that would fit the full size of the browser window and this little plugin does just that.

All you need is an image you want to have as your background. Once you have that and use the plugin, the image will resize to the full width/height of the browser window. Every time the browser window resizes, so will the background image.

First comes the plugin code:

(function($) {

$.fn.fullBg = function(){

  var bgImg = $(this);		



  function resizeImg() {

    var imgwidth = bgImg.width();

    var imgheight = bgImg.height();



    var winwidth = $(window).width();

    var winheight = $(window).height();



    var widthratio = winwidth / imgwidth;

    var heightratio = winheight / imgheight;



    var widthdiff = heightratio * imgwidth;

    var heightdiff = widthratio * imgheight;



    if(heightdiff>winheight) {

      bgImg.css({

        width: winwidth+'px',

        height: heightdiff+'px'

      });

    } else {

      bgImg.css({

        width: widthdiff+'px',

        height: winheight+'px'

      });		

    }

  }

  resizeImg();

  $(window).resize(function() {

    resizeImg();

  });

};

})(jQuery)

There is only a little CSS needed for this one:

.fullBg {

position: absolute;

top: 0;

left: 0;

overflow: hidden;

width: 100%;

}



#maincontent {

position: absolute;

top: 0;

left: 0;

z-index: 50;

}

If you want your background to stay fixed you can change the .fullBG CSS to this:

.fullBg {

position: fixed;

top: 0;

left: 0;

overflow: hidden;

width: 100%;

height: 100%;

}

For the HTML markup, you can just add an image tag with an id or class, but you also need to add a div that contains your main content or else it won’t work properly. This is the bare minimum:

<img src="your-background-image.jpg" alt="" id="background" />

<div id="maincontent">



div>

To call the jQuery function just use this:

(function($) {

$("#background").fullBg();

})(jQuery)

Once again, this plugin is pretty simple so no options are available. It pretty much just does what it does.

Download Demo
Posted by at No comments:
Labels:

9/16/2010

Designing Drop-Down Menus: Examples and Best Practices

As a general rule, most Web developers, especially usability enthusiasts, say it is bad practice to use drop-down menus because they are confusing, annoying and oftentimes dysfunctional. From a design standpoint, however, drop-down menus are an excellent feature because they help clean up a busy layout. If structured correctly, drop-down menus can be a great navigation tool, while still being a usable and attractive design feature.

Yes, that’s right: drop-down navigation menus can be user-friendly. Just yesterday Jacob Nielsen the results of his recent drop-down menus study, in which he found out that big, two-dimensional drop-down panels that group navigation options help users to avoid scrolling and can precisely explain the user’s choices with effective use of typography, icons, and tooltips.

These panels appear temporarily and disappear on their own when users move the pointer to another top-level option or to a “regular” part of the screen. You can find more information about Nielsen’s study in his article Mega Drop-Down Navigation Menus Work Well.

Food in Designing Drop-Down Menus: Examples and Best Practices
Huge vertical drop-down panel from foodnetwork.com; notice a close button (the “x” in the upper right corner).

In this article we take a closer look at the nature of drop-down navigation menus, analyze situations in which they should or should not be used, discuss various implementations and finally showcase a couple of bad and good examples of such menus. The article also includes various tips and suggestions to help you work with your drop-down menus.

[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]

Where To Use Drop-Down Menus

You will often see many trends in which drop-down menus are used. Here are a few of the most common ones.

Organize Pages in a Section
Most commonly, drop-down menus are used to pull all of the pages in a certain category together in one organized element. This is essentially sub-navigation. Take a look at the design below. A drop-down element contains all of the different categories for a certain section of the website.

Change Org in Designing Drop-Down Menus: Examples and Best Practices

Organize Categories in a Blog
You will see many blogs use a drop-down menu to organize categories and tags. Why? Blogs are driven by a large amount of information, so the layout needs to be as clean as possible to hold that content. A drop-down menu ultimately helps pull together links, such as categories, out of layout elements, such as the sidebar.

Gomediazine in Designing Drop-Down Menus: Examples and Best Practices

Show Products on an eCommerce Website
You will see many e-commerce websites use drop-down menus to show products or categories of products. The drop-down menu is a friendly feature that all consumers can easily figure out, so it is a perfect way to organize products. The Best Buy website, shown below, does just this.

Bestbuy in Designing Drop-Down Menus: Examples and Best Practices

Display Modules
A drop-down can be an excellent way to tuck away an obstructive menu, which the user can click on to reveal. Take the example below, for instance. The sign-in element is part of the navigation, then appears in the form of a drop-down. This is a great way to take this large element out of the layout without negatively impacting usability.

Collabfinder in Designing Drop-Down Menus: Examples and Best Practices

Best Practices

Drop-down menus do in fact organize content into small, uncluttered elements, but if not done correctly, they can be just as bad as a messy layout. Here are some ways to make this controversial element more usable.

Avoid a Drop-Down with More than Two Levels
Overall, this is just about the worst mistake one could make with drop-down menus in terms of usability. If done with a hover menu structure, the user will lose focus of the menu whenever the mouse pointer moves away from it. If done with a clickable structure, it has too many buttons and doesn’t work nicely.

The website shown below makes this mistake. The menus are very difficult to use because if you even slightly lose focus of the menu with the mouse pointer, you have to start from the top. Notice the tooltip, which also gets in the way of the navigation.

Brita in Designing Drop-Down Menus: Examples and Best Practices

Option 1: Hover Menu
Basically, there are two ways to approach the drop-down menu: with either a hover or a click to activate the menu. From a design and convenience standpoint, a hover menu is better.

Option 2: Clickable Menu
On the other hand, many will argue that a clickable menu is better because it is much more usable. Reason? Because of the way a hover menu is constructed, the user has to have the pointer over the menu at all times. If the user loses focus of the hover menu, it closes. Therefore, it is better to go with a drop-down menu that is activated by clicking a button, then deactivated by clicking the button once more.

CSS-Tricks has a tutorial showing how to create a layout similar to that of Digg. It is a perfect drop-down menu with a click-to-activate/deactivate feature, so it’s certainly something you should take a look at.

Csstricks in Designing Drop-Down Menus: Examples and Best Practices

Also, Google features a usable drop-down menu using the click on/off trick.

Google in Designing Drop-Down Menus: Examples and Best Practices

Delay the Deactivation of a Hover
Avoiding a hover structure and many levels in a drop-down may be too much of a restriction for the navigation you are trying to create. There is a solution, though, that can improve the usability of a hover and multi-level menu. With most menus, the drop-down disappears immediately after the user moves the mouse pointer away from the menu. The solution is to delay its disappearance. Or, have a click function that requires users to click outside the menu area to close the drop-down, similar to how a Lightbox functions.

Take Dell, for example. It uses a multi-level drop-down menu, but it is still somewhat usable. This is the only exception to the use of multi-level drop-down menus.

Dell in Designing Drop-Down Menus: Examples and Best Practices

Furthermore, the menu on the Porsche website has multiple levels. However, the menu has a very wide focus range. This means you have to move your pointer a certain distance away from the menu to close it.

Porsche in Designing Drop-Down Menus: Examples and Best Practices

Add a Hover Effect to Menu Options
The navigation itself actually affects the usability of the drop-down menu. One way to make the menu work better with the drop-down is to add a hover effect to the menu options. This shows exactly which button in the navigation the menu is extending from, which will certainly help users.

The example below, the MediaTemple home page, shows a strong hover effect on the navigation options, which helps to support the drop-down menu.

Mt in Designing Drop-Down Menus: Examples and Best Practices

Seamless Transitions
When a drop-down menu appears, it should appear seamlessly and without interruption. The menu should load immediately. Many websites make the mistake of making the menu so “heavy” that it takes more than an instant to load upon the hover.

Transition effects are one more detail that can look really cool. Instead of the menu simply appearing, try throwing in a wipe down or fade in. Just be sure to make the transition quick and not disruptive.

You will notice that Microsoft doesn’t do a very good job of creating a seamless menu. Observe the image below closely. You will notice that outlines from adjacent menus are still visible when the main menu is loading. When you move from button to button in the navigation, the drop-down menus have a slight lag, which looks bad. Of course, this doesn’t occur in all browsers, but it shouldn’t occur in any.

Microsoft2 in Designing Drop-Down Menus: Examples and Best Practices

Remove Tooltips
Of course, when designing drop-down menus, there are always little details that impact usability. One important practice you may overlook is the presence of tooltips, or the lack of tooltips. You should always remove tooltips from buttons with drop-down menus. Reason? Tooltips just get in the way and sometimes even block the first list item in the drop-down menu.

Yes, we will be picking on Microsoft once more. Microsoft makes this mistake on its corporate page. Notice how the tooltip blocks many of the list items, which makes navigation that much more difficult.

Microsoft in Designing Drop-Down Menus: Examples and Best Practices

Styling Techniques

Content backgrounds can be somewhat of a challenge, too. The background has to be subtle, or it will ruin the content. Here are a few ways to liven up content backgrounds without going over the top.

Use a Clean List
Not only is the element styling important, but the content styling is important, too. Clean typography and a readable list are important. Use smart spacing between elements in the list, and add a border above and below list items.

The example below from Audi shows a very well-organized and readable list. The list items are separated, and there are even list item icons.

Audi in Designing Drop-Down Menus: Examples and Best Practices

On the other hand, The Washington Post’s website has a very poor list in the drop-down menu. There is not enough spacing between list items, so the menu is very cluttered and difficult to use.

Washingtonpost in Designing Drop-Down Menus: Examples and Best Practices

Hover Effects on List Items
All buttons need some sort of hover effect to be more usable. In drop-down menu lists, apply subtle hover effects, perhaps just a text color or background change. The White House website uses only a background change on list items, but it still helps the user.

Whitehouse in Designing Drop-Down Menus: Examples and Best Practices

Semi-Transparent Background
This won’t work for all designs, but you should consider a semi-transparent background for the menu. The website shown below has a transparency, so the user can still see through to the image background. The key to semi-transparent elements is to keep a strong and readable contrast.

August in Designing Drop-Down Menus: Examples and Best Practices

Keep Styling Consistent with Menu
You will hear everywhere that consistency in styling is a must, and it certainly is. For navigation and a drop-down menu to work together as one unit, as they should, the styling needs to be similar. Use the same fonts and a similar background.

In the example below, the drop-down menu looks as it should.

Macstorm in Designing Drop-Down Menus: Examples and Best Practices

Poorly Constructed Menus

Below are some examples of drop-down menus that fall short somewhere with styling and usability.

Navigant Consulting
This menu is poorly styled and dysfunctional.

Navigant in Designing Drop-Down Menus: Examples and Best Practices

Panasonic
Although this menu is well-styled, it is difficult to use because of a bad hover effect.

Panasonic in Designing Drop-Down Menus: Examples and Best Practices

Toshiba
The Toshiba menu is too small and does not follow good styling practices.

Toshiba in Designing Drop-Down Menus: Examples and Best Practices

LG
Like the Microsoft menu above, this one has a slight lag, which makes it hard to use.

Lg in Designing Drop-Down Menus: Examples and Best Practices

Chrysler
The Chrysler page uses a drop-down menu with very small text, which makes it difficult to read.

Chrysler in Designing Drop-Down Menus: Examples and Best Practices

Sun
These drop-down menus are rather fidgety and hard to use. The tooltip gets in the way, too, and directly above the main navigation is another drop-down menu. All of this makes it very difficult to navigate.

Sun in Designing Drop-Down Menus: Examples and Best Practices

Creative Labs
The menu below is cluttered and does not have a delayed hiding or similar technique, so it is not very usable.

Creative in Designing Drop-Down Menus: Examples and Best Practices

HP
Another hover menu that lacks usable features.

Hp in Designing Drop-Down Menus: Examples and Best Practices

Alienware
The black menu on the black design makes this drop-down difficult to use.

Alienware in Designing Drop-Down Menus: Examples and Best Practices

Good Drop-Down Menus

Here are many drop-down menus that have good usability and styling features.

Sony
A well-constructed hover menu with a good list.

Sony in Designing Drop-Down Menus: Examples and Best Practices

ActionEnvelope
A clean vertical drop-down panel with a lot of padding; notice, how the panel appear to be above other design elements. Simple and beautiful solution.

Action in Designing Drop-Down Menus: Examples and Best Practices.

Helmy Bern
A beautifully styled menu, with a fade transition.

Bern in Designing Drop-Down Menus: Examples and Best Practices

RedBrick
This menu is cleanly styled and very readable.

Redbrick in Designing Drop-Down Menus: Examples and Best Practices

REI
This drop-down is very wide, so it is easy to keep the mouse in focus.

Rei in Designing Drop-Down Menus: Examples and Best Practices

Philips
Philips has a large and usable drop-down module.

Philips in Designing Drop-Down Menus: Examples and Best Practices

Walmart
On the Walmart site, the user clicks on the area outside the menu to close it.

Walmart in Designing Drop-Down Menus: Examples and Best Practices

Samsung
The Samsung menu is usable because of its large size and styling.

Samsung in Designing Drop-Down Menus: Examples and Best Practices

Epson
Epson shows another usable drop-down menu.

Epson in Designing Drop-Down Menus: Examples and Best Practices

Mini Cooper
This website uses a drop-down menu with delayed closing.

Mini in Designing Drop-Down Menus: Examples and Best Practices

Gateway
Here is another usable drop-down element.

Gateway in Designing Drop-Down Menus: Examples and Best Practices

Asus Global
A well-styled menu that has delayed hiding.

Asus in Designing Drop-Down Menus: Examples and Best Practices

Intel
A very clean drop-down menu.

Intel in Designing Drop-Down Menus: Examples and Best Practices

Target
A well-organized menu that has delayed closing.

Target in Designing Drop-Down Menus: Examples and Best Practices

Garmin
This drop-down menu is simple yet functional.

Garmin in Designing Drop-Down Menus: Examples and Best Practices

Logitech
A drop-down with very nice styling that matches the menu.

Logitech in Designing Drop-Down Menus: Examples and Best Practices

Incase
This menu is very basic but serves its purpose.

Incase in Designing Drop-Down Menus: Examples and Best Practices

evelMerch
A small yet functional drop-down, with a graphic to show users that the button opens a menu.

Evel in Designing Drop-Down Menus: Examples and Best Practices

IBM
A multi-level drop-down is used here, but a slight delay makes this one easier to use.

Ibm in Designing Drop-Down Menus: Examples and Best Practices

EA
A very clean and well-organized drop-down element.

Ea in Designing Drop-Down Menus: Examples and Best Practices

ACTIVISION
This menu is clean and has delayed hiding to improve usability and functionality.

Activision in Designing Drop-Down Menus: Examples and Best Practices

Yahoo! Finance
The menu on Yahoo! Finance has large buttons and icons to show where menus can be opened.

Yahoofinance in Designing Drop-Down Menus: Examples and Best Practices
Posted by at No comments:
Labels:

38 jQuery And CSS Drop Down Multi Level Menu Solutions

Hello again, it’s time for comprehensive programming article. Here you’ll find 38 mainly jquery and CSS based drop-down or just multi level menu tutorials with down loadable files and explanations as well. My favorite here is the first pick – Outside the box with very unique navigation menu. It’s always good to have such reference articles in your bookmarks and when you have to create some really big website with a lot of content and menu sections – just return here. Shorten your developing process with already premade menus, which can be easily modified with little touch of CSS.

1. “Outside the Box” Navigation with jQuery

This tutorial will cover a few ways to do just that with OS X style docks and stacks navigation.

outside-box-drop-down-multi-level-menu-navigation

Preview Demo

2. Sexy Drop Down Menu w/ jQuery & CSS

In this tutorial you will learn how to create a sexy drop down menu that can also degrade gracefully.

sexy-jquery-drop-down-multi-level-menu-navigation

Preview Demo

3. Designing the Digg Header: How To & Download

Navigation is compacted with the use of simple drop-down menus.

digg-header-drop-down-multi-level-menu-navigation

Preview Demo

4. Create The Fanciest Dropdown Menu You Ever Saw

fanciest-drop-down-multi-level-menu-navigation

Preview Demo

5. A circular menu with sub menus

A follow on from the simple single level circular menu, this one adds a sub menu level of smaller icons in a circular pattern within the top level circle. There is also the facility to add a simple description of each icon.

circular-drop-down-multi-level-menu-navigation

Preview Demo

6. A Different Top Navigation

In this tutorial you will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.

different-jquery-drop-down-multi-level-menu-navigation

Preview Demo

7. Perfect signin dropdown box likes Twitter with jQuery

Nice tutorial showing you how to create a login drop down with Twitter style using jQuery.

twitter-drop-down-multi-level-menu-navigation

Preview Demo

8. Sliding Jquery Menu Tutorial

This tutorial will show you how to create a sliding menu button using jquery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner.

sliding-jquery-drop-down-multi-level-menu-navigation

Preview Demo

9.Fancy Sliding Menu for Mootools

fancy-sliding-drop-down-multi-level-menu-navigation

Preview Demo

10. Create Vimeo-like top navigation

I’ve featured this Janko’s tutorial some time ago, but sometimes I will repeat myself, since this article is completely dedicated to showcase advanced drop down menus. Very detailed and well written tutorial, with drop-down search options narrowing and targeting search by checking options. Menu is done completely using just CSS, structure is visually describet in the image below:

vimeo-drop-down-multi-level-menu-navigation

Preview Demo

11. Dynamic PHP/CSS menu

php-css-drop-down-multi-level-menu-navigation

Preview Demo

12. Creating an Outlook Navigation Bar using the ListView and Accordion Controls

outlook-drop-down-multi-level-menu-navigation

Preview Demo

13. Animated Drop Down Menu with jQuery

animated-drop-down-multi-level-menu-navigation

Preview Demo

14. jQuery UI Potato Menu

potato-ui-drop-down-multi-level-menu-navigation

Preview Demo

15. Make a Mega Drop-Down Menu with jQuery

mega-drop-down-multi-level-menu-navigation

Preview Demo

16. A cross-browser drop-down cascading validating menu

Just simple CSS menu.

cross-browser-drop-down-multi-level-menu-navigation

Preview Demo

17. Drop-Down Menus, Horizontal Style

Very old drop-down tutorial from year 2004, but if you are starting out – very useful tutorial and example.

horizontal-style-drop-down-multi-level-menu-navigation

Preview Demo

18. Superfish v1.4.8 – jQuery menu plugin by Joel Birch

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and more features.

superfish-jquery-drop-down-multi-level-menu-navigation

Preview Demo

19. JavaScript Dropdown Menu with Multi Levels

This multi-level drop down menu script weighs in at only 1.2 KB. It features animation, active header persistence, easy implementation and multiple instance support.

javascript-drop-down-multi-level-menu-navigation-1

Preview Demo

20. jQuery (mb)Menu 2.7

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way!

jquery-drop-down-multi-level-menu-navigation

Preview Demo

21. Menumatic

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu

menumatic-drop-down-multi-level-menu-navigation

Preview Demo

22. Smooth Navigational Menu (v1.31)

Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair.

smooth-drop-down-multi-level-menu-navigation

Preview Demo

23. jQuery File Tree

jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.

jquery-tree-drop-down-multi-level-menu-navigation

Preview Demo

24. Longed-For Multi-Level Drop-Down Menu Script

longed-jquery-drop-down-multi-level-menu-navigation

Preview Demo

25. jQuery & CSS Example – Dropdown Menu

This article is intended to describe an extremely basic, yet extremely powerful, technique for adding dropdown menus in your application user interface or website design.

designreviver-jquery-drop-down-multi-level-menu-navigation

Preview Demo

26. Reinventing a Drop Down with CSS and jQuery

reinventing-drop-down-multi-level-menu-navigation

Preview Demo

27. Simple jQuery Dropdowns

Very stripped down code and minimal styling, yet still dropdown menu has all the functionality typically needed.

simple-jquery-drop-down-multi-level-menu-navigation

Preview Demo

28. Styling Drop Down Boxes with jQuery

One problem with HTML forms is it is hard to style the elements to fit into your design. The tutorial will show you how to style the hardest of them all, the select box.

styling-jquery-drop-down-multi-level-menu-navigation

Preview Demo

29. jQuery iPod-style Drilldown Menu

ipod-drop-down-multi-level-menu-navigation

Preview Demo

30. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready

Newer version of previous iPod style menu.

recreated-drop-down-multi-level-menu-navigation

Preview Demo

31. mcDropdown jQuery Plug-in v1.2.07

mc-plugin-drop-down-multi-level-menu-navigation

Preview Demo

32. jQuery Drop Line Tabs

This menu turns a nested UL list into a horizontal drop line tabs menu. The top level tabs are rounded on each side thanks to the use of two transparent background images, while the sub ULs each appear as a single row of links that drop down when the mouse rolls over its parent LI.

jquery-tabs-drop-down-multi-level-menu-navigation

Preview Demo

33. Cut & Paste jQuery Mega Menu

Mega Menus refer to drop down menus that contain multiple columns of links. This jQuery script lets you add a mega menu to any anchor link on your page, with each menu revealed using a sleek expanding animation. Customize the animation duration plus delay before menu disappears when the mouse rolls out of the anchor. Mega cool!

cut-paste-drop-down-multi-level-menu-navigation-1

Preview Demo

34. Professional dropdown #2

professional-drop-down-multi-level-menu-navigation

Preview Demo

35. Drop down menu with nested submenus

Create your own drop down menu with nested submenus using CSS and a little JavaScript.

nested-drop-down-multi-level-menu-navigation-1

Preview Demo

36. jdMenu Hierarchical Menu Plugin

The jdMenu plugin for jQuery provides a clean, simple and elegant solution for creating hierarchical drop down menus for websites to web applications.

jdmenu-drop-down-multi-level-menu-navigation

Preview Demo

37. Dynamic Drive – Multiple Level Menus

A lot of free advanced CSS and Javascript drop down menus are available here. There are also instructions and advices how do use and modify them.

dynamic-drive-drop-down-multi-level-menu-navigation-1

38. IzzyMenu – Menu Builder – Build your pro CSS/DHTML Menu

Choose from dozens ready styles or create your own menu style. They are low in file size, so won’t consume a lot of bandwidth from your hosting. IzzyMenu, online menu generator is the best solution for amateurs and professionals!

izzymenu-drop-down-multi-level-menu-navigation-1
Posted by at No comments:
Labels: ,
Subscribe to: Posts (Atom)