triangle-menu

hosted on GitHub
1 2 3 4
Selected: 1 
<table class="triangle-menu">
  <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>
</table>
<span class="selected-text">Selected: 1</span>

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

.triangle-menu {
  height: 100px;
  width: 400px;
  background: green;
  text-align: center;
}
1
2
3
4
Selected: 1 
<div class="row-fluid triangle-menu">
  <div class="span3 menu-item">1</div>
  <div class="span3 menu-item">2</div>
  <div class="span3 menu-item">3</div>
  <div class="span3 menu-item">4</div>
</div>
<span class="selected-text">Selected: 1</span>

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

.triangle-menu {
  height: 100px;
  width: 400px;
  background: green;
  text-align: center;
}
.menu-item {
  height: 100%;
}
1
2
3
4
Selected: 1 
<div class="row-fluid triangle-menu">
  <div class="span3 my-menu-item">1</div>
  <div class="span3 my-menu-item">2</div>
  <div class="span3 my-menu-item">3</div>
  <div class="span3 my-menu-item">4</div>
</div>
<span class="selected-text">Selected: 1</span>

$('.triangle-menu').triangleMenu({
  triangleWidth: 5,
  triangleHeight: 25,
  menuItemSelector: '.my-menu-item',
  activate: function(e, index) {
    $('.selected-text').html('Selected: ' + index);
  }
});

.triangle-menu {
  height: 100px;
  width: 400px;
  background: green;
  text-align: center;
}
.my-menu-item {
  height: 100%;
}