Posts

Animated JavaScript Dropdown Menu – TinyDropdown2

TinyDropdown2 – standalone, multi-level and animated JavaScript drop down menu script at only 1.7kb (0.75kb gzipped).

TinyDropdown2 dropdown menu script offers improved stability, speed, and features like animation toggles, a speed toggle, a rollout timeout, and improved style handling.

The script is very lightweight, running very fast and smoothly. Styling is completely flexible through the CSS, you can even make this a vertical menu with a few tweaks.

View DEMO

Animated JavaScript dropdown menu script

TinyDropdown2 script is tested in IE7+, FF, Chrome, Opera, and Safari and is available free of charge for both personal or commercial projects.

Free CSS3 Menu Maker

CSS3 Menu – Windows and MAC application for creating beautiful and Free CSS3 Menus and drop down navigations with CSS only, no JavaScript or images.

The menus are based on ul/li structure and CSS, can be vertical and horizontal, and works in all modern browsers.

The dropdown navigation also works on non-CSS3 compatible browsers but the rounded corners and shadow will not be rendered.

Free CSS3 menu maker

Multi-Column Dropdown Menu – SooperFish jQuery Plugin

SooperFish is a lightweight (2.01kb minified) & highly configurable jQuery plugin for animated dropdown menus with a ton of features and configurable show and hide custom easing animation.

View DEMO

Multi column drop down menu jQuery plugin

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 fine with Javascript disabled
  • 2.01kb minified
  • and more

jQuery MegaMenu Plugin ver.2

jQuery MegaMenu 2 of the popular jQuery MegaMenu Plugin, with quiet a lot of changes in the code base and usability, with a completely revamped JS and CSS code-base.

View DEMO

Customizable jquery menu plugin

Features:

  • Customizable menu show and hide effects, with three available options of slideDown/slideUp, fadeIn/fadeOut and simple.
  • You can choose to activate the menu by click or by mouseover.
  • HoverIntent like feature embedded into the code-base so that we have smooth navigation by default without any external libraries.
  • Automatic alignment of the menu content according to the width of the parent menu container.
  • Variable width of the menu contents.
  • Non obtrusive and easier to understand CSS.

Sliding Checkbox Actions Menu with jQuery

Sliding Checkbox Actions Menu – great tutorial on how to create sliding and draggable actions menu with jQuery, that appears when checkboxes are selected.

A very helpful UI property, especially when creating user interfaces with a long lists of check boxes, since you don’t force the user to scroll up or down to the place where the actions are – they just appear whenever the user needs them.

View DEMO

Sliding action menu with jQuery

Additionally, the user can drag the actions box to the place that is more practical for him, and the box will always follow when the user scrolls the page. It will also show a count of how many check boxes were selected.

This tutorial got inspired by a similar feature in the mobile version of Gmail.

CSS Sprite Navigation Generator: Nav-o-Matic Free Online Tool

Nav-o-Matic is a free online tool for creating navigation sprites in a few simple clicks.

You will need an image with 2 rows (no vertical navigation yet) like this one, then lay down some guides like in Photoshop, define the CSS options and Nav-o-Matic will generate all the code you’ll need to get your navigation working.

Nav-o-Matic sprite generator

There is a lot more functionality planned, but for now, Nav-o-Matic only support for 2 states: Normal and hover, hover also acts as the active/on state.

Cross-Browser Javascript/CSS Buttons – Simply-Buttons v2

Simply-Buttons v2 – learn how to create really nice cross-browser buttons for your sites. You can also download the source CSS and Javascript files with a few button samples.

The buttons:

  • look and behave the same way in every browser and operating system.
  • fit to any text size.
  • come with 3 states: inactive, active and hover.
  • do not need the javascript to work, they work with just the CSS.

The buttons are created with pure CSS and will work with just CSS. However they look a little better with some Javascript enhancements.

Tested in IE6, IE7, Firefox(PC/MAC), Safari, SafariMobile and Opera(PC/MAC).

Multilevel Dropdown Menu | Navigation script – ProtoFish

ProtoFish – is an advanced Multilevel Dropdown Menu / Navigation script based on Prototype. You can easily add a delay to your menu (on mouseout) and choose your own hover class.

View ProtoFish Demo

multilevel dropdown navigation

ProtoFish is:

  • lightweight script – only 5.2kB.
  • unobtrusive – fallback to a standard CSS hover menu.
  • cross-browser – IE6+, Safari 3+, Opera 9+, Chrome, Firefox 2+.
  • fully customizable.
  • accessible for keyboard navigating users (ARIA support can be turned on).
  • Supprot multiple instances per page with unlimited sublevels.
  • and is free (MIT License).