Fancy Skewed Dropdown Menu With jQuery And CSS3 - UnusualMenu
File Size: | 2.91 KB |
---|---|
Views Total: | 5220 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

UnusualMenu is a fancy, animated dropdown menu plugin for jQuery that uses CSS3 2D transforms for the pretty cool 'Skew' effect when the menu is opened on hover.
How to use it:
1. Create the dropdown menu from a nested nav list like this:
<nav> <ul> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Popular</span></a></li> <li> <a href="#"><span>Categories</span></a> <ul class="hidden"> <li><a href="#"><span>Category 1</span></a></li> <li><a href="#"><span>Category 2</span></a></li> <li><a href="#"><span>Category 3</span></a></li> <li><a href="#"><span>Category 4</span></a></li> </ul> </li> <li><a href="#"><span>About</span></a></li> <li><a href="#"><span>Contact</span></a></li> </ul> </nav>
2. The core CSS rules for the skewed dropdown menu:
nav { display: flex; justify-content: center; } ul { list-style: none; } nav > ul > li { display: inline-block; float: left; box-sizing: border-box; width: 180px; margin-top: 50px; } a { text-decoration: none; background-color: #2d3f56; display: block; color: white; width: 180px; padding: 13px 0; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 14px; box-sizing: border-box; } a:hover { background-color: #f93e3e; } nav > ul > li > a { transform: skew(20deg); } nav > ul > li > a > span { display: block; transform: skew(-20deg); } .hidden li:nth-child(odd) a { transform: skew(-25deg); background-image: linear-gradient(185deg, rgba(0,0,0,0.5), #2d3f56 30%) } .hidden li:nth-child(even) a { transform: skew(25deg); background-image: linear-gradient(175deg, rgba(0,0,0,0.5), #2d3f56 30%) } .hidden li:nth-child(even) span { display: block; transform: skew(-25deg); } .hidden li:nth-child(odd) span { display: block; transform: skew(25deg); } .hidden li:nth-child(even) a { position: relative; left: 5px; width: 200px; } .hidden li:nth-child(odd) a { position: relative; left: -5px; width: 200px; } .hidden { display: none; } .hidden li > a { position: absolute; }
3. Load jQuery library and the jQuery UnusualMenu plugin at the end of the document. That's it.
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script> <script src="unusual menu.js"></script>
This awesome jQuery plugin is developed by YevhenKuraiev. For more Advanced Usages, please check the demo page or visit the official website.