Tendina, a super-simple jQuery plugin for dropdown side menus

I have just released the first beta version of my jQuery plugin Tendina.

image

Tendina is a easy-to-use jQuery plugin to rapidly build dropdown side menus.

Its usage is very simple and straightforward: you just need a basic unordered list menu markup and a link to jQuery and the plugin. For example:

    
<body>
<ul class="dropdown">
<li>
<a href="#">Menu 1</a>
<ul>
<li><a href="#">Submenu 1</a></li>
</ul>
</li>
<li>
<a href="#">Menu 2</a>
<ul>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 2</a></li>
</ul>
</li>
<li>
<a href="#">Menu 3</a>
<ul>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
</ul>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="../tendina.js"></script>
<script>
$('.dropdown').tendina()
</script>
</body>

As you can see, you just need to call the function on your elements and… That’s it! The plugin will handle all the interactions and leave all the styling to you, so you don’t have to override useless CSS classes.

Tendina will also work on dinamically appended elements, and additionally add a “selected” class to expanded elements.

Check it out on Github or on this demo CodePen!

Leave a Reply

wpDiscuz