55+ HTML5 CSS3 jQuery Menu Tutorials

Now Reading
55+ HTML5 CSS3 jQuery Menu Tutorials

CSS-menu-rebound

 

HTML5 CSS3 jQuery Navigation Menus comes either copy and paste the code into your own design or modify the menu to suit your needs.

Navigation is such an important part of your website. It’s how your visitors navigate to the main areas of your site and makes it easy for them to find your good content.

CSS is of course the perfect language for designing beautiful navigation menus. It can be applied to any type of website and is very flexible. Don’t be alarmed if your own CSS skills are fairly limited as there are a lot of great tutorials out there that walk you through how to add clean and professional looking CSS menus to your website. You can either copy and paste the code into your own design or modify the menu to suit your needs.

navigation-dropdown-with-flip-effect

Css-only Lavalamp-like Fancy Menu Effect

This time let’s get inspired by the sliding menu effect, also known as the Lavalamp effect (ex. here). We’ll recreate it with pure css – using css3 transitions and the general sibling combinator selector. Below we’ll discuss three simple examples (make sure to see the demo first).

MORE / INFO DEMO

css-only-lavalamp-like-fancy-menu-effect

 

Hexagon menu

MORE / INFO

hexagon-menu

Mailbox UI

MORE / INFO

Mailbox-UI

 

flip menu perspective

Something I thought up in a sketch I did a few days ago when I was bored. -Best result with webkit prefixe browsers.

MORE / INFO

flip-menu-perspective

Html5-Css3-horizontal-menu0

CSS social share button

CSS Social share button inspired.

MORE / INFO

css-social-share-button

 

Windows 8 Metro Style Menu

MORE / INFO

windows-8-metro-style-css3-menu

 

CSS Flatly menu

Here is a little menu that I create with pure HTML & CSS

MORE / INFO

css-flatly-menu

 

Simple Vertical Menu with jQuery and CSS3

Simple, but very stylish vertical menu using some CSS3, a bit of jQuery, a custom text font and the most impressive icon font you can find at this moment, which is FontAwesome.

MORE / INFO

Simple-Vertical-Menu-with-jQuery-CSS3

 

Account Menu

MORE / INFO

account-menu

 

Nifty Modal Window Effects

A set of experimental modal window appearance effects with CSS transitions and animations.

MORE / INFO DEMO

nifty-modal-window-effects

 

Flexy Menu – Responsive Horizontal & Vertical Menu

Flexy is a menu component based in CSS and Javascript code. You can use Flex Menu it as a horizontal or vertical menu. It is a responsive and collapsible menu, suitable for any type of website..

MORE / INFO DEMO

flexy-menu-responsive-horizontal-vertical-menu

 

Superfish Menu with jQuery

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements.

MORE / INFO DEMO

superfish

 

Overlay Effect Menu with jQuery

In this tutorial we are going to create a simple menu that will stand out once we hover over it by covering everything except the menu with a dark overlay. The menu will stay white and a submenu area will expand. We will create this effect using jQuery. So, let’s start!

MORE / INFO DEMO

overlay-effect-menu

 

Custom Drop-Down List Styling

A tutorial on how to create some custom drop-down lists. We’ll show you five examples with different looking drop-down menus and lists for various purposes.

MORE / INFO DEMO

CustomDropDownListStyling1

 

Horizontal Drop-Down Menu

A responsive horizontal drop-down menu inspired by the Microsoft.com menu.

MORE / INFO DEMO

HorizontalDropDownMenu

 

Vertical Icon Menu

A fixed vertical icon menu that adjusts its size for smaller screens.

MORE / INFO DEMO

VerticalIconMenu

 

Nested Accordion

A simple, nestable accordion with some examples of nesting levels and a media query.

MORE / INFO DEMO

NestedAccordion

 

Slide and Push Menus

Fixed menus that will slide out from the sides of the page and in case of the right and left side optionally move the body.

MORE / INFO DEMO

