JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="contact-menu">
  <button class="cm_button cm_call">Call</button>
  <button class="cm_button cm_more">></button>

  <!-- on button.more click show ul.options-->
  <ul class="cm_options">
    <li role="new-message">SMS</li>
    <li role="new-chat">Chat</li>
  </ul>
</div><!-- end of .contact-menu -->



<div class="contact-menu">
  <button class="cm_button cm_call">Call</button>
  <button class="cm_button cm_more">></button>

  <!-- on button.more click show ul.options-->
  <ul class="cm_options">
    <li role="new-message">SMS</li>
    <li role="new-chat">Chat</li>
  </ul>
</div><!-- end of .contact-menu -->

CSS

/*resets*/

html, body{
  height: 100%;
  margin: 0; padding: 0;
}

body {
  font: 14px helveticaneue;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

button{
  cursor: pointer;
}

/*unique styling*/

.contact-menu{
  z-index:3;
  position: relative;
  float: left;
}

.contact-menu:after {
  content: "";
  display:block;
  visibility: hidden;
  height: 0;
  clear: both;
}

.cm_button {
  float: left;
  margin: 0px;
  border: none;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.40, #CBDB26), color-stop(0.70, #9FD136));
  color: white;
  font: bold 12px "HelveticaNeue"; 
}

.cm_button:hover {
  background-image:-webkit-linear-gradient(top, rgba(185,233,81,1) 30%,rgba(223,237,71,1) 60%); 
}

.cm_button:active, .cm_more-active {
  background-image :-webkit-linear-gradient(top, rgba(176,198,128,1) 30%,rgba(194,201,121,1) 60%);
}

.cm_call{
  padding: 5px 26px;
  border-radius: 12px 0  0 12px/ 5px 0 0 5px;
  box-shadow: inset 1px 1px 3px  #333;
}

.cm_more {
  padding: 5px 10px;
  border-radius: 0 12px  12px 0/ 0 5px 5px 0;
  box-shadow: inset -1px 1px 3px #333;
}

.cm_options {
  display: none;
  position: absolute;
  top: 100%;
  min-width: 101px;
  margin-top:1px;
  border-radius: 9px;
  background-color: #ccc;
  font-size: 12px;
  text-transform: uppercase;
  color:#777;
}

.cm_options li {
  cursor: pointer;
  padding: 5px 10px; 
}

.cm_options li:hover {
  background-color: #eee;
}

.cloak{
    background-color: red;
    z-index: 2;
    position: fixed;
    top: 0; bottom: 0; right: 0; left: 0;
}

.dp_none{
    display: none !important;
}

.dp_block{
    display: block !important;
}

JavaScript

/*falldown menu on button click*/

$(document).on('click', '.cm_more', function (){
    var target = $(event.target);
    
    $('.cm_options').not(target.parents('.contact-menu').children('.cm_options')).removeClass('dp_block');
    $('.cm_more').not(target).removeClass('cm_more-active');
    $('.cloak').remove();
    
    target
        .toggleClass('cm_more-active')
        .parents('.contact-menu').children('.cm_options').toggleClass('dp_block');
    
    $('body').append($("<div/>", {"class": "cloak"}));
});




$(document).on('click', '.cloak', function (){
    $('.cm_options').removeClass('dp_block');
    $('.cm_more').removeClass('cm_more-active');
    $('.cloak').remove();
});