Iphone icon set: Get more than 15000 icons FREE!

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

CSS menu, 180 scripts, plugins and freebies

Comments and suggestions in here

Here on webdesignshock.com we’re always on the lookout for the latest and everything fresh in web designs plug-ins, tools, etc. for all our web knowledge enthusiastic readers, although sometimes it’s not necessarily time to  highlight the new but to acknowledge an on growing plug in use trend that solidify its acceptance amongst users, thanks to its outstanding features.

Having said this, a successful website nowadays is considered to be one that responds to the time constraints and thirst for information demands of web surfers. In this sense, the hit of a site depends to the amount of information supplied vs. the speed that it’s provided in. Surely enough, if users enter a web where they must bear a never ending waiting loading period of 5 or 10 clicks until finally being able to access concrete information of their search for topic, in the future these will be users that quickly run away for your site, or even worse, that will avoid entering your site ever again.

Incorporating CSS Menus, you will guarantee a search friendly site

This is why, along with providing a site that’s visually enhanced to serve the upcoming trends in web design, or serving a significant load of information about a certain topic, you should care for supplying a search friendly, easy to update web site that delivers information in an immediate fashion.

When providing the visitor with a website that serves this purpose, the use of an outstanding menu design, (or several of them), that is effective to the needs of the information eager, hectic visitor, can become the number one tool in your site to ensure the permanence of visitor for long periods of time.

Also, the organization and categorization of the access points for the information you provide in a web site is crucial for visitors’ quick understanding of the site and the information that’s being provided. In this sense, CSS Menus are another great example of CSS power allowing the web designer to turn a boring access list, into a great looking professional menu that will improve the style of your website.

CSS menus vs. Flash menus in the battle against time

More and more so CSS (Cascade Style Sheet) menus have come to replace Flash menus when it comes creating a practical website design, as it’s become obvious through their use in time, that despite the visual beauty of their bar and button features, they are twice as difficult to construct and turn out to be heavy on website.

As a result, CSS has become evidently trendy because of its lightness, and simple to create, easy to update and put into action features, since all you have to do when using it, is to import the CSS style sheet on your HTML or any other web script page and add all the page appearance alterations according to your desired CSS style settings.

Even so, for some of you that are still rookie web developers, and find it difficult to build CSS menus out of nowhere there here are many sites where you can generate CSS menu and get CSS code for free. But beware when using these free CSS menus to avoid the recurrence of a style that’s been seen by web surfers more than once, especially when it comes to using the popular ones. For this we recommend to incorporate in the freebie CSS menu downloads a few glitches and adaptations of your own, to guarantee the originality of your layout.

In the following piece, after thorough investigation we’ve subtracted 180 CSS Menus (including the always popular freebies) to provide a go to spot, for those have had trouble finding merely suitable menus to incorporate in their website designs, after going through a disappointing web surfing process. So, look no further and check out the piece we’ve got for you.

Blur Menu with CSS3 Transitions

cssmenu86[7][5]

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.

Slide Down Box Menu with jQuery and CSS3

cssmenu87[7][5]

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 or to the right depending on which menu item we are hovering.

Creative CSS3 Animation Menus

cssmenu1[10][2]

Being in the mood for experimenting with CSS3, I’d like to show you some creative menu hover effects in today’s tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We’ll be exploring some different effects for the elements. The icons used in the demos are actually a Web Symbols typeface that we’ll include with @font-face. The typeface is done by the Just Be Nice studio.

JSTACKMENU

cssmenu6[10][2]

the same concept and created a jQuery UI widget for it. Now you can take any element and turn its children into the items of a stack menu. You can control when it opens and closes, the direction it opens, the size of the arc and even the time it takes to open. It even has events for those who really want to get clever. Of course there is a catch, it only does the arcing in the browsers that support CSS transforms. But, it does degrade into a popup of the stack items in a line. As well, for those browsers that support CSS transitions, it uses this instead of the Javascript animation which creates a smoother animation while reducing the Javascript load.

Awesome Cufonized Fly-out Menu with jQuery and CSS3

cssmenu89[7][5]

create a full page cufonized menu that has two nice features: when hovering over the menu items we will move a hover-state item that adapts to the width of the current item, and we will slide out a description bar from the left side of the page, reaching towards the current menu item.

Pretty Simple Content Slider with jQuery and CSS3

cssmenu91[7][5]

create an auto-playing content slider with jQuery and CSS3. The idea is to alter the background image and to slide in the heading and the description. By clicking on one of the menu items, the auto-play function is stopped and the respective content slides out.

Grungy Random Rotation Menu with jQuery and CSS3

cssmenu92[7][5]

In this tutorial we are going to create a great menu with some content area that slides out. We use the grunge style because we want it to look a bit messy: the menu items are going to have a random rotation using the CSS3 property “transform”. So, when we load the page each menu item will be positioned differently, giving a random and creative look to this grunge page.

Fresh Set of CSS-only Menus

cssmenu93[7][5]

Here is a set of fresh CSS-only menus for your website — no images, no JavaScript. The markup for the menus is always the same and I used 12 different stylesheets for their appearance. The main idea is to have a big title link and some description under the link. The description can be hidden with visibility:hidden and then shown when hovering over the link element. Title and description are inside of spans and can be styled accordingly.

MTV.com horizontal css drop-down menu

cssmenu55[7][5]

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 or even faster when you have the best hosting plan for your site.

NVIDIA.com horizontal improved css drop-down menu with no flash

cssmenu57[7][5]

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 or even faster when you have the best hosting plan for your site.

Original Hover Effects with CSS3