SlidePushMenus

 

Responsive Multi-Level Menu

A responsive multi-level menu that shows its submenus in their own context, allowing for a space-saving presentation and usage.

MORE / INFO DEMO

ResponsiveMultiLevelMenu

 

Simple YouTube Menu Effect

A tutorial on how to recreate the effect of YouTube’s little left side menu. The idea is to slide a little menu icon to the right side while revealing some menu item list beneath.

MORE / INFO DEMO

YouTubeLeftSideMenu

 

Responsive Retina-Ready Menu

A responsive, touch-friendly and Retina-ready menu with three layouts for different browser sizes.

MORE / INFO DEMO

ResponsiveRetinaReadyMenu

 

Horizontal Slide Out Menu

A horizontal slide out menu with a grid-like thumbnail layout for the submenu. With media query examples for smaller devices.

MORE / INFO DEMO

HorizontalSlideOutMenu

 

Tooltip Menu

A simple tooltip menu where the submenu will either appear above or below the main menu, depending on available space.

MORE / INFO DEMO

tooltip-menu

 

Neptune – Horizontal Submenu

This is pure HTML5/CSS3 menu. Menu has HTML5 structure and works on all major browsers. Menu is easy to edit and integrate into any website.
Menu works (the main structure is 100% same) on Internet Explorer 9 and 8, but animation and some other CSS3 features do not work.

MORE / INFO DEMO

neptune-horizontal-submenu

 

Navion – Metro Navigation Menu Accordion Switcher

Navion – Metro Navigation Menu Accordion Switcher CSS is a small CSS plugin that is used to create navigation menu for modern sites with Responsive Design feature. With this plugin users can interact with it by clicking behavior. Navion CSS can be customized easily because it is only HTML and CSS code.

MORE / INFO DEMO

navion-metro-navigation-menu-accordion-switcher

 

Menufication – Responsive Fly-Out Menu

Navigation is one of the most important aspects of a website. The fly-out menu (with inspiration from Facebook) has been proven to be the most efficient navigation that dramatically can improve your visitors experience on your website!

Menufication is a user-friendly, customizable jQuery-plugin to transform your sites navigation to a responsive fly-out menu in Facebook fashion.

MORE / INFO DEMO

menufication-responsive-flyout-menu

 

DeepMenu – multi level navigation menu

DeepMenu is a multi-level navigation menu with four different transitions between layers and nearly 20 other properties for customization. If JavaScript is disabled, it works as a horizontal dropdown menu. Check the preview page for a live demonstration and more information.

MORE / INFO DEMO

deepmenu-multi-level-navigation-menu

Universal Responsive Mega Menu

This menu is the result of a combination of my best works on Codecanyon : I’ve put together a flexible mega menu system that can hold 12 sizes of drop downs, unlimited fly-out elements combined with a jQuery script to enhance the whole system.

It can be used as a sticky footer (with mega “drop-ups”) using the exact same markup as the “standard” mega menu. You can switch between those 2 variants just by changing a single class.

By using the example pages, you have all the necessary code ready to be used in your site. Customizing the menu require some basic knowledge of CSS and you can change the look of every part of the menu : the fonts, the colors, the sizes, etc. The script includes a few options easy to set up so you can choose which type of effect to apply (on mouse hover or mouse click, fade, slide…).

MORE / INFO DEMO

universal-responsive-mega-menu1

Feedly style CSS animated menu

Inspired by the Feedly iOS app menu, but with a twist.
This menu gradually fades in on page load and has added hover effects to stretch the menu item out.

MORE / INFO DEMO

Feedly-style-CSS-animated-menu

Redesign

Finally got around to redesigning my website.

MORE / INFO DEMO

Redesign

Pure Css3 Responsive Navigation

Easy to use
Pure Css3
Horizontal Navigation
Full Responsive
No javascript, no JQuery..

MORE / INFO DEMO

pure-css3-responsive-navigation

Stairway Hover Nav

