Great overview of beautiful multi-level menus with codepen

Habr, hello!

Coden has many good solutions from various experts, and I believe that the best of them should be collected in one place. Therefore, 2 years ago, I began to save interesting scripts on various topics on my computer.

I used to upload them in the product group of the cloud IDE mr. Gefest , these were assemblies of 5-8 solutions. But now I began to accumulate 15-30 scripts in various topics (buttons, menus, tips and so on).

Such large sets should be shown to a greater number of specialists. Therefore, I post them on Habr. I hope they will be useful to you.

In this review we will look at multi-level menus.

Flat horizontal navigation



Beautiful navigation bar with a smoothly appearing submenu. The code is well structured using js. Judging by the opportunities used, it works in ie8 +.
http://codepen.io/andytran/pen/kmAEy

Material Nav Header w / Aligned Dropdowns



Adaptive link bar with a two-column submenu. Everything is done in css and html. Used css3 selectors that are not supported in ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
 
Smooth Accordion Dropdown Menu A



stylish vertical menu with smoothly expanding elements. Uses transition, transform js code.
http://codepen.io/fainder/pen/AydHJ
 
Pure CSS Dark Inline Navigation Menu



Dark vertical navigation bar with icons from ionicons. Applied javascript. In ie8, it will most likely work without animation.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
 
Pure CSS3 Mega Dropdown Menu With Animation





Stylish menu with two output formats: horizontal and vertical. Used icons and css3 animation. In IE8, it will definitely look awful, but in other browsers everything is cool.
Link to the vertical: http://codepen.io/rizky_k_r/full/sqcAn/
Link to the horizontal: http://codepen.io/rizky_k_r/pen/xFjqs
 
CSS3 Dropdown Menu A



horizontal menu with large elements and a drop-down list of links. Clean and minimalistic code without js.
http://codepen.io/ojbravo/pen/tIacg
 
Simple Pure CSS Dropdown Menu



A simple yet stylish horizontal menu. Used font-awesome. Everything works on css and html, without js. In ie8 will work.
http://codepen.io/Responsive/pen/raNrEW
 
Bootstrap 3 mega-dropdown menu A



great solution for online stores. Displays several levels of categories and large images (for example, stock item). It is based on boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
 
Flat Navigation



Stylish navigation bar with a smooth submenu. In older browsers, it will display with problems.
http://codepen.io/andytran/pen/YPvQQN
 
3D nested navigation A



horizontal menu with very cool animations without js!
http://codepen.io/devilishalchemist/pen/wBGVor
 
Responsive Mega Menu - Navigation



Horizontal responsive menu. It looks good, but the mobile version is a little "lame." Used css, html and js.
http://codepen.io/samiralley/pen/xvFdc
 
Pure Css3 Menu



Original menu. With simple and clean code without js. Use for wow effects.
http://codepen.io/Sonick/pen/xJagi
 
Full CSS3 Dropdown Menu A



colorful drop-down menu with one level of nesting. Icons from font-awesome, html and css are used.
http://codepen.io/daniesy/pen/pfxFi
 
Css3 only dropdown menu



A fairly good horizontal menu with three levels of nesting. Works without js.
http://codepen.io/riogrande/pen/ahBrb
 
Dropdown Menus



Minimalistic menu with the original effect of the appearance of a nested list of items. I am glad that this solution is also without javascript.
http://codepen.io/kkrueger/pen/qfoLa
 
Pure CSS DropDown Menu



A primitive but effective solution. Only css and html.
http://codepen.io/andornagy/pen/xhiJH
 
Pull Menu - Menu Interaction Concept



An interesting menu concept for a mobile phone. I haven’t seen this before. Uses html, css and javascript.
http://codepen.io/fbrz/pen/bNdMwZ
 
Make Simple Dropdown Menu



Clean and simple code, no js. In ie8 it will work exactly.
http://codepen.io/nyekrip/pen/pJoYgb
 
Pure CSS dropdown [work for mobile touch screen]



The solution is not bad, but too many classes are used. I am glad that there is no js.
http://codepen.io/jonathlee/pen/mJMzgR
 
Dropdown Menu A



nice vertical menu with minimal javascript code. JQuery is not used!
http://codepen.io/MeredithU/pen/GAinq
 
CSS 3 Dropdown Menu A



horizontal menu with additional signatures can beautify your site. The code is simple and straightforward. Javascript is not applicable.
http://codepen.io/ibeeback/pen/qdEZjR
 
KVdKQJ (the author thought about the name for a very long time)



A beautiful solution with a lot of code (html, css and js). Invented 3 submenu formats. For online stores, the solution is well suited.
http://codepen.io/martinridgway/pen/KVdKQJ
 
CSS3 Menu Dropdowns (special solution)!



Dark horizontal menu with thirteen (13) animation options! Be sure to advise you to read it, useful in everyday life.
http://codepen.io/cmcg/pen/ofFiz
 
P.S.
I hope you enjoyed the assembly of 23 solutions. If you want to continue to read them, then go through the bottom survey.
Everyone enjoy the work.