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

File Size: 2.28 KB
Views Total: 7314
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>
  <div class="caret">

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%;

.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="//"></script>

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

  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 || {
          left: (p.left + (p.width / 2)) - (menu.width() / 2),
          top: ( - menu.height() - 10),
          display: 'block',
          opacity: 0
      }, 300);
      setTimeout(function() {
      }, 10);
    menu.animate({ opacity:0 }, function () {

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