Now a jQuery plugin.

MORE / INFO DOWNLOAD

Stairway-Hover-Nav

CSS3 Slide Down / Up Menu

This is a hidden top-menu that slides down (then back up) on click – with no javascript. I’m using the :target pseudo-selector and a simple transition that makes the experience kind of pleasant.

MORE / INFO DOWNLOAD

CSS3-Slide-Down-Up-Menu

CSS3 Accordion and Toggle Widget Kit

CSS3 Accordion and Toggle Widget Kit includes a set of easy to style and implement – Pure CSS3 flexible and responsive Accordions and Toggle Widgets – The Kit comes with 6 ready clean themes and works in all major browsers including a fallback for IE8.

MORE / INFO DOWNLOAD

css3-accordion-and-toggle-widget-kit

IcoRoll – Scroll Navigation System

Responsive scroll menu system providing ideal solution for vertical navigation on pc and mobile devices.

It connects html id attribute on page with menu, so menu knows where user is on page.

MORE / INFO DEMO

icoroll-scroll-navigation-system

SliceNav Responsive Navigation Menu

SliceNav is a responsive navigation that fits on any device. It’s very functional and comes with different types of navigation including full width, column based and the standard drop-down navigation. Also comes with more than 240 icons ready to use in the menu. Organize your website navigation easily with this responsive menu.

MORE / INFO DEMO

slicenav-responsive-navigation-menu

jQuery Accordion

jQuery Accordion is a accordion component based in Javascript and CSS. It has a responsive and fluid layout, has a grid system and 8 preset styles.

MORE / INFO DEMO

jquery-accordion

 

jQuery Hidden Panel

A jQuery plugin which added the hidden panel to the 4 position of the browser corner. You can use it to display a image gallery or video showcase..

MORE / INFO DEMO

jquery-hidden-panel

 

Clean CSS3 Menu

This Clean CSS3 Menu is a flexible and easy to integrate solution to build your custom menus. The Menu relies only on CSS3 and HTML. Everything is based on the 960 grid system. This item comes with 6 color variants. This menu design is fully Responsive

MORE / INFO DEMO

clean-css3-menu

 

CSS Flat Pagination

It is simple, flat and stylish pagination. It comes with 6 predefined stylish colour themes, 2 direction, 4 different sizes and more. Very easy to implement on your HTML document. No Images ! Only CSS. It support all major browsers. Documentation are included.

MORE / INFO DEMO

css-flat-pagination

 

jQuery DragPan

Give your website visitors the ability to navigate a large area of rendered HTML quickly. Usefull for creatingmaps of supermarkets, shopping malls, theme parks, zoos, festival sites, theatres, airports, seating plans in fact anywhere where the map would be larger than the users browser.

MORE / INFO DEMO

inlinePreview

 

UI-Pro – Simple Metro Style Navigation Bar

With this simple jQuery Plugin you can easily create Metro (now simply called Windows 8 UI) style navigation bars. The plugin package comes with the icon pack called iconic created by P.J. Onori, which you can easily set with CSS classes. This plugin has minimal features and options, it has been created for webmasters who need similar functionality on their site(s).

MORE / INFO DEMO

big-cover

 

MenuStation – Real Unlimited Responsive Menu

Features

Real Unlimited Menu
Responsive Design
Light Weight
Many Colors to Change
Submenu HTML Content for Multi Purpose
1 to 4 Columns in Submenu
Easy Customization

MORE / INFO DEMO

menustation-banner

 

Smooth Expandable Menu

Smooth Expandable Menu is the definitive tool for building minimal vertical expandable menus, which can be easily customized due to its 17 built-in config parameters, directly from the html file / script call. The pack includes 3 samples (Serif, San Serif and Tiny), to make easier the integration on any web project. It uses Google Fonts library system, so you won’t need to integrate font files or @fontface scripts. It has been optimized for mobile devices.

MORE / INFO DEMO

preview4

 

