JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<h1>Pos. Based Jquery Select Menu</h1>

<div class="highcharts-title">Arduino 1</div>
<div class="controllerSelect">
    <a href="#" class="showList">
        <span class="fa fa-bars"></span>
    </a> 
    <div class="controllerList">
        <ul>
            <li>Arduino 1</li>
            <li>Arduino 2</li>
            <li>Arduino 3</li>
        </ul>
    </div>
</div>

SCSS

.highcharts-title {
    text-align: center;
    display:inline-block;
    width:100px;
    margin:0 auto;
}
body{
    text-align: center;
}
.controllerSelect {
    position:fixed;
    top:0;
    left:0;
    font-size:80%;
}
.showList {
    display:block;
    width:100%;
    text-align: left;
}
.controllerList {
    width:80px;
    /* height:90px; */
    background: red;
    display:none;
    background: #fff;
    border:1px solid #999;
    box-shadow:0 0 5px #e3e3e3;
    padding:5px;
    ul li {
        padding:4px 0 ;
        &:hover {
            /* background:#999; */
                font-weight:bolder;
                color:#22A7F0
        }
    }
}

JavaScript

// set the offset var
var offset = $('.highcharts-title').offset();
var elmWidth = $('.highcharts-title').width();

// check the pos
alert(offset.left + " " + offset.top);

//move the select box
$('.controllerSelect').css({
    "left": offset.left + elmWidth +"px" ,
    "top": offset.top + "px",
});

//show on click
$('.showList').click(function(){
    $('.controllerList').toggle(500);
})