triangle-menu

This is a jQuery plugin that creates a dynamic menu with a triangle pointer based on clip-path.

Examples

Installation

Node

$ npm install triangle-menu --save

Then require it:

require('triangle-menu');

and use:

$myElement.triangleMenu();

Browser

Download triangle-menu.min.js (minified) or menu-triangle.js (dev) and add it to you HTML file:

<script src="jquery.min.js"></script>
<script src="clip-path-polygon.min.js"></script>
<script src="triangle-menu.min.js"></script>

Remember about dependencies (http://jquery.com/download and clip-path-polygon)!

Compilation

If you want to compile the whole package and run unit tests, type npm install and grunt.

Usage

Definition: triangleMenu(options) where options are not required.

You have to have a certain HTML structure to use it. All the items in the menu have to have .menu-item class.

Options

| Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | triangleHeight | number | 20 | Height of the clipped triangle in px | | triangleWidth | number | 50 | Width of the clipped triangle in px | | menuItemSelector | string | .menu-item | Selector of the submenu item | | activate(event, index) | function | nothing | The callback function that is called when the mouse hovers over a .menu-item element; index argument is the index of .menu-item element and it's numerated from 1 |

Example use:

You can find the working examples here.

<table class="triangle-menu">
    <tbody>
        <tr>
            <td class="menu-item">1</td>
            <td class="menu-item">2</td>
            <td class="menu-item">3</td>
            <td class="menu-item">4</td>
        </tr>
    </tbody>
</table>

and in your javascript file:

$('.triangleMenu').triangleMenu();

you can add some css to see the effects:

.triangle-menu {
  height: 200px;
  width: 600px;
  background: green;
  text-align: center;
}

###More examples

With Bootstrap2:

<div class="row-fluid triangle-menu">
    <div class="row4 my-menu-item">1</div>
    <div class="row4 my-menu-item">2</div>
    <div class="row4 my-menu-item">3</div>
</div>

Using options:

$('.triangle-menu').triangleMenu({
  triangleWidth: 10,
  triangleheight: 5,
  menuItemSelector: '.my-menu-item',
  activate: function(event, index) {
    console.log("You hovered over ", index, " element");
  }
});
```