Tabs – SEO & Mobile Friendly

jTabs (other name Jaegers Tabs) built with modern web standards in mind, using custom lightweight JavaScript library (4kb gzipped).

MORE / INFO DEMO

preview

 

jQuery Store Locator

jLocator is a jQuery store locator plugin uses Google Maps API V3 and enables searching, sorting, filtering and pagination for your stores. No database required.

MORE / INFO DEMO

jlocator-inline-preview

 

Fullscreen Site Navigation

FSN (Fullscreen Site Navigation) is a JavaScript plugin that lets to build in the easy and quick way a fullscreen website.

FSN can be integrated into any cms or website template: it provides only the structure and the algorithm to make it work, the rest is on the designer hand.
So you can understand that it’s very flexible and it adapts to any user requirement.

MORE / INFO DEMO

image

 

J-Accordion

J-Accordion is a accordion component with distinctive style, based in CSS e Javascript code.

MORE / INFO DEMO

print-preview

 

Zozo Tabs

The brand-new version (v3.5) of Zozo Tabs is Fully responsive and Touch-Enabled using HTML5 and CSS3 standards for impeccable speed and performance on desktop browsers and most importantly on mobile browsers. It runs and feels just like a native app!. Also allows you to scroll automatically to top of page when clicking on tabs/dropdown menu on smaller screens to show your content.
Zozo Tabs is a lightweight and highly customizable jQuery plugin to provide full tab functionality that can be integrated into your site/blog quickly without writing any code. Some of it’s key features includes: such as horizontal and vertical tabs, Deep-Linking, 10 Flexible ways to position, Powerfull API, 10 unique themes and more. Did we mention it works also on older browsers such as IE7 and IE8?

MORE / INFO DEMO

codecanyon20-20tabs20-20banner

 

OpenPanel – Open Responsive Panel Anywhere

OpenPanel is a jQuery plugin that allows you to open panel at any where in your page, unlimited panels as you want and support for responsive design. With this small plugin you can open more space for your site to add anything you want.

MORE / INFO DEMO

openpanel-banner-201303

 

OneMenu – Responsive Metro UI Menu

OneMenu is a jQuery navigation menu plugin that is created for Metro UI themes. OneMenu supports responsive design, unlimited menus.

MORE / INFO DEMO

onemenu-banner-1-1

 

The Fusion of Tabs and Slider with jQuery

Tabs with Animation like an Slider.
Use it as Tabs or as Slider or why not both?

Have you always wanted the useful tabs to be animated more fancy? something like a slider? then this is the plugin for you, the tabs can slide horizontal and vertical ways also there is 15 different effects available between transition and all working with auto height depending on its content.

MORE / INFO DEMO

preview-01

 

Box Accordion Menu – Responsive

You can play around with all its features to make your own.

MORE / INFO DEMO

preview-01

 

Accordion Multi Menu

Simple, modern and easy to install jQuery and CSS3 vertical accordion menu.

MORE / INFO DEMO

Preview1

 

MelonHTML5 – Sliding Menu

Sliding Menu is a menu plugin that fits any websites. It comes with its unique sliding design and plenty of API options allowing you to customize it. All browsers and mobile devices are supported. It works best in Firefox, Chrome, IE10+, Safari and Opera, and are also fully functional in IE7, 8, 9 with slightly difference: no CSS3 animations and 45 degree rotation.

Please give it quick rating if you like this. If you have any suggestions/feature request or you find a bug, you are more than welcome to contact me and I’ll address them ASAP.

MORE / INFO DEMO

inline_preview1

 

Clean Tabs: Responsive Tabs to Accordion

A simple and responsive way to keep your content anywhere.

Clean tabs is a CSS3 and jQuery responsive navigation tabs, optimized for mobile & touch devices. On small screen, the horizontal tabs turns into a vertical accordion. More than 20 clean, smooth and elegant themes realized to work on every devices. Watch the preview images!

Note 1: for a better experience, the menu can handle only 8 buttons.

