Artatm » Javascript

Collection of mega drop down and multi level menus

Jitu — Sat, 09 Jan 2010 11:12:30 +0000

Drop down menus have always been a hollah!!! for the designers especially for the beginners. Today in this post we will be providing you some very different style of Menus. You can have look at some old Amazing CSS Menus, creating accordion, dropdown and sliding Mootols Menus and jSlickMenu

Mega Drop Down Menus

Mega drop down menus have many a times proven to be a havoc for designers.

While designing some myself I came across some characteristics that a mega drop down menu should have

1. Two Dimensional Panel
2. Division of various categories in a single panel
3. No scrolling at all!!!!!!
4. Use of Icons could make it look fantabulous

1. Mega Drop Down Menus w/ CSS & jQuery

Today a new trend has now began in case of E-Commerce websites where to show a lot of inventory a mega dropdown menu is being used. According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites. These kind of drop down menus should have a subtle time delay when hovering in and out of them. These mega dropdown menus cater to a lot of industries and designers.

Demo

Overview

2. Pure CSS Mega Drop Down Menu

All Mega dropdown menus rely on JS to function – but, the “best setup” would be, a Pure CSS Mega Dropdown menu, and, with a Javascript hover delay function built in to it. It “can” be done, by incorperating jquery and either of these two plugins – hoverIntent, or Superfish

Demo

Overview

3. 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!

Demo and Overview

4. Make a Mega Drop-Down Menu with jQuery

SitePoint Points out how to make a simple Mega DropDown Menu

Demo

Overview

Making easy dropdown menus and also nested level menus

1. Chrome CSS Drop Down Menu

Chrome Menu is a CSS and JavaScript hybrid drop down menu. It’s easy to configure and search engine friendly. The main menu bar consist of a CSS list, while the drop down menus are simply regular DIV tags on page. Thanks to JavaScript, the menu supports subtle but important effects such as delay before menu disappearance, and repositioning of the menu if too close to any one of the four corners of the window. The entire menu, including images and external files, is extremely compact. Thanks to CSS, the menu can be styled with a different “theme” easily, just by modifying a few CSS attributes and changing a couple of images’ colors

Demo and Overview

2. CSS Express Drop-Down Menus

CSS Express Menus are a PVII solution that will help you produce a quick (express) CSS drop-down menu without some of the limitations found in some other “pure” CSS menus. What the heck is a pure CSS menu? Pure CSS menus use the hover pseudoclass, on the LI tag, to hide and show drop-down menus without JavaScript. Sounds great in theory, but in practice it’s not so pure. Browsers used by the vast majority of humans do not support this technique and must be served a small script to simulate li:hover

Demo

Overview

3. Sexy Drop Down Menu w/ jQuery & CSS

Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.

Demo

Overview

4. 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.

To initialize a drop down menu use the following code:

var menu=new menu.dd(‘menu’);
menu.init(‘menu’,'menuhover’);

You must create a new menu object before initialization. The parameter taken by menu.dd is the variable name used for the object. The object.init function takes 2 parameters: the id of the menu unordered list and the id of the initially sorted column (optional). If you want to exclude a column from sorting then add class=”nosort” to the appropriate table header. The styling of the table is totally customizable via CSS.

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Demo

Download

5. jQuery & CSS Example – Dropdown Menu

Dropdown menus and menu bars have been heavily used since the early days of graphical user interfaces. Their use has become ubiquitous, and even expected, in desktop applications, and the web has quickly followed suit. 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.

Demo and Overview

6. Fancy Sliding Tab Menu

This menu is of somewhat different style with the menu on the bottom of the page

Demo

Overview

jQuery Dropdown Menus

Features

* Full cross-browser compatibility
* Fully accessible even when javascript is turned off, as a pure css menu
* Search engines optimized
* Clear unordered list (LI and UL HTML tags) structure of jQuery dropdown menu
* Easy to setup and update
* Fantastic animation and transition effects
* Multiple pre-desinded color schemes
* Completely customizable styling with CSS
* Powered by jQuery
* Extremely small – 3kb uncompressed

1. Olive Drab

Demo and Overview

Black

Demo and Overview

2. nmcDropDown: A Drop-Down Menu Plugin for jQuery

Example

Overview

3. jQuery plugin: Accordion

This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs. Options are available to specify the structure, if necessary, the active element (to display at first) and to customize animations. The navigation-option automatically activates a part of the accordion based on the current location (URL) of the page.

Demo

Download

4. jQuery Rounded Menu

This jQuery based plain css drop down menu is very simple illustration that you don’t need any dramatic coding to achieve simple 2 level menu.

Demo

Overview

Nice jQuery Effects and Plugins for Gallery

Jitu — Mon, 04 Jan 2010 08:58:07 +0000

Sliding Boxes and Captions with jQuery

All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through. From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect.

Overview

Demo

Download

jQuery image slide on hover effect

This is a simple technique to animate an image when hovering using jQuery’s animate() effect. We will use this effect to manipulate our CSS, creating a seamless transition between two areas of an image. Have a look at the demo below for a better understanding.

Overview

Demo

Longer Captions for jQuery’s FancyBox Plugin

jQuery’s FancyBox Plugin has been a huge hit and is now being used in a lots of websites. But still there is something that is missing in it. That something is the “Longer Captions”. FancyBox allows only short captions, in short it could turn out to be a bad option for the ones who need to provide longer and bigger captions.

Over here you will get an improvised version of the jQuery’s FancyBox

This version of FancyBox has been modified to handle captions in a more interactive way. It also doesn’t break on excessively large captions. This example is based on FancyBox 1.2.1.

View Demo

Download

jQuery’s Star Rating Widget

What is this?

The Star Rating widget is a plugin for the jQuery javascript library that creates a non-obstrusive star rating control based on a set of radio input boxes or select options.
What it does?

* It turns a collection of radio boxes / select options into a neat star-rating control.
* It creates the interface based on standard form elements, which means the basic functionality will still be available even if Javascript is disabled.
* It gives you the full access to each instance of “stars” created on the page, with an easy to use syntax provided by the jQuery UI core library.

Overview

View Demo

Download

LavaLamp for jQuery Users

As User Interface developers, we know that one of the first widgets our visitors use is a “Menu”. Capturing their attention right there is something that we always strive for, and I guess LavaLamp is a step in that direction.

Overview

Download

Hover zoom Effect with jQuery and CSS

The hover zoom effect basically reverse zooms an image while fading in a label on top of it when the mouse hovers over it. It makes for a pretty slick effect which could be used on thumbnails. You can check out a demo or grab the source right here if you don’t want to read the entire tutorial.

Demo

Download

Greyscale Hover Effect with CSS & jQuery

This effects would help you in making your portfolio or making portfolio websites. In this effect, with the help of CSS and jQuery, a greyscale effect comes into being on Hover

Overview

Demo

jQuery Image Zoom Plugin

The imageZoom jQuery plug-in makes it easy to show off your images in an easy and attractive manner for portfolios.

Overview

Demo

Download

40 Free Javascript Image Gallery & Flash Photo Gallery Hand-Picked

Rocky — Sat, 05 Dec 2009 12:24:17 +0000

There are 40 scripts of slideshows, lightboxes and galleries you can use for effective presentations to display your images on a website, they all are built with different javascript frameworks such as MooTool, Prototype and jQuery and flash, I think here You’ll find gallery for every needs, should be enough to choose from!

View Source Article

20+ Easy to Use jQuery Text Effects and Animations

Rocky — Thu, 03 Dec 2009 06:54:46 +0000

You don’t need to be a hardcore coder or developer to use jQuery, it is an easy and useful JavaScript library and with basic knowledge you can easily insert jQuery plugins and spruce up your next web project.
Font Embedding Services are all the rage at the moment, and for some, maybe a little bit overblown. What if you wanted something simpler, a little drop-shadow here, a simple text animation or even dynamically resize text. In this post we have collected 20+ simple and easy to use jQuery text effects and animations.

View Source Article

jSlickmenu: A jQuery plugin for slick CSS3 menus

Rocky — Thu, 03 Dec 2009 06:26:12 +0000

The plugin called jSlickmenu, creates, well, slick menus with jQuery. Combined with some great CSS3 features likes rotation and shadows, this plugin can really lift up your design. It’s fairly easy to use, highly customizable and pretty cool (and fun!) to see.

Demo
Download
How to Use

Photo gallery Using CSS3 and JQuery

Rocky — Sun, 29 Nov 2009 09:43:11 +0000

An Awesome CSS3 Lightbox Gallery With jQuery

It will be search-engine friendly and even be compatible with browsers which date back as far as IE6 (although some of the awesomeness is lost).

We are using jQuery, jQuery UI (for the drag and drop) and the fancybox jQuery plugin for the lightbox display in addition to PHP and CSS for interactivity and styling.

Demo
Download
View Tutorial

Editable CSS3 Photo Gallery

Photo gallery with click-to-enlarge photos, fancy CSS3 rollover effects, and marked up with HTML5.

Demo
Download

CSS3 Gallery without using JQuery

CSS3 Photo gallery effect without using any JavaScript or PHP. From Ajaxian.com

Demo
Get CSS File

Amazing Mootools Plugins to enhance your website

Jitu — Thu, 26 Nov 2009 07:27:06 +0000

For vastly improving the User Interface of your website you just need to use a snippet of code and there is none better than MooTools javascript framework. Have a look into the following plugins and you may like it.

FancyForm

FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s accessible, easy to use and degrades gracefully on all older, non-supporting browsers.

Demo And Download

Milkbox

Milkbox is an amazing lightbox script which is easy to implement and can be used for photo galleries, videos, etc…

Demo And Download

Quickboxes

Quickboxes allows you to check multiple checkboxes in one mouse click and drag

Demo And Download

SmoothScroll

SmoothScroll allows the page to animate down to an anchor within the page instead of the ugly jump that occurs by default.

Demo
Documentation
Download

Tips

This allows you to control how tooltips display so make them creative.

Demo
Documentation
Download

ZebraTables

ZebraTables is an easy to implement MooTools class that provides alternate-row-coloring support, hover highlighting, and click coloring.

Demo And Download

35 useful fresh jQuery plugins

Rocky — Mon, 26 Oct 2009 08:36:29 +0000

Quick and powerful, jQuery can help designers and developers create awesome interactive websites that are appealing and accessible to the widest range of browsers.

View