cssmenu99[7][5]

The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example.

Circle Navigation Effect with CSS3

cssmenu100[7][5]

Today we want to show you how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular navigation with an arrow and make a bubble with a thumbnail appear. In our example we will be showing the thumbnail of the next and previous slider image on hovering the arrows. The effect is done with CSS3 transitions.

CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation

cssmenu94[7][5]

This menu looks very similar to the Apple-style navigation but it reveals some icons when hovering over it. The icons slide out from the top and when the mouse leaves the link, the icon slides back under the link element. This creates a neat “card-shuffle” effect.

Fixed Fade Out Menu: A CSS and jQuery Tutorial

cssmenu95[7][5]

The aim is to have a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again.

Beautiful Slide Out Navigation: A CSS and jQuery Tutorial

cssmenu96[7][5]

The icons that we will be using are from the Colorful Sticker Icon Sets 1, 2, 3 and 4 by DryIcons. (It is not allowed to redistribute them under the free license, so I cannot include them in ZIP file of this tutorial.)

Advanced CSS Menu

cssmenu46[8][5]

This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property.

CSS Dock Menu

cssmenu47[7][5]

If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom. This CSS dock menu is perfect to add on to my iTheme. Here I will show you how to implement it to your web page.

MenuMatic 0.68.3

cssmenu11[10][2]

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. For users without javascript, it falls back on a CSS menu system based on Matthew Carroll’s keyboard accessible flavor of Suckerfish Dropdowns by Patrick Griffiths and Dan Webb.

Jungle CSS Menu

cssmenu14[10][2]

We include all these features as standard across all our CSS Menus: Multiple Colour Schemes Original PSD File (Where Appropriate) Cross Browser Compatible Standards Compliant.

CSS3 Dropdown Menu

cssmenu44[8][2]

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.

CSS Sprites2

cssmenu50[7][2]

Snook read Dave Shea’s article on CSS Sprites using jQuery to produce animation effects, he felt like playing around with things to see what could be done but accomplish it with a simpler HTML structure (no need for adding superfluous tags) and simpler code, too.

Mega Drop Down Menus w/ CSS & jQuery

cssmenu52[7][2]

According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites.I decided to experiment with different ways of implementing this technique and would like to share how I achieved this method.

VIMEO.com horizontal css drop-down menu

cssmenu54[7][2]

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 or even faster when you have the best hosting plan for your site.

Advanced CSS Menu Trick

cssmenu63[7][2]

CSS really opens the doors to a lot of powerful and rich opportunities. It is funny how such minor things can create a whole new look, feel, and effect of a site. The beauty of CSS really is that it gives you power, but not too much power. . Advanced Css Menu Tricks is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well. This will help focus the users attention on the item they have selected on, and create a new look and feel for the site overall.

14 Free Vertical CSS Menus

cssmenu71[7][2]

You may download the entire set and use any way you see fit. Like the last two sets of menus these can be used for commercial or private use. Have fun with all the menus.

Dropdown Menu Widget

cssmenu79[7][2]

Dropdown Menu widget adds a beautiful, CSS only dropdown menu, listing pages, categories of your blog. You can also turn your wordpress navigation menu into a beatiful dropdown menu using this plugin. It allows you to chose vertical or horizontal layout. It supports multiple instances. You can select a theme for your widget from the Dropdown Menu Settings page or you can CREATE YOUR OWN THEME WITHIN SAME PLUGIN!! You can also customize your dropdown menu using CSS.

Large Drop Down Menu

cssmenu88[7][2]

This search box reveals a drop down menu after the user clicks into the input field. The menu is meant to act as a filter with several checkbox options that allow the user to select specific categories for his search. When the user hovers out of the input or the filter box, the drop down will disappear.

Animated Buttons with CSS3

cssmenu98[7][2]

Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states.

CSS3 animated dropdown menu

cssmenu101[7][2]

It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs. In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features.

Cool CSS3 navigation menu

cssmenu102[7][2]

We all try to be very creative when it comes to designing a website navigation. It’s a sure thing: a good looking navigation menu can really enhance your website. I wrote before about how to create different menus and today you’ll learn how to create another stylish CSS3 navigation menu.

Sexy CSS3 menu

cssmenu104[7][2]

One of the most common elements when talking about a website or an application design is definitely the menu navigation. No matter if vertical or horizontal, simple or complex, a menu is essential and it has to look that way.

CURSOR FOLLOWING MENU

cssmenu105[7][2]

The idea behind the script was to create a floating navigation that follows the moving cursor throughout the page. The goal was to make the menu itself as minimal as possible with “discreet” float animation to avoid obtrusiveness and help usability. The end result features simple markup, two levels navigation and styling via css. An extra feature included in the plugin is the function that animates the page to anchor points which you can test on the single-page demo.

#7: Three State Menu

cssmenu111[7][2]

Using a variation of the CSS Sprites technique, we can create a “three state” menu using only one image per menu item. This reduces the number of requests on your server as well as eliminates any “pauses” while moving to a different state like some other techniques can have. This tutorial takes you all the way through the process of creating the images to the HTML to the CSS.

Tag Cloudish Crazy CSS Menu

cssmenu117[7][2]

Each menu item is given a unique class. The classes are then defined with font styles and positioning information. Vertical positioning is non-flexible, but horizontal position is by way of text-alignment and/or % margins.

JMENU

cssmenu2

jMenu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus.Besides jQuery, it also requires jQuery UI and supports all the effects of this library (like fadeIn or slideDown).The markup of the menu is pretty clean as it makes use of nested lists.The look and feel of the output is set in a CSS file so updating it without touching the JS code is possible.