MORE / INFO DEMO

main

 

Metro Style Side Menu

Features:

Crossbrowser
Simple/Clean
Metro Style
900+ SVG Icons
Hight Resolution (100% vector)
Valid HTML5

MORE / INFO DEMO

banner

Smart Responsive Menu

Smart Responsive Menu is powerful dropdown menu solution that will work with mobile devices and different screen sizes. Menu relies on CSS media queries to modify menu display for different resolutions. By default, plugin changes paddings and font sizes for screen resolution higher than 480px. For less than 480px, menu changes from horizontal navigation into vertical and gets hidden behind the menu item.

But, due to the many differences between mobile browsers, different support for CSS, menu must use JavaScript to make up for these problems. There is no way to make menu universally work without use of JavaScript.

Plugin is tested with all available Android browsers, iPhone and iPad Safari and Chrome, all modern desktop browsers. It requires JavaScript support to work.

MORE / INFO DEMO

smart-responsive-menu.preview

 

Vertu – Simple Mega Menu

Vertu – Simple Mega Menu is simple and easy mega menu with many functions.

MORE / INFO DEMO

big

 

Drag and Drop Menu Generator and Sorter

This is a menu generator that you can use as a standalone generator for your website to drive traffic or as a useful tool to make a menu for a website.

You can: – add multiple menu items – sort the menus into multiple levels – generate a menu – copy the html and css straight to your website

MORE / INFO DEMO

main

 

Responsive Vertical Dashboard Menu

Responsive Vertical Dashboard Menu using Jquery ,html and css. It is quite easy to implement also quite easy to understand.

This menu compatible for all devices resolution.

You can use this Responsive Vertical Dashboard Menu in your projects.

MORE / INFO DEMO

splash

 

Circle Navigation

This is a navigation menu in a circle shape. Contain 7 round shapes with different colors. It is easy to edit and customize.

MORE / INFO DEMO

presentation

 

Vertu – Accordion Menu

Vertu – Accordion Menu simple and beautiful accordion menu for you website.

MORE / INFO DEMO

BIGG

 

Vertical Responsive Menu

Collection of Responsive Vertical Menus, with 20 color schemes, cross-browser support and easy integration. Responsive Vertical Menu can be used in sidebars of any site as well as admin dashboards.

MORE / INFO DEMO

590

 

GEX – Responsive Navigation

“GEX – Responsive Navigation” is a navigation component based in Javascript and CSS. This menu uses gradient color and Javascript effects to provide a beautiful design. It is a responsive menu component and can be used in various website types.

MORE / INFO DEMO

inline-preview

 

Elegant Menu

is Javascript/CSS menu component with distinctive and clean style. It’s a conventional dropdown menu that can be used in many type of websites. The major browsers are compatible.

If you like, please rate it rateraterateraterate

MORE / INFO DEMO

inline-preview3

 

Pure CSS3 Accordion Menu

Features

Browsers:
Chrome
Firefox
Opera
Safari
Internet Explorer 10

7 colors:
Blue
Purple
Red
Orange
Green
Yellow
Black

MORE / INFO DEMO

Preview20

 

Post Info & Social Blocks – WordPress Plugin

With Metro style taking the internet world by storm a lot of websites are struggling to keep up without a full make over. The Post Info & Social Blocks plugin for WordPress allows you to add a little Metro to your website easily. Simple installation followed by a few tweaks by the website owner will give you an awesome user friendly block system to liven up your website.

MORE / INFO DEMO

post-info-blocks-header

 

Scroll Menu | Tag Vertical Navigation

Scroll menu lets you insert tag points on the document as shortcode. Every Tag point it will automatically added to the Scroll Menu as a button, giving users of your site a better experience and navigation control on large or medium pages.

You may customize the position of the menu and the styles/colors of button.

MORE / INFO DEMO

scrollmenu-preview

 

Kodda – Modern and Responsive WordPress Menu

