Posts

jQuery Tabbed Navigation Area

Update: the site is no longer offer this tutorial and source files. I suggest you to try related free resources links below the article.

jQuery Tabbed Navigation Area – Tutorial on how to easily create a tabbed navigation system that works across all the main browsers using CSS and jQuery.

Uvumi MooTools Plugins – Dropdown Menu, Dock Menu, Image Gallery and more

UvumiTools 6 free MooTools plugins.

MooTools Dock Menu

The UvumiTools DockMenu reproduces Mac OS dock, you can build this menu with a simple <ul> element, where each <li> represents a menu item. The whole thing is degradable, built from standard HTML, and is cross-browser compatible.

MooTools dock menu plugin

Dropdown Menu

A very simple multi-level menu built from an HTML unorderd list, a simple and lightweight menu that can be easily updated by simply editing a <ul> HTML element. It’s Cross-Browser compatible and cutomizable with CSS.

MooTools drop down menu

Gallery Plugin

Display fancy photo galleries on your web site without requiring you to be a master programmer. All you need to do is include a couple JavaScript and CSS files.

First, the thumbnails are loaded. Users can click a thumbnail and watch the gallery transform into a slideshow, which is then navigated by clicking the left column or by scrolling with the mouse wheel.

MooTools image gallery plugin

3 more from UvumiTools: UvumiTools Image Crop, Textarea Plugin and Scrollbar Plugin.

Simple Animated Menu for Mootools

A simple Animated Menu for Mootools – you won’t even have to muck about in javascript. Simply define:

  • a container for the background image
  • the nav elements
  • the ‘current’ nav element ID
  • the animation’s horizontal track (the y coordinate of the background-image)
  • the left offset of the image in relation to the nav element

Code has been tested in FF 3.0, FF 2.0, IE 7, IE 6 (minus image transparency), Safari for Windows and Opera 9.5.

Kwicks for jQuery Menu

Kwicks for jQuery is a plugin that simulates attractive Mootools effect. Example page

Kwicks Options:

  • maxWidth: Required: The width (in pixels) of a fully expanded kwick element.
  • duration: Defaults to 200: The number of milliseconds required for each animation to complete.
  • easing: A custom easing function for the animation (requires easing plugin).
  • spacing: Defaults to 0 – The width (in pixels) separating each kwick element.

kwicks.jpg

CSS Menu Generator – Create CSS Menus in 3 easy steps

CSS Menu Maker – create custom, cross browser compatible website menus. Menu generator makes it easy to create custom CSS menus without having to know HTML and CSS in 3 easy steps.

  • Step 1: Choose a menu to either customize or download the source code.
  • Step 2: Customize the headings, links, and color of your CSS menu.
  • Step 3: Download the HTML, CSS, and images

css_menu_maker.jpg