Artatm » menu

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

14 Easy to Implement Drop Down Menu Solutions

Rocky — Tue, 15 Dec 2009 13:48:46 +0000

A good and well executed drop down menu can make navigating a large site easy for the user. While drop downs make site navigation easy, sometimes they can seem difficult to implement, but the solutions listed below are all a breeze to set up, especially since most of them are built on jQuery or MooTools.

View Source Article

Creating Accordion, Dropdown and Sliding Menus in Mootools

Jitu — Mon, 07 Dec 2009 14:05:26 +0000

MenuMatic, Creating Horizontal and Vertical Menus in Mootools

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.

Horizontal Sample

Vertical Sample

View Source Article

Show-Hide login panel in you wordpress theme using Mootools

Add a show/hide login panel to your Wordpress theme using Mootools.

View Source Article

Creating Accordion type, Animated menu in Mootools

This tutorial illustrates how to implement a nice accordion (animated) menu using Mootools and some lines of CSS and HTML code ready to reuse in your project.

View Sample

View Source Article

Creating a Sliding Menu Using the MooTools Framework

The tutorial here will show you how to create a sliding menu using the MooTools framework, you are required to have basic knowledge of HTML, you don’t need to know JavaScript to follow this tutorial, but JavaScript will help you understand what the code actually does.

View Sample

View Source Article

Mootools Show and Hide effect Menu

This is the basic example with a simple show/hide effect which you can implement just with some lines of JavaScript code.

View Sample

View Source Article

Creating Drop-Down Navigation with Movable Type

The goal of this tutorial is to demonstrate how to add category driven drop-down menus to your web site.

View Source Article

Sliding top panel Menu using mootools

This tutorial explains how to realize a simple sliding top panel (top/down) Menu using mootools, some line of css code and JavaScript.

View Source Article

JavaScript drop down menu using Mootools 1.2

A very easy, unobtrusive way to create a drop down menu

View Sample

View Source Article

BySlideMenu – Nice and powerful accordion menu

What is BySlideMenu?
BySlideMenu is a plugin for Mootools which allow you to easily create a beautiful accordion menu (sliding menu) on any element you want (ul/li, div, p …) using images and/or text.

Features

Works horizontally or vertically.
Automatic size – The container width/height can be adjusted automatically.
Menu is expandable by mouseover or by click, as you want.
Menu can be pinned or not, by mouseover or click, you choose.
A default index can be defined.
Can be used with any elements (ul/li, div, p…)
Overflow support.

View Soure Article

Flash Without Flash: Elegant Menu Fly-out

It’s a more elegant solution than regular fly-outs, but unfortunately, it’s done in Flash. Here is my version in JavaScript built with Mootools. Follow along as I describe the HTML, CSS, and JavaScript.
View Example
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

10 Online free CSS Menu Genrator

Rocky — Tue, 01 Dec 2009 11:26:13 +0000

1. IzzyMenu

Create professional looking CSS menus for your Website as easy as never before! Build your cool menu online, without writing a single line of code!

What is IzzyMenu - it’s easy to use, Online Menu Builder, which allows you to build your CSS & DHTML menu in minutes. Choose from dozens ready styles or create your own menu style. IzzyMenu, online menu generator is the best solution for amateurs and professionals!
View

2. Pure CSS Menu

Simple and easy Online menu creator. very easy to understand and nice interface. they also provide some ready menu template, you have to just edit text and link.
View

3. CSS menu maker

CSS menu maker provide custom CSS menus without having to know all the complicated HTML and CSS. If you are a more experienced web developer they provide the sources code for all CSS menus so that you can download, tweak, and integrate as much as you want.
View

4. My CSS Menu

My CSS Menu provides the average webmaster with tools to create custom, cross browser compatible css menu. Our menu generator makes it easy to create web navigation: Horizontal, Vertical, Drop-down menu without having to know all the complicated HTML and CSS. If you are a more experienced web developer we provide the sources code for all our CSS menus so that you can download, tweak, and integrate as much as you want. Feel free to use our css menu generator an unlimited amount of times.