Kodda is a responsive , modern , Elegant , clean & highly customizable wordpress menu. with kodda you can add : Posts , Links , DropDown’s , Text , HTML & Shortcodes!

MORE / INFO DEMO

envato-590-300

 

WordPress Menufication

Navigation is one of the most important aspects of a website. The fly-out menu (with inspiration from Facebook) has been proven to be the most efficient navigation that dramatically can improve your visitors experience on your website!

WordPress Menufication is a user-friendly, customizable WordPress-plugin to transform your WordPress 3 menus to a responsive fly-out menu in Facebook fashion.

Just choose what WordPress 3 menu to use and you are ready to go. It’s as easy as that!

MORE / INFO DEMO

menufication-590x300

 

PBK Mega Menu for WordPress

PBK Mega Menu Plugin for WordPress is your easy way to add a functional and customizable Mega Menu to your WordPress website. Adding menu items and content is just like adding posts or pages… If you know how to use WordPress, then you already know how to use the Mega Menu plugin.

Built in shortcodes give you flexibility when laying out your dropdown content, and a plugin options page allows you to choose from 6 different color options. If you’re down with CSS, you can style the menu to your heart’s delight by uploading a file named “userdefined-mega-menu.css” with your custom styles in the same directory as your theme’s primary stylesheet.

MORE / INFO DEMO

megamenu_inline_preview

 

niceMenu – WordPress Plugin

niceMenu – WordPress Plugin
A new way to slide between multiple level huge menu.
Now as a wordpress plugin!
You can navigate on multiple levels very easy!
Just a few clicks & the menu is installed on your wordpress website.
It’s easy to position anywhere, as a widget sidebar.
You can put custom links, website pages & categories.

MORE / INFO DEMO

presentation-nicemenu

 

WP Sticky Menu Plugin

Sticky Menu Plugin has it’s own option panel from where you can select your styles, the alignment of the menu (Top or Bottom), the width of the menu (980px or Full Width). You can also select the animation effect for the sliding out and in of the menu. Watch the video for more information or buy it now.

MORE / INFO DEMO

01-sticky

 

UberMenu – WordPress Mega Menu Plugin

UberMenu is a user-friendly, highly customizable, responsive Mega Menu WordPress plugin. It works out of the box with the WordPress 3 Menu System, making it simple to get started but powerful enough to create highly customized and creative mega menu configurations.

MORE INFO DEMO

UberMenu

 

TS Display – Portfolio and Gallery Plugin

TS Display is a wordpress plugin for display portfolio and gallery. You can use this plugin to manage portfolio post and show photo gallery in your website.

Update version 1.5: Make this plugin more flexible with any content width.

MORE INFO DEMO

ts-display-portfolio-and-gallery-plugin

 

Spice up your menu with CSS3

In this new category called “Tips and Tricks” we will introduce some quick and interesting methods around web development and web design. In today’s tip we’ll show you how to spice up your menu by adding a neat hover effect to it. The idea is to slide an image out to the right when hovering over a menu item.

MORE INFO DEMO

CSS3MenuHoverEffect

 

Menu with CSS3 Effects and Notification Bubbles

This Menu with CSS3 Effects and Notification Bubbles has everything you need. The functionality is divided in different parts and that makes it very powerful.

The core is a rock solid base for every css menu with unlimited menu levels and a mega menu. The effects are pure css, but you can use the jQuery plugin for support in older browsers. The menu styles are also pure css and there are no images used.

MORE INFO DEMO

menu-with-css3-effects-and-notification-bubbles

 

Dark Menu: Pure CSS3 Two Level Menu [Tutorial]

Some days ago we released a Freebie called Dark Menu in Free PSD and in this easy to follow tutorial you will learn how to create this two level Dark Menu in HTML and Pure CSS3. No Javascript or Images has been used in the creation of this menu and I hope that you can learn a few techniques that will help you in future projects.

