triangle-menu 
This is a jQuery plugin that creates a dynamic menu with a triangle pointer based on clip-path.
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"); } }); ```
