JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<ul id="menu" style="margin: 20px;">
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Ipsum</a></li>
    <li class="current"><a href="#">Dolor</a></li>
    <li><a href="#">Sit</a></li>
    <li><a href="#">Amet</a></li>
</ul>


<!--

<ul id="menu" style="margin: 20px;">
    <li data-color="#ff4040"><a href="#">Lorem</a></li>
    <li data-color="#56ff40"><a href="#">Ipsum</a></li>
    <li data-color="#ff9540"><a href="#">Dolor</a></li>
    <li data-color="#40ffc7"><a href="#">Sit</a></li>
    <li data-color="#ff40f8" class="current"><a href="#">Amet</a></li>
</ul>

-->

CSS

.sm_marker {
    width: 10px;
    height: 10px;
    background: url('http://i48.tinypic.com/2isi920.png') no-repeat top center;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 5;
    display: none;
}

.sm_highlight {
    display: none;
    background: #83EC21;
    z-index: 6;
}



#menu {
    background: #222;
    float: left;
    position: relative;
}

#menu li {
    /*float: left;*/
}

#menu a { 
    float: left;
    padding: 15px 10px 10px; 
    color: #c1c1c1;
    font-size: 12px;
    font-family: 'Helvetica Neue', Sans-serif;
    text-decoration: none;
    position: relative;
    z-index: 10;
}

#menu .current {
    background: #111;
}

#menu .temp,
#menu a:hover,
#menu .current {
    color: #fff;
}

JavaScript

(function($) {
  $.fn.extend({
    spotlightMenu: function( options ) {
      
      var defaults = {
          movementspeed: 100,
          highlight: false,
          highlightspeed: 300,
          orientation: 'horizontal',
          fullheight: true,
          fullwidth: true
          // center: true
      };
        
      return this.each(function() {

        var menu = $(this),
            menuD = menu.data(),
            o = $.extend( true, {}, defaults, options, menuD );

          var get_Highlight = o.highlight ? '<span class="sm_marker sm_highlight"></span>' : '';
          
          menu
           .css({ position: 'relative' })
           .prepend('<span class="sm_marker"></span>' + get_Highlight);
          
          var marker = $('.sm_marker', menu),
              highlight = $('.sm_highlight', menu),
              menuli = $('li', menu),
              current = $('.current', menu),
              currentD = current.data(),
              horizontal = o.orientation === 'horizontal';
          
          if ( horizontal ) {
              menuli.css({ float: 'left' });
          }
          else {
              menuli.css({ overflow: 'auto' });
          }
          
          if ( currentD.color ) {
              marker.css({ background: currentD.color });
          }
          
          var currentPos = current.position(),
              ani_Docready = {};

          if ( horizontal ) {
              if ( o.fullwidth ) {
                  ani_Docready['width'] = current.width();
              }
              ani_Docready['left'] = currentPos.left;
          }
          else {
              if ( o.fullwidth ) {
                  marker.width( current.width() );
              }
              ani_Docready['top'] = currentPos.top;
          }
                  
          if( o.fullheight ) {
             marker.height( menuli.outerHeight(true) );
          }
          
          marker
            .not( highlight ).show()
           ...