Now, if you aren’t so familiar with CSS3 you can either learn about it at CSS3.info or at W3Schools. You can also use this online CSS3 generator to help you create these styles easily. Off course you need to put all HTML code inside an HTML document and all the CSS styles either in the HTML document header or in a separate CSS file. All colors, effects, shadows are taken from the Dark Menu PSD file. Now let’s start our tutorial.

MORE INFO DEMO

css3-dark-menu

 

Sherpa | Complete Navigation System (CSS Edition)

As the name suggests, Sherpa is a total solution for all your navigation requirements.

Sherpa brings together the three main navigation elements of every interface – Navbar, Sidebar and Sticky Footer.

Each one consists of a selection of different menu types including: Slide Menu, Mega Menu, Accordion Menu (in sidebar) and Drop Menu. You can pick, choose and mix these to make a really unique navigation.

It has 10 different colour skins, 12 beautiful background images, uses CSS3 effects and comes with 500+ icons to make it one of the best looking navigations on Codecanyon. Check out the screenshots and preview.

Instead of trying to bring together lots of different navs from many different sources, choose Sherpa | Complete Navigation System and save yourself time on integrating into your system.

MORE INFO DEMO

sherpa-complete-navigation-system-css-edition

 

Making a CSS3 Animated Menu

In this short tutorial, we will be using the power of CSS3 effects and transitions, to build a JavaScript-free animated navigation menu which you can use to add a polished look to your website or template.

MORE INFO DEMO

css3-animated-navigation-menu

 

HTML5/CSS3 Drop Down Menu

Super flexible and semantic HTML5 /CSS3 drop down menu, absolutely no JavaScript. Very easy and quick to implement!

MORE INFO DEMO

html5css3-drop-down-menu

 

CSS3 Dropdown Menu

While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered.

MORE INFO DEMO

css3-dropdown-menu

 

PBK Mega Menu for WordPress

PBK Mega Menu Plugin for WordPress is your easy way to add a functional and customizable Mega Menu to your WordPress website. Adding menu items and content is just like adding posts or pages… If you know how to use WordPress, then you already know how to use the Mega Menu plugin.

Built in shortcodes give you flexibility when laying out your dropdown content, and a plugin options page allows you to choose from 6 different color options. If you’re down with CSS, you can style the menu to your heart’s delight by uploading a file named “userdefined-mega-menu.css” with your custom styles in the same directory as your theme’s primary stylesheet.

MORE INFO DEMO

pbk-mega-menu-for-wordpress

 

Simple navigation menu

Nice, simple navigation menu with dark sub menu. Perfect for complex websites, bigger blogs, etc. As usual, it’s vector and fully layered psd file. If you like it, please share it on Twitter and/or Facebook.

MORE INFO DEMO

simple-navigation-menu

 

Meganizr – Responsive CSS3 Mega Menu

Meganizr is a user-friendly, highly customizable, flexible and easy to integrate solution to build your custom menus. It was build with pure CSS3 which makes it simple to get started but powerful enough to create highly customized and creative mega menus configurations.

MORE INFO DEMO

meganizr-responsive-css3-mega-menu

 

CSS3 Mega Drop Menu

MORE INFO DOWNLOAD

megamenu

 

jQuery Vertical Drop-Down Menu

The scripts are two complex jQuery menu plugins with an unlimited number of submenus, easy to integrate.

MORE INFO DEMO

jquery-vertical-dropdown-menu

 

CSS3 Sliding Menu

It’s often best to put things away until you need them. Navigation menus are a good example. If I’m reading an article, I don’t want a large proportion of screen real estate taken with links — especially on a mobile device.

In this article, we’re going to build a slide-out menu using CSS alone. If you’re using a modern browser, it will also show a lovely 3D page effect.

MORE INFO DEMO

css3-sliding-menu

 

iNav – CSS3 Menu

This is a CSS3 navigation mega menu with 4 variants (horizontal, sticky footer, vertical left and vertical right), 11 premade color schemes and a lot of nice features. Is very easy to use and install, well documented and no JavaScript/jQuery. For more info watch the video preview and the screenshots.

