Create awesome animated dropdown menu using Sweet Dropdown jQuery Plugin

0 290

In my new jQuery post I found awesome jQuery plugin to create fancy animated dropdown menu. With the help of this plugin you can create dropdowns in any direction with any kind of content. It can trigger dropdown menu on button click and you can also set the direction of menu with predefined icons etc.

Integration Sweet Dropdown Menu

Libraries

Include required libraries on page to use plugins features. don’t forget to include jquery core library on page because Sweet Dropdown dependent on jquery core lib.

<!--CSS-->
<link rel="stylesheet" href="path/to/sweetdropdown/dist/min/jquery.sweet-dropdown.min.css" />
 
<!--JS-->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="path/to/sweetdropdown/dist/min/jquery.sweet-dropdown.min.js"></script>

HTML

Creating basic dropdown menu on button click.

<div class="dropdown-menu dropdown-anchor-top-left dropdown-has-anchor" id="dropdown-standard">
	<ul>
		<li><a href="#">Item 1</a>></li>
		<li><a href="#">Item 2</a></li>
		<li class="divider"></li>
		<li><a href="#">Item 3</a></li>
	</ul>
</div>
 
<button data-dropdown="#dropdown-standard">Try out!</button>

Set the custom menu positions.

<div class="dropdown-menu dropdown-anchor-left-center dropdown-has-anchor" id="dropdown-standard">
	<ul>
		<li><a href="#">Item 1</a>></li>
		<li><a href="#">Item 2</a></li>
		<li class="divider"></li>
		<li><a href="#">Item 3</a></li>
	</ul>
</div>
 
<button data-dropdown="#dropdown-left-center">Try out!</button>

See live demo and download source code.

DEMO | DOWNLOAD

Leave A Reply

Your email address will not be published.