FEM CSS Framework

cssmenu3

FEM CSS Framework is a 960px width + 12 column grid system + CSS common styles, to easy and fast develop web layouts. Basic styles for forms, tables, menu, and the Grey Box method to background boxes easy. They can be used as start point for our custom designs.

CSS3 Menu

cssmenu4

FANCY DROP DOWN MENUS WITH PURE CSS!Creating a nice looking menu no longer needs all the code and time it use to, thanks to CSS3. Using this FREE CSS3Menu you can create great looking buttons using just CSS3 in a few clicks.

KCFinder web file manager

cssmenu5

KCFinder is free open-source alternative to the CKFinder web file manager. It can be integrated into FCKeditor, CKEditor, and TinyMCE WYSIWYG web editors (or your custom web applications) to upload and manage images, flash movies, and other files that can be embedded in an editor’s generated HTML content.

Jeegoocontext

cssmenu7

Jeegoocontext is a jQuery plugin for creating highly customizable context menus. Multiple context menus can be created on the same page & they can be customized via CSS.

CSS Template Layout Module

cssmenu8

CSS is a simple, declarative language for creating style sheets that specify the rendering of HTML and other structured documents. This specification is part of level 3 of CSS (“CSS3″) and contains features to describe layouts at a high level, meant for tasks such as the positioning and alignment of “widgets” in a graphical user interface or the layout grid for a page or a window, in particular when the desired visual order is different from the order of the elements in the source document. Other CSS3 modules contain properties to specify fonts, colors, text alignment, list numbering, tables, etc.

CSS QuickMenu

cssmenu9

Update 26.12.2008: This post is updated to reflect the original application.CSS QuickMenu is a very powerful & web based CSS menu creator application. After selecting the menu type & clicking the “customize menu” button, you can reach the editor.

Free CSS Drop-Down Menu Framework

cssmenu10

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 or even faster when you have the best hosting plan for your site.Easily deployable. The code and files are well organized. Available channels to hook up to your CMS or other tools as well as existing websites in XHTML format.

UvumiTools Dropdown Menu

cssmenu12