MORE INFO DEMO

inav-css3-menu

 

CSS Navigation

CSS navigation bar with dropdown elements and transition effects. There is one issue which is when you move your mouse cursor over the dropdown menu slowly, it hides. So, you need to move your mouse quickly to hover on the dropdown elements. It has some easy and quick color adjustments also which is done by using jQuery. Icons by Entypo.

MORE INFO DEMO

css-navigation

 

UberMenu – Conditionals Extension

UberMenu Conditionals adds the option to conditionally display or hide any item in your UberMenu. It adds a new option to each menu item, where you can select which condition must be met via a select box.

MORE INFO DEMO

UberMenuConditionals

 

Slide Down Box Menu with jQuery and CSS3

In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left …

MORE INFO DEMO

SlideDownBoxMenu

 

Utopian CSS3 Dropdown Menus

Utopian CSS3 Dropdown Menus come with 2 layouts, horizontal and vertical, and 3 color styles, Utopian, black and white. They’re purely CSS and built on XHTML Strict 1.0 semantic code. Enjoy!

And by the way, for just a few more dollars check out the Utopian XHTML Site Template that this menu is based on.

MORE INFO DEMO

utopian-css3-dropdown-menus

 

Create Accordion Menu (CSS3+jQuery)

As you may noticed a few days ago we released a tutorial about How to Create an Accordion Menu in Pure CSS3. As this pure CSS3 Accordion Menu will not work on all browsers because the :target selector in not supported in the oldest browsers we decided to create a jQuery version of this menu. Also jQuery offers more stability and cross browser compatibility support so if you want to provide to your visitors/client a better product you may consider use this jQuery version.

MORE INFO DEMO

jqueryaccordionmenu

 

Super menu pack (10 menus)

Super menu pack is a collection of 10 cool menus, 5 in pure css and 5 using jQuery framework for customize or layout with your websites or applications and projects.

It’s perfect for anyone who wants to give a special touch to their designs or find a starting point. I tried to create a collection as varied as possible in style and appearance to give you choice. Thinking in design working with code.

The package contains all necessary files:

– HTML – CSS – JS – Images – Cufon fonts with use allow – Commented and documented code – Additional documentation

All menus are easy to customize from CSS . In each file you will find detailed coments.

Hope you enjoy it!

MORE INFO DEMO

super-menu-pack-10-menus

 

CSS3 Dropdown Menu

MORE INFO DEMO

css3dropdownmenu

Sticklr – Sticky Side Panel CSS3 + jQuery Plugin

MORE INFO DEMO

sticklr-sticky-side-panel-css3-jquery-plugin

Blur Menu with CSS3 Transitions

There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with text shadows and with transitions in order to achieve a blur effect that we’ll apply to a menu on hovering over the elements. The main idea is to blur the other items while enhancing the one we are currently hovering.

MORE INFO DEMO

BlurMenu

 

Responsive Mega Menu Complete Set

This Mega Drop Down Menu Complete Set is perfect for creating unique menus by using one of the 9 jQuery effects and one of the color schemes.

Based on a custom grid, this menu allows you to organize your content into columns (from 1 up to 12) with a lot of typography examples such as headings, lists, images styling, tables, form elements, etc.

MORE INFO DEMO

responsive-mega-menu-complete-set

 

CSS3 Mega Drop Down Menu

This Mega Drop Down Menu is a flexible and easy to integrate solution to build your custom menus. The drop down relies only on CSS/XHTML and comes with a fully working contact form.

3 main variants are included : horizontal, vertical aligned on the left and vertical aligned on the right.

The content can be organized into 6 columns based on the 960 grid system. This item comes with 9 color variants (and 2 color schemes for the drop downs – dark and light) and a detailed documentation to help you to customize it.

MORE INFO DEMO

css3-mega-drop-down-menu

by