SVG Triangle Indicator For Active Menus - jQuery triangle-menu

triangle-menu is a jQuery plugin that adds an SVG based triangle indicator to active menu items using the Clip Path Polygon plugin.

How to use it:

1. Create a normal navigation menu using any elements such as table, unordered list, DIV, etc.

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

2. Load the jQuery triangle-menu plugin and other required JavaScript files in the document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="build/clip-path-polygon.min.js"></script>
<script src="build/triangle-menu.min.js"></script>

3. Get the current menu item you selected using the activate callback.

<span class="selected-text">Selected: 1</span>

$('.triangle-menu').triangleMenu({
  activate: function(e, index) {
    $('.selected-text').html('Selected: ' + index);
  }
});

4. Customize the triangle indicator with the following settings.

$('.triangle-menu').triangleMenu({

  // triangle size in pixels
  triangleWidth: 50,
  triangleHeight: 20,

  // item selector
  menuItemSelector: '.menu-item'
  
});

---

This awesome jQuery plugin is developed by andrusieczko. For more Advanced Usages, please check the demo page or visit the official website.