Artatm » CSS

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

CSS3 compatibility and support for Browser

Rocky — Tue, 29 Dec 2009 11:42:28 +0000

CSS compatibility and support for Browser.

If you are working as a Web Developer you must know about browsers. If you love to work with your favorite browser and you focus only a single browser for work then it can create hell lot of trouble. If you love to work on firefox but your client uses IE then what???
You would create a bad impression and not only that again your project goes for corrections.

Same way if you are thinking to shift to css3 first take a look at the browser support then you can have a go. I found that my 40% clients are still using IE6(no idea why??) so it will take a long time for me to start working on css3.

Lots of properties are still not supported by IE.
10 Useful CSS Properties Not Supported By Internet Explorer

From w3schools.com

According to statistic still more then 10% of people uses IE6 and latest browsers are not properly ready for css3, So before starting CSS3 take a look on browser support for css3.
CSS 3 selectors Specifications Chart from quirksmode.org

3 Ways to Add Depth to Any Website with CSS

Jitu — Mon, 14 Dec 2009 08:32:16 +0000

Three tips to refine your website by adding depth with just a bit of CSS. The advantage to these effects is two fold: you get some sweet looking elements on your site and because the overhead in adding them is so low, it’s nothing but awesome for you. Enjoy! View Source Article Related posts:10 short ‘n’ sweet tips on how to design for web Amazing Mootools Plugins to enhance your website Basic Trends to follow When Building a Sports website Related posts:

Easily Turn Your Images Into Polaroids with CSS3

Rocky — Fri, 11 Dec 2009 10:13:21 +0000

Through a combination of browser-specific CSS (2 and 3) integration and some basic styling, we’ve turned regular old images into cool looking polaroid style images—with no additional markup to show the text.

View Demo
View Source Article

70 Must-Have CSS3 and HTML5 Tutorials and Resources

Rocky — Fri, 11 Dec 2009 09:28:54 +0000

CSS3 and HTML 5 are capable of revolutionizing the way we design websites. Both include so many new features and functions that it can be hard to wrap your head around them at times. The inclusion of native support for things like rounded corners and multi-column layouts are just the tip of the ice berg.

Below are seventy resources, tutorials, and articles to get you started with CSS3 and HTML 5. Many of the techniques discussed are already supported to some extent in some some modern web browsers (Safari and Firefox have the most extensive support), so you can get started right away.

View Source Article

Best of CSS Design 2009

Rocky — Thu, 10 Dec 2009 13:07:09 +0000

This year I’ve selected another 50 nicely designed web sites. Among the list, I notice a lot of them are minimalistic design with beautiful serif fonts. The grungy and sketchy styles are still strong. However, the large background is no longer as hot as in 2008, instead, texturized background is popular in 2009.

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

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