JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<div class="purorightc">
  <ul>
    <li>
      <div class="navicon activen"><i class="ion-navicon"></i></div>
      <div class="contnavicon" style="display: none;">меню</div><span></span>
    </li>
    <li>
      <div class="navicon activen"><i class="ion-navicon"></i></div>
      <div class="contnavicon" style="display: none;">меню2</div><span></span>
    </li>
    <li>
      <div class="navicon activen"><i class="ion-navicon"></i></div>
      <div class="contnavicon" style="display: none;">меню3</div><span></span>
    </li>
    <li>
      <div class="navicon activen"><i class="ion-navicon"></i></div>
      <div class="contnavicon" style="display: none;">меню4</div><span></span>
    </li>
  </ul>
</div>

CSS

li {
    border: 1px solid #900;
    background: #CCC;
    width: 300px;
    height: 70px;
    position:relative;
}
.contnavicon{display:none;position:absolute;}

JavaScript

$('.purorightc > ul > li').mousedown(function(event){
    var menuic = $(this).find('div.navicon'); 
    var menuli = $(this).find('div.contnavicon'); 
    event.preventDefault();
    if(event.button == 0){
        menuli.hide();
        menuic.removeClass('active');
    } else if(event.button == 1){
        menuli.hide();
        menuic.removeClass('active');
    } else if(event.button == 2){
        menuli.show();
        menuic.addClass('active');
    }
}).bind("contextmenu",function(e){
    return false;
  });

var offset = $('.purorightc > ul > li').offset();
var mouse = [];
$('.purorightc > ul > li').mouseenter(function(event) {
  mouse = [event.pageX, event.pageY];
    $(this).find('div.contnavicon')
    .css( "left", (mouse[0] - offset.left) + "px" )
    .css( "bottom", "0" )
       
});