Medium-style Floating Text-highlight Menu With jQuery And CSS3

Medium Highlight Menu is a jQuery script for displaying an animated, Medium-style menu floating on the top of user selected text. Useful for context menu, inline editor or social share links.

How to use it:

1. Create the highlight menu with a caret on the webpage.

<div id="highlight_menu" style="display:none;"> 
  
  <ul class="social-share">
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
  </ul>
  
  <div class="caret">
  </div>
  
</div>

2. Style the highlight menu.

#highlight_menu {
  font-size: 18px;
  color: #fff;
  border-radius: 5px;
  background: rgba(0,0,0,.8);
  position: absolute;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

.highlight_menu_animate {
  transition: top 75ms ease-out,left 75ms ease-out;
}

.social-share {
  width: 100%;
  padding:0;
  margin:10px;
  margin-top:14px;
}

.social-share li {
  display: inline;
  padding: 10px;
}

3. Style the caret.

.caret {
  border-style: solid;
  border-width: 10px 10px 0px 10px;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-top-color: rgba(0,0,0,.8);
  border-right-color: transparent;
  width: 0px;
  height: 0px;
  display: block;
  position: absolute;
  top: 53px;
  left: 45%;
}

4. Put the latest version of jQuery library at the bottom of the webpage.

<script src="//code.jquery.com/jquery-2.2.2.min.js"></script>

5. The jQuery script to active the highlight menu when selecting a piece of text on the page.

$(function(){
  var menu = $('#highlight_menu');
  
  $(document.body).on('mouseup', function (evt) {
    var s = document.getSelection(),
      r = s.getRangeAt(0);
    if (r && s.toString()) {
      var p = r.getBoundingClientRect();
      if (p.left || p.top) {
        menu.css({
          left: (p.left + (p.width / 2)) - (menu.width() / 2),
          top: (p.top - menu.height() - 10),
          display: 'block',
          opacity: 0
      })
      .animate({
        opacity:1
      }, 300);
      
      setTimeout(function() {
        menu.addClass('highlight_menu_animate');
      }, 10);
      return;
    }
    }
    menu.animate({ opacity:0 }, function () {
      menu.hide().removeClass('highlight_menu_animate');
  });
  });
});

---

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