The UvumiTools Dropdown Menu is the menu featured on this website. It is a very simple multi-level menu built from an HTML unorderd list, using Mootools Javascript Framework. We needed a simple and lightweight menu that can be easily updated by simply editing a

    HTML element. Horizontal menus are great because they are small, but the number of items they can contain is limited to the document’s width.

    CSS Menu Builder

    cssmenu13

    Please check out our 300+ horizontal menus, our 700+ vertical menus combinations and our 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. Below is a small sample and if you click around, you will notice that our own site menu randomly changes between the menus we offer.

    Dolphin CSS Menu

    cssmenu15

    We include all these features as standard across all our CSS Menus: Multiple Colour Schemes Original PSD File (Where Appropriate) Cross Browser Compatible Standards Compliant

    Matte CSS Menu

    cssmenu18

    We include all these features as standard across all our CSS Menus: Multiple Colour Schemes Original PSD File (Where Appropriate) Cross Browser Compatible Standards Compliant

    Simple Hover CSS Menu

    cssmenu19

    We include all these features as standard across all our CSS Menus: Multiple Colour Schemes Original PSD File (Where Appropriate) Cross Browser Compatible Standards Compliant

    Rounded CSS Menu

    cssmenu20

    We include all these features as standard across all our CSS Menus: Multiple Colour Schemes Original PSD File (Where Appropriate) Cross Browser Compatible Standards Compliant

    Gloss CSS Menu

    cssmenu21

    We include all these features as standard across all our CSS Menus: Multiple Colour Schemes Original PSD File (Where Appropriate) Cross Browser Compatible Standards Compliant

    Classics CSS Menu

    cssmenu22

    We include all these features as standard across all our CSS Menus: Multiple Colour Schemes Original PSD File (Where Appropriate) Cross Browser Compatible Standards Compliant

    Simple CSS Menu

    cssmenu23

    We include all these features as standard across all our CSS Menus: Multiple Colour Schemes Original PSD File (Where Appropriate) Cross Browser Compatible Standards Compliant

    Vert-one CSS Menu

    cssmenu24

    We include all these features as standard across all our CSS Menus: Multiple Colour Schemes Original PSD File (Where Appropriate) Cross Browser Compatible Standards Compliant

    Garden CSS Menu

    cssmenu25

    We include all these features as standard across all our CSS Menus: Multiple Colour Schemes Original PSD File (Where Appropriate) Cross Browser Compatible Standards Compliant

    Slate CSS Menu

    cssmenu26

    We include all these features as standard across all our CSS Menus: Multiple Colour Schemes Original PSD File (Where Appropriate) Cross Browser Compatible Standards Compliant

    AnyLink CSS Menu v2.3

    cssmenu27

    AnyLink CSS Menu is a flexible menu script that adds a drop down menu to any link on your page. Each drop down menu is simply implemented as plain HTML on the page, making them search engine friendly and easy to edit and deploy. The script supports a myriad of subtle but appealing features: Two different toggle methods- Each menu can be activated either Mouseover the anchor link, or Click instead. Two different orientations, “ud” or “lr”- Each menu can be set to either drop down below the anchor, or to the right of it instead. The later is desirable if the anchors are “side bar” or “vertical” links. Menu repositions itself if too close to any of the window’s four edges to avoid being obscured. Ability to style the currently selected anchor link using CSS, or for image anchors, toggle between two images. v2.1 Global settings to set the delay before each menu disappears onMouseout, whether to enable shadows, and last but not least, a fade-in effect when the menu is revealed. A drop down menu is associated with an anchor link on the page just by inserting a “rel” attribute inside the later that points to the desired menu’s ID attribute.

    Chrome CSS Drop Down Menu (v2.5)

    cssmenu28

    We decided to create this script when we needed a compact CSS drop down menu for a project. 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. Some highlights of this menu: Ability to easily “left”, “center”, or “right” align the menu items easily, just by modifying the CSS property “text-align”. Optional “swipe down” transitional effect for revealing the drop down menus. Main menu items appear “selected” when the mouse rolls over them, which includes while the mouse is over the corresponding drop down menu. Style this state as desired by customizing the “.selected” CSS class name inside “chromestyle.css.” New in v2.4 Specify arbitrary HTML that gets added to the end of each menu item to indicate it carries a drop down menu. New in v2.4 In IE6, drop down menus correctly appear on top of windowed controls (such as a SELECT element) using the “shim iframe” technique. Support for multiple Chrome menus on the same page.

    AnyLink CSS Vertical Menu

    cssmenu29

    This is a vertical (drop to the right) version of Anylink CSS Menu that can be used on arbitrary links or vertical menus to instantly add a drop down menu to them. Each drop down menu is implemented as plain HTML (a DIV containing links) on the page, making the menu contents search engine friendly and easy to define. Be sure to also check out AnyLink Vertical Menu, which differs from AnyLink CSS Vertical Menu mainly in that the menu contents are specified inside the script. If your site is dynamic, this may be an easier script to deploy across the entire site.

    jQuery Gooey Menu

    cssmenu30

    jQuery Gooey Menu uses the popular “lava lamp” effect to create CSS menus with a moving gooey background effect. Whenever the mouse moves over a menu item, the desired style that indicates the selected menu item follows the mouse to that item, smoothly highlighting the currently active item. Each menu is simply a standard UL list and very easy to customize, including the gooey effect itself. The gooey effect is simply an absolutely positioned LI element dynamically added to the end of the menu. It is styled using just CSS to create the desired gooey menu look. Groovy!

    DD Mega Menu

    cssmenu31

    Added ability to activate menu via “click” of the mouse, on top of the default “mouseover”. Only .js file changed. Description: DD Mega Menu is the ideal menu script to use when you need a drop down menu system that supports arbitrary sub menu layouts, such as multiple columns of links or even arbitrary HTML. Each drop down menu is simply defined inline on the page as a regular DIV, making it extremely easy to customize its contents whichever way you like. And unlike most other mega menus, this one supports nested levels.

    All Levels Navigational Menu (v3.0)

    cssmenu32

    All Levels Navigational Menu is a CSS/ HTML list based menu with support for infinite levels of sub menus. It’s lightweight and easy to implement (the menu contents are simply regular HTML lists), with all of the menu links search engine friendly. Furthermore, the menu is structured in a way that makes it very easy to customize its look.

    Slashdot Menu

    cssmenu33

    This is a stylish collapsible menu modelled after the navigational menu found on Slashdot. Configure the menu in a multitude of ways, such as which sub menus to expand by default, whether to persist menu states using cookies, to the speed in which menu items expand/ collapse. Very cool.

    Switch Menu II

    cssmenu34

    Switch Menu II is a XP style menu that you can stack on the your page to categorize your links. These menus are inline rendered so any HTML that is around them when they slide open will be “pushed” out of the way. If the user has cookies enabled the script will use it to remember the last state of the menu upon his return. The fade effect is optional, and can be turned off.

    Drop down menu w/ description

    cssmenu35

    This is your straightforward drop down menu, except in IE5+ and NS6+, a description of each selection is displayed beneath it. Very nice addition to a popular application wouldn’t you say? Script updated to support options opening in a new window (IE5/NS6+ only), and ability to include multiple menus on the same page.

    Mouseover Tabs Menu

    cssmenu36

    This is a mouseover tabs menu. Move the mouse over designated links, and additional sub menu contents appear in a separate DIV below it. Think of it as an inline two level menu. Specify which tab should be selected when the page loads in two different ways, plus whether the sub menu contents should disappear when the mouse rolls out of that area.

    Scrollable Menu Links

    cssmenu37

    If you have a lot of menu links and not a lot of space, this is the script to turn to. It compacts any content into a predefined area, with the content accessible via left and right scroll buttons. Browsers other than IE 4+ or NS 4+ will simply see nothing.

    Dropdown HTML control

    cssmenu38

    Use this script to create a drop down control for arbitrary content on the page, such as a a search form. The content to drop down is simply wrapped inside a hidden container and dynamically shown onClick or onMouseover. Furthermore, you can specify whether the content should drop down directly below or to the right of the activating element. A nice space saver script that’s also not bad as a menu!

    Contractible Headers Script

    cssmenu39

    A script that makes selected headers in a page contractible. Contents such as text, graphics, tables etc can be hidden inside the header that will be revealed only when the header is clicked on. What sets this script apart from most other you’ll find are the following features: Works in both IE5+ and NS6+, and degrades fully with other browsers. In the later instances your content will appear normally. Extremely versatile. The script can be applied to content of all types on your webpage, such as DIV, P, TABLE etc. New! Two expanding behaviors- specify whether only one header should be open at any one time, or that previously open header continue to be visible. Persistence feature. You can specify whether the script should remember the state of the header structure when the user navigates away to a different page. When enabled, returning to the page will cause the script to return the header to its last state (ie: third header expanded).

    Microsoft Outlook bar II

    cssmenu40

    With an interface resembling Microsoft Outlook, this unique menu tucks away its contents until user intervention. It supports an unlimited number of categories, and furthermore, works across all DHTML browsers (IE4, NS4+. Mozilla 0.9, Opera5). The only shortcoming is its demand to be put inside a frames environment. Hay, even Microsoft ain’t perfect!

    CSS3 Semi Opaque Menu

    cssmenu41

    Linear gradient backgrounds in CSS3 lets you add a graduating background to any element on the page. It’s supported in FF3.6, Safari 2+ and Google Chrome. In IE9 (which currently doesn’t support CSS3 Linear Gradients), SVG is used to create a similar look while IE gets its act together. With that said, this menu takes advantage of CSS3 gradient background to produce a menu with a semi opaque rollover effect. Whatever the solid background color of the main UL behind it, the menu item’s background peeks through. Peek-a-boo!

    CSS Clay Bricks Menu

    cssmenu42

    This rustic looking horizontal CSS menu utilizes CSS3 gradient backgrounds and box shadows to add progressive visual appeal while still maintaining its minimalist look. The menu uses no CSS floats and hence can be easily left, center, or right aligned.

    Pure CSS collapsible tree menu

    cssmenu43

    The classic tree view, we all know it, it’s used everywhere and it definitely can be useful in the right context. However, most of them required JavaScript support. CSS Ninja has written a tutorial in order to teach us how to create a Pure CSS Collapsible Tree Menu.

    Solution For Very Long Dropdown Menus

    cssmenu45

    CSS Tricks has come up with a Solution For Very Long Dropdown Menus, and tell us how to implement a technique where as you scroll down, the menu actually moved in an accelerated fashion. Therefore the menu can be accessible even the user has no scroll wheels on his mouse.

    CSS Green Buttons

    cssmenu48

    IzzyMenu.com let us create professional looking CSS menus for your Website easily. You can create your menu with drop down DHTML sub-menu online, without writing a single line of code. And more importantly, it is free. There are many different menu styles for you to choose from. You can customize the font, background, border, padding, margin, link, hover state and etc… anything you can imagine. And after all, you can download the menu and integrate into your website easily.

    CSS Arrow Buttons

    cssmenu49

    IzzyMenu.com let us create professional looking CSS menus for your Website easily. You can create your menu with drop down DHTML sub-menu online, without writing a single line of code. And more importantly, it is free. There are many different menu styles for you to choose from. You can customize the font, background, border, padding, margin, link, hover state and etc… anything you can imagine. And after all, you can download the menu and integrate into your website easily.

    Facebook Style Footer Admin with CSS

    cssmenu51

    The popularity of social media has been booming in the past few years and Facebook definitely has climbed high to the top of the social network rankings. Facebook has many Ajax driven features and applications that are very impressive, and one of the things I particularly like is the footer admin panel, where it neatly organizes frequently used links and applications.

    Horizontal Subnav with CSS

    cssmenu53

    reate a drop down menu with CSS & jQuery, today I would like to go over how to create a simple navigation with a horizontal subnav.In most cases we can achieve this effect purely with CSS, but since we have to attend to our red headed step child aka IE6, we will use a few lines of jQuery to cover all grounds.

    Adobe.com horizontal improved css drop-down menu

    cssmenu56

    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 or even faster when you have the best hosting plan for your site.

    Lwis Celebrity advanced horizontal linear columnar

    cssmenu58

    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 or even faster when you have the best hosting plan for your site.

    Flickr horizontal linear

    cssmenu59

    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 or even faster when you have the best hosting plan for your site.

    jQuery ListNav Plugin easily stylable (via CSS)

    cssmenu60

    This jQuery plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable (via CSS) nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter. Hovering over a letter (optionally) shows a count above the letter, indicating how many items will be displayed if that letter is clicked. Other options give you control over the basic functionality.

    jsTree easy CSS customization

    cssmenu61

    We can create javascript treeview component quickly with jsTree. It accepts various data sources including predefined HTML, JSON and XML. User can open, close, rename, create, delete nodes easily. jsTree supports drag & drop and multiple select as well. And also, jsTree supports easy CSS customization of icons, dots, background, fonts & sizes. So that you can create your own unique javascript treeview component easily.

    Superfish v1.4.8

    cssmenu62

    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 some nice features as well. The reveal of sub-menu is animated, uses a fade-in by default but can be given a custom object to be used in the first argument of the animate function. The animation speed is also customisable but is set to “normal” by default.

    CSSplay

    cssmenu64

    CSSplay has released 15 professional horizontal menus. All using the sliding doors technique so that the menu items will fit the text. These menus work in all the latest browsers. Some of them are Mac style, and some of them are Windows Vista style. You can use them in both personal and commercial projects. You can use these menus as part of your application interface. You can also use it in your “Paid Projects” for your clients.

    CSS+Javascript

    cssmenu65

    Fancy Menu is nothing to do with Flash. it is a custom navigation bar with some cute Javascript effects that will certainly impress your friends. It requires Mootools library, this beauty is contained in 1.5kb. Not only that, but it’s also cross browser (tested on Internet Explorer 6/7, Firefox and Safari) and accessible.

    Drop-Down Menus, Horizontal Style

    cssmenu66

    Anyone who has created drop-down menus will be familiar with the large quantities of scripting such menus typically require. But, using structured HTML and simple CSS, it is possible to create visually appealing drop-downs that are easy to edit and update, and that work across a multitude of browsers, including Internet Explorer. Better still, for code-wary designers, no JavaScript is required! (Actually, a tiny bit of JavaScript is needed, but it’s not what you think.)

    Taming Lists

    cssmenu67

    We’ll use a standard UL containing links to create a dynamic menu with hover effects. In order to obtain the hover effects we’ll let the UL provide the structure, and the anchor styles will provide most of the visual effects.

    cssMenus

    cssmenu68

    It now uses jQuery for the IE stuff, and the CSS has been slimmed down tremendously. Be aware that this new version only works on pages with a valid DOCTYPE.

    Deluxe CSS Dropdowns

    cssmenu69

    In case you haven’t done so yet, go ahead and hover those blue links, okay? Pretty cool, eh? The same tricks employed for the CSS Flyouts demo are used here, but with a lot of obvious modifications. The same Jscript makes IE obey hover on any element, and the “sticky hovering” method is applied here as well.

    CSS tabs with Submenus

    cssmenu70

    There’s lots of talk recently about creating tabbed menus with CSS, but very little about associating submenus to the tabs. Joshua Kaufman and Richard Rutter have done it, but their methods require the creation of separate unordered lists that are only associated with the parent menu by the CSS. If you view the page without the stylesheet — with a screen reader for example — the navigation is confusing and impossible to decipher.

    CSS / DHTML Hybrid Navigation Bar

    cssmenu72

    Inspired by Eric Meyer’s pure CSS menus and the recently re-vamped DevEdge, I created this hybrid of CSS and DHTML, based on a simple unordered-list. Since the core data is HTML, it degrades all the way back to white text on a black background. It’s coded to work up to six levels deep, but this can easily be extended, with just two lines of CSS per additional level. The whole thing, including the list itself, weighs in at less than 10K!

    CSS Menu Generator

    cssmenu73

    Our CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons. As text links are fast becoming preferred over images where search engine optimization is needed, a CSS menu can give the affectiveness of text links with a better look than standard text links. For an example of a CSS menu, look at our navigation on the left.

    Android Dark Menu Template – Horizontal Menu

    cssmenu74

    This template uses background image for submenus with rounded corners. No matter what size of the submenu you have. The background image will always extend to the size of the submenu. The size of the background image should be equal to the size of the largest sub-menu.

    CSS Javascript Menu

    cssmenu75

    Build menus completely based on Cascading Style Sheets (CSS).

    Updated Simple CSS Tabs

    cssmenu76

    The secondary menu is now a nested list, so it is more semantically meaningful. The tabs scale with font sizes much better by using EMs more frequently for sizing. Things are a little more compact, so there’s more room for the tabs. It’s easy to control the width of the whole box (using EMs if you’re clever).

    What is LiveMenu

    cssmenu77

    LiveMenu is a free (open source) multilevel drop-down like menu script, which allows you to create dynamic javascript web menus only with basic knowledge of html and css. It is highly-customizable, easy to use and supports a number of effects. For example, using this script you can create horizontal drop-down slide menus, vertical drop-right fade menus, horizontal drop-up smooth menus etc. For the full list of features and how to use it see the Documentation. Plus there are some Examples where you can see it in action.

    XTended DropDown Menu’s

    cssmenu78

    Did you ever wish you could add your own value instead of having to use those preset values in a dropdown menu? This is a fully stylable dropdown menu with a custom textfield added to solve this problem. It’s completely based on JavaScript, PHP and CSS. The project “Xtended Dropdown Menu” was founded in the context of the course “Webprogramming”.

    Simpler CSS

    cssmenu80

    The plugin creates a new menu item under the Appearance menu in WordPress 2.7 that allows users to enter custom CSS code that will be injected into the section of their blog. The CSS is stored in the blog’s options table and is filtered through a standard PHP function before being outputted, preventing the user from inserting malicious code into the header.

    SuperSlider-Menu

    cssmenu81

    Complete rebuild for version 2.0! This is your Animated menu plugin that uses Mootools 1.2 javascript to form a multi-level collapsable menu widget in your sidebar for your categories and posts. Automatic opener upon page change. Highly configurable, theme based design, css based animations.

    WP Categ Menu

    cssmenu82

    Widget/shortcodes menu(list or select field) based on posts categories/pages(also for custom post types and custom taxonomies). You can display subcategories(one level) and configure CSS, with optional jquery dropdown effect. Based on Sample Hello World Plugin 2 (http://lonewolf-online.net/) by Tim Trott(http://lonewolf-online.net/) and WP e-Commerce Featured Product by Zorgbargle | Phenomenoodle

    PixoPoint Menu Plugin

    cssmenu83

    Adds a new menu to your WordPress powerwed site and allows you to control it’s content via an easy user to interface. Visit the Pixo

    Dropdown Menu CSS Generator

    cssmenu84

    Welcome to the Suckerfish multi-level CSS Generator. By modifying the options below, you can generate a restyled Suckerfish dropdown navigation above. You can copy and paste the CSS generated from the box further down the page.

    css-step-menu

    cssmenu85

    A basic step menu implementation using CSS, based on Code Lindley CSS Step Menu implementation

    Combo Box, Pop Out and Horizontal Slide Out Menu

    cssmenu90

    plugin that let’s you create an auto scrolling combo box. The second element will be a popout menu that reveals its items once it’s clicked, and the third one is going to be a vertical slide out menu.

    CSS3 Styled jQuery Dropdown

    cssmenu97

    I found a really nice and simple jQuery dropdown menu on CSS Tricks and I thought, let’s add some neat style to it.

    Create a stylish HTML5 template from scratch

    cssmenu103

    HTML5 is certainly one of the latest buzzwords in the web community. It isn’t something new anymore and we’ve already seen how cool it is. Features like simplified doctype, more semantic markup, input types and placeholders are just some of the reasons you’d like to use a HTML5 template.

    Garage Door Style Menu

    cssmenu106

    A garage door style menu is where an image (the “door”) slides up to reveal something behind it. We’ll do this in two ways, with CSS3, and with jQuery. Then we’ll combine them into a progressive enhancement way to handle it.

    Convert a Menu to a Dropdown for Small Screens

    cssmenu107

    The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu.

    The MoveUp Menu

    cssmenu108

    As you scroll your mouse up and down the visible area, the menu scrolls itself to reveal more menu items and highlight the link the mouse is currently over.

    Learning jQuery: Fading Menu — Replacing Content

    cssmenu109

    Instead of thinking about CSS as page layout and a way to style your page when it loads, you can use in animation and change it on-the-fly to react to events that happen on your page. Take for example a menu. You can take the “click” event that happens when clicking on a menu to do lots of stuff.

    Simple jQuery Dropdowns

    cssmenu110

    Very stripped down code and minimal styling, yet still have all the functionality typically needed. Here are the features: Cross-browser compatible (even IE 6) Multi-level and retains “trail” Very minimal styling (easy to adapt) Very minimal JavaScript (short bit of jQuery)

    Apple iTunes-Like CSS Menu

    cssmenu112

    Developer Mark Alldritt posted a pretty nice bit of code (XCode project) for making nice Apple-Like menus in applications. I thought I would try to replicate this same idea with CSS. It worked out fairly well, check out the screenshot:

    Styled Popup Menu

    cssmenu113

    This idea is from Veer.com and how they handle the dropdowns for things like T-Shirt sizes. Thank you to Dennis Sa.

    CSS Menu With Rollover Images

    cssmenu114

    The code is really clean and simple and should be easy to understand. Feel free to download the example and do whatever your little hearts desire with it. The .ZIP includes the original Adobe Photoshop file for edit-age.

    Simple Tabbed Menu Using Sliding Doors (Downloadable)

    cssmenu115

    Uses text so the menu is accessible and search engine friendly. Uses sliding doors so the text is resizeable. The “current” tab has a different background and bleeds through the border to connect it to the content. Background was found at Vecteezy. View source to see the simple markup. Click here to see the CSS.

    CSS MENU TALKING

    cssmenu116

    CSS MENU TALKING

    Easy to Style jQuery Drop Down Menu Tutorial

    cssmenu118

    The main objective is to make it as simple as possible, with some little jQuery effect and easy to customize/ apply different style on it.

    Freebies

    Vivid menu navigation

    cssmenu119

    vivid menu navigation

    cssmenu120

    Profile menu

    cssmenu121

    Dark pop-up menus

    cssmenu122

    Sleek dropdown menu

    cssmenu123

    Mega dropdown menu

    cssmenu124

    Vertical Navigation Menu

    cssmenu125

    Mini Drop-Down Menu

    cssmenu126

    Dark Navigation Menu

    cssmenu127

    Simple Tabbed Navigation

    cssmenu128

    Dark Button Navigation

    cssmenu129

    Dark Button Navigation menu

    cssmenu130

    Simple Dark Navigation Menu

    cssmenu131

    Clean & Simple Navigation Menu

    cssmenu132

    3 Stylish Navigation Menus

    cssmenu133

    Minimalist Nav Menu In 7 Colors

    cssmenu134

    Pagination Menus

    cssmenu135

    2 Clean Drop Down Navigation’s

    cssmenu136

    Navigation Pack

    cssmenu137

    Accordion Menu

    cssmenu138

    Admin Menu with Drop Down

    cssmenu139

    Settings Menu

    cssmenu140

    iPad Menu

    cssmenu141

    Ribbon Menu

    cssmenu142

    Menu Drop Down Interface

    cssmenu143

    Web Application Menu

    cssmenu144

    Glossy Menu

    cssmenu145

    Menu UI

    cssmenu146

    Simple black UI menu

    cssmenu147

    Alpha menu style 2

    cssmenu148

    Dropdown Navigation Bar

    cssmenu149

    Alpha menu style1

    cssmenu150

    Swift Navigation

    cssmenu151

    Collection of the colorful web elements

    cssmenu152

    Drop-down navigation bar

    cssmenu153

    Drop Down Menu

    cssmenu154

    Menu 01

    cssmenu155

    Elegant Dark Crystal Bar

    cssmenu156

    Ribbon menu

    cssmenu157

    Apple menu

    cssmenu158

    Navigation

    cssmenu159

    Navigation Menu

    cssmenu160

    Glossy Menu

    cssmenu161

    Menu

    cssmenu162

    Transparent Menu

    cssmenu163

    Smooth Blue Navigation

    cssmenu164

    Texture Menu

    cssmenu165

    Green Menu

    cssmenu166

    School Navigation

    cssmenu167

    UI Elements

    cssmenu168

    Horizontal Dropdown Menu Bar

    cssmenu169

    Elegant Ribbon Menu

    cssmenu170

    DailyButton Menu

    cssmenu171

    Simple navigation menu

    cssmenu172

    Pretty dropdown menu

    cssmenu173

    Slick horizontal menu

    cssmenu174

    Dark Inset Category Selector

    cssmenu175

    Free Clean & Classy Navigation Menu

    cssmenu176

    ThemeForest Inspired Admin Menu

    cssmenu177

    Drop Down Menus

    cssmenu178

    Horizontal CSS Menus

    cssmenu179

    CSS Menu Generator

    cssmenu180


54 Responses to “CSS menu, 180 scripts, plugins and freebies”

  1. Impressive collection, thanks for sharing and also for including some of my tutorials.

    • Red, you guys are doing a great job, you are on my google reader ;) I’ll love to have a guest post by you, even a small one :)

  2. Creative menu design bars!!! 

  3. Thanks for Sharing!! Very useful blog. Specially for Designers its a wonderful tips.
    Because if the website are not visually attractive and user friendly. Consequently they fail to generate a good volume of traffic.

    Indirectly it effects the ranking of the website.

  4. Anonymous
    December 6th

    Nice informations for me personally. This page possesses handy. I would like to have got useful content such as your own within my website. Wrote this time putting up facts.

  5. Thanx for sharing this nice collection.

  6. Cool Website Design
    December 9th

    I savor, result in I came across precisely what I used to be taking a look for. You’ve wrapped up our four working day time-consuming search! Jesus Thank you male. Have got a wonderful working day. Bye

  7. really great tutorials .. this is the best site for designs :)

    • Always glad to see that our posts are useful for our visitors. Be on the lookout for our upcoming posts. Best regards!

  8. cynthia nelson
    December 20th

    There are so many CSS menu bar that are really good. The concept is good.

  9. very creative and unique designs, it’s impressive.

  10. This post will be an excellent resource for me this quarter — thanks! My site has been based on an older FrontPage template, and has been overdue for a overhaul to a CSS XHTML format, getting rid of the flash, and incorporating a content-first structure.

  11. Thank you, don’t miss our future ones !

  12. thanks

    • Designer
      May 15th

      You are welcome. Enjoy!

  13. 180 #CSS fresh menus, including #scripts, #freebies & plugins http://t.co/qzZGnSIy RT please by @webdesignshock

  14. 180 #CSS fresh menus, including #scripts, #freebies & plugins http://t.co/RgEYrGR1 RT please by @webdesignshock

  15. 180 #CSS fresh menus, including #scripts, #freebies & plugins http://t.co/53aVXkwy RT please by @webdesignshock

  16. 180 #CSS fresh menus, including #scripts, #freebies & plugins http://t.co/CwscqWNI RT please by @webdesignshock

  17. 180 #CSS fresh menus, including #scripts, #freebies & plugins http://t.co/YlmkQP4q RT please by @webdesignshock

  18. 180 #CSS fresh menus, including #scripts, #freebies & plugins http://t.co/tfnw9WQe RT please by @webdesignshock

  19. CSS menu, 180 scripts, plugins and freebies http://t.co/9oA4LXhs vía @webdesignshock

  20. 180 #CSS fresh menus, including #scripts, #freebies & plugins http://t.co/v6TqRxgU RT please by @webdesignshock

  21. CSS menu, 180 scripts, plugins and freebies http://t.co/kmUZtxSM via @webdesignshock

  22. 180 #CSS fresh menus, including #scripts, #freebies & plugins http://t.co/4m6a0qG4 RT please by @webdesignshock

  23. RT @EtnasSoft: Necesitas un menú hecho con CSS? Aquí tienes 180 recursos… http://t.co/B01lfD5e

  24. 180 #CSS fresh menus, including #scripts, #freebies & plugins http://t.co/wA0thgSo RT please by @webdesignshock

  25. RT @EtnasSoft: Necesitas un menú hecho con CSS? Aquí tienes 180 recursos… http://t.co/B01lfD5e

  26. CSS menu, 180 scripts, plugins and freebies http://t.co/dw2oYOqr via @webdesignshock #usernews

  27. CSS menu, 180 scripts, plugins and freebies http://t.co/sBJcmGrQ vía @webdesignshock // Recomendado para los amantes del #CSS.

  28. CSS menu, 180 scripts, plugins and freebies http://t.co/Od28Hqm1 via @webdesignshock

  29. CSS Menu, 180 Scripts, Plugins And Freebies http://t.co/h0P36pjf

  30. Excelente repertorio de recursos para desarrollo web.
    CSS menu, 180 scripts, plugins and freebies http://t.co/zDriO6O6 vía @webdesignshock

  31. Esto si que es magnifico!! CSS menu, 180 scripts, plugins and freebies || http://t.co/iYi9YfQN #Webdesign #jQuery #Diseno

  32. RT @Reckless_CL: Esto si que es magnifico!! CSS menu, 180 scripts, plugins and freebies || http://t.co/iYi9YfQN #Webdesign #jQuery #Diseno

  33. CSS menu, 180 scripts, plugins and freebies http://t.co/rtl5wMdt vía @webdesignshock

  34. CSS menu, 180 scripts, plugins and freebies http://t.co/pUql31Kv vía @webdesignshock

  35. CSS menu, 180 scripts, plugins and freebies http://t.co/G9bfFBND via @webdesignshock

  36. CSS Menu, 180 Scripts, Plugins And Freebies http://t.co/ccarDsdd

  37. CSS menu, 180 scripts, plugins and freebies http://t.co/S4rXVP6H via @webdesignshock

  38. 180 #CSS fresh menus, including #scripts, #freebies & plugins http://t.co/VQoOD6X3 RT please by @webdesignshock

  39. I wanna see this asap! RT @sunalinirana: 180 #CSS fresh menus, including #scripts, #freebies & plugins http://t.co/itHBPeKh

  40. Mega colección de menús para web #css #html #diseñoweb #freebies http://t.co/lVJp8Cf9

  41. CSS menu, 180 scripts, plugins and freebies http://t.co/hxZlnygQ via @webdesignshock

  42. CSS menu, 180 scripts, plugins and freebies http://t.co/IYgiSevC #design #useful

Leave a Reply

Comments

*