Tendina is a simple jQuery plugin that helps you build dynamic,
interactive side-menus in seconds.

Usage

The basic Tendina use case setup consists in 3 simple steps:

1. Include jQuery and Tendina in your page (heh)

<!-- Shake your </body> -->
<script src="path/to/jquery-1.11.1.min.js"></script>
<script src="path/to/tendina.min.js"></script>

2. Set up your menu markup

The markup must be formatted as an unordered list with links, like this:

<ul id="my-menu">
  <li><a href="#">Rock</a>
    <ul>
      <li><a href="#">Garage Rock</a>
        <ul>
          <li><a href="#">The Hives</a></li>
        </ul>
      </li>
      <li><a href="#">Progressive Rock</a>
        <ul>
          <li><a href="#">King Crimson</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Don't forget anchor tags!
Tendina uses them for DOM traversing, so don't forget to add them (even if they don't have any href).

3. Summon Tendina

// Wuzzah!
$('#my-menu').tendina()

We're done! Let's chill out for a sec now, it's been hard.

Cool things about Tendina

  • It's lightweight (~3kb minified)
  • It's very easy to use, still has some neat customization options and features
  • Supports infinite nesting
  • Mobile friendly
  • Handles dinamically added elements (you can build menus from dynamic JSON trees, yay!)

Browser support

Tendina should work with most browsers, including IE7+ (it also depends from which jQuery you're using).

Styling

Tendina's purpose is to handle menu interactions in a simple, flexible way. As a result, Tendina comes with no styles at all – this means you don't need to override useless CSS classes, and you have total control on the styling of your menu.

Examples

Tendina comes with some options and methods that should make your life easier – here are some examples you could find interesting.

To see the full option and method list, head over to GitHub.

Default example

Open on hover

Active menu example

Download & Install

Via Bower

If you use Bower, you can install it from the command line:

$ bower install tendina

Via manual install

You can download Tendina packed as a .zip archive from here, or you can visit the GitHub project page and fork it.

Any questions or problems?

Hit me up on Twitter or open an issue on GitHub.

Want to contribute?

Think something might be better than it is now, you feel something is missing or you just want to hack with some CoffeeScript?

You're welcome! fork Tendina on Github!