12 Beautiful And Inspiring Menu HTML CSS Ideas

1. Elusive CSS3 Mega Menu

featured image

Elusive CSS3 Mega Menu

A Pure HTML5/CCS3 Mega CSS menu dropdown that fits well with any website or webpage. There are many key features which make this menu look extremely simplistic, yet very complex.Only two main files needed, a CSS file and an HTML file. There are only two changes to be made to change the colour scheme within the CSS file.

More Details

2. Apycom jQuery Menus

Apycom jQuery Menus

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

More Details

3. Navion - Metro Navigation Menu Accordion Switcher

featured image

Navion – Metro Navigation Menu Accordion Switcher CSS

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. Navion CSS can be customized easily because it is only HTML and CSS code.Three Main HTML navigation menu Sizes.Sub Menu with Dropdown and Metro Style.Tab in Sub Menu.If you like to see the plugin documentation you can check it here: Navion CSS Documentation

TileBox – Modern Responsive LightBox CSS

Tabion – Metro Tab Accordion Switcher CSS

OneMenu – Responsive Metro UI Menu

MenuStation – Unlimited Responsive Menu

Metro Navigation Bar CSS

More Details

4. Pull-Out Content Panel

featured image

The custom scrollbars packed in this menu will automatically appear when needed and if you need to add even more content, you can use the infinite carousel to scroll between each part of the panel. The package contains 6 HTML files showing different possibilities or usages of this panel and all the code is organized, indented and easy to read. This menu has been tested on many devices and browsers to ensure a maximum compatibility : Internet Explorer, Firefox, Chrome, Opera, Safari have successfully passed the tests.

More Details

5. DeepMenu - multi level navigation menu

featured image

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 CSS dropdown menu tutorial menu.JS, CSS and HTML files

More Details

6. Universal Responsive Mega Menu

featured image

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 jQuery sticky footer panel (with mega “drop-ups”) using the exact same markup as the “standard” mega menu. 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. Fully Responsive Menu

Standard Top Menu

Sticky (or fixed) Top Menu

The package contains 2 folders : “Responsive” and “Non-Responsive” so the menu is ready to be included on any type of website. For each version of the menu, responsive and non-responsive, you have 6 HTML files with various examples of what you can do with the menu, from a simple navigation bar without drop downs to a combination of 2 mega menus on a same page. This menu has been tested on many devices and browsers to ensure a maximum compatibility : Internet Explorer, Firefox, Chrome, Opera, Safari have successfully passed the tests.The whole menu relies mainly on CSS, it means that if Javascript is disabled, most of the menu will work. Be sure to test the demo with different browsers or devices to make sure that the menu meets your requirements.I try to regularly update my products based on the feedback I receive, so if you find any kind of bug, I’ll do my best to update the menu as soon as possible. I’ve also created a website that compares and filters my different menus by options / features, Mega-Menu. If you’re still not sure about the menu that would fit into your project, you can contact me at any time from my profile page.

More Details

7. Long Shadow Menu

featured image

Shady is a Responsive, flat long shadow CSS menu.Heavily commented HTML for easy understanding of the customization process

More Details

8. Interactive Menu with CSS3 and HTML5

featured image

Documentation in HTML.

More Details

9. Narsis CSS3 Glassy Menu

featured image

Narsis Glassy Menu is highly customizable CSS3 animation effects for image hover.These Menu is carefully designed with attention to the details.This item contain 230 Different html demo file !

We use FontAwesome for icons so you can use more than 360 icons for your menu.

More Details

10. Responsive 3D CSS3 Menu

featured image

This drop menu code is accordion menu pure CSS3 code.Ready to display any HTML code inside a menu tab

More Details

11. Metro Style CSS3 Menu

featured image

Metro Style CSS3 Menu

A Pure HTML5/CCS3 Metro Style Navigation Menu that fits well with any website or webpage. There are many key features which make this menu look extremely simplistic, yet very complex.Only two main files needed, a CSS file and an HTML file. There are only two changes to be made to change the colour scheme within the CSS file.

More Details

12. CSS3 Accordion and Toggle Widget Kit

featured image

The accordion and toggle is built with CSS3 and HTML and does not use any Javascript.in all major browsers including a CSS fallback for IE8.All HTML Content like Videos, Forms, Images, Text, iFrames

Customize scrollbars with css on fixed height accordions (not in Firefox)

Cross Browser with a vertical navigation menu CSS Fallback for IE8

- Ability to support all HTML Content like video, iframes, forms, images and text

More Details

13. TAKO Vertical Responsive Dropdown Menu

featured image

This it’s a menu with 3 columns of pages with a very good design and color combinations and its compatible with mobile devices! Its very efficient for people who want a simple responsive menu with modern design.- We added the Mega-Menu design with the posibility to add forms, images and video in the dropdown!

- Also we added 360+ vector icons to put them in your menu items!

Pure CSS3 and HTML

Easy to add new menu items

Mega-Menu Content:

- Mega-menu Content (complete forms, images, video and more!)

More Details