Just choose template horizontal, vertical and then click customize to start. Click demo to preview.
View

5. CSS Menu Builder

CSS Menu Builder contains 300+ horizontal menus, 700+ vertical menus combinations and breadcrumb menus that consist of more than 200+ combinations, in total the site offers more than 1000 menu combinations not including the endless color combinations.
View

6. Dynamic Drive’s new CSS library

Dynamic Drive’s new CSS library! Here you’ll find original, practical CSS codes and examples such as CSS menus to give your site a visual boast.
View

7. CSS Portal

CSS Portal Contains 31 Designs to create a professional menu look.
View

8. Sitemap Menu Generator

Freely use this great dropdown Sitemap Map Menu to generator a dropdown menu for your site.
Follow the instructions and press generate to get the code.
View

9. Webmaster Tools – CSS Navigation Menu Generator

This utility will help you create an attractive CSS Navigation Menu without writing a single line of CSS.
View

10. Tab Generator

Do you need fast and cool tabs? thwn enjoy using tabs generator!
Tweak size, colors, corners and more, generate your design, then download and use in your css style sheet!
View

Amazing css menu Collections

Rocky — Mon, 23 Nov 2009 07:14:10 +0000

1. Free CSS Drop-Down Menu Framework

Modular, with themes. Not only HTML is separated from CSS, but even CSS definitions are categorized into structural and thematic types. Thus creating a new css drop-down menu means creating only a new theme since structure is permanent. What is more, creating a new theme is easy with available templates and takes 10-15 mins.
Cross browser. Configurations available for Windows Internet Explorer 5 or later, Mozilla Firefox 1.5 or later, Opera 7 or later, Apple Safari 2 or later, Google Chrome 1, etc.
JavaScript only for IE. Minimal JavaScript code only for IE 6 or earlier. Can be used with popular JavaScript libraries Jquery or Scriptaculous. Everything else is pure CSS.
Continuous development. The project is constantly revised and improved.

You can find some amazing Drop down menus that are free to download under GNU license.

2. Accordion Menu script

Creating an Accordion Menu is trivial using Accordion Content script. It basically just comes down to styling your headers and expanding content to conform to that desired menu look.

Glossy Accordion Menu

Bullet List Accordion Menu

Urban Gray Accordion Menu

Apple style Accordion Menu

3. Drill Down Menu

This script turns an ordinary UL list into a drill down style menu, adding a new dimension to the conventional drop down menu. The top level UL dictates the height of the menu, with the sub levels tucked away until navigated to. You can customize which level should be shown by default, whether to remember the last shown level when the page reloads, plus the speed of the “drilling” animation. And to ensure the user doesn’t get lost with all this drilling, the script can optionally display “breadcrumb” links that reflect the current level the user is at.

4. Smooth Navigational Menu

Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that’s a good thing given the important role of this element in any site. The menu’s contents can either be from direct markup on the page, or an external file and fetched via Ajax instead. And thanks to jQuery, a configurable, sleek “slide plus fade in” transition is applied during the unveiling of the sub menus. The menu supports both the horizontal and vertical (sidebar) orientation.

5. Image Menu

horizontal menu, reveals more of the image as you rollover it. It uses mootools.

6. CSS Horizontal Drop-Down Menu

Is a there way to create a css horizontal drop-down menu in css that will work on most browsers. Well… technically, the short answer is “No” if you are using just css, because IE is problematic in the way it handles css. uses .htc file to support IE.

jQuery Multi Level CSS Menu

This is a multi-level horizontal CSS menu created using a regular nested HTML list, then turned into a fully functional drop down menu using CSS and a touch of jQuery. The sub menus slide in and out into view, which also automatically reposition themselves horizontally if too close to the window’s right edge.