JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div id="menu" class="menu"> 
            <ul> 
                <li><a href="javascript:;">メニュー1</a></li> 
                <li><a href="javascript:;">メニュー2</a></li> 
                <li><a href="javascript:;">メニュー3</a></li> 
                <li><a href="javascript:;">メニュー4</a></li> 
                <li><a href="javascript:;">メニュー5</a></li> 
            </ul> 
        </div>

CSS

/**    style used for both examples **/
 
        .menu { 
            height: 45px;
            display: block;
        }
 
        .menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
 
        .menu ul li {
            /* width and height of the menu items */  
            float: left;
            overflow: hidden;
            position: relative;
            text-align: center;
            line-height: 45px;
        }
 
        .menu ul li a {
            /* must be postioned relative  */ 
            position: relative;
            display: block;
            width: 110px;
            height: 45px;
            font-family: Arial;
            font-size: 11px;
            font-weight: bold;
            letter-spacing: 1px;
            text-transform: uppercase;
            text-decoration: none;
            cursor: pointer;
        }
 
        .menu ul li a span {
            /* all layers will be absolute positioned */
            position: absolute;
            left: 0;
            width: 110px;
        }
 
        .menu ul li a span.out {
            top: 0px;
        }
 
        .menu ul li a span.over,
        .menu ul li a span.bg {
            /* hide */  
            top: -45px;
        }
 
        /** 1st example **/
 
        #menu {
            background: #EEE;
        }
 
        #menu ul li a {
            color: #000;
        }
 
        #menu ul li a span.over {
            color: #FFF;
        }
 
        #menu ul li span.bg {
            /* height of the menu items */  
            height: 45px;
            background: #666 ;
        }

JavaScript

$(document).ready(function() {
 
            /// wrap inner content of each anchor with first layer and append background layer
            $("#menu li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );
 
            // loop each anchor and add copy of text content
            $("#menu li a").each(function() {
                $( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
            });
 
            $("#menu li a").hover(function() {
                // this function is fired when the mouse is moved over
                $(".out",    this).stop().animate({'top':    '45px'},    250); // move down - hide
                $(".over",    this).stop().animate({'top':    '0px'},        250); // move down - show
                $(".bg",    this).stop().animate({'top':    '0px'},        120); // move down - show
 
            }, function() {
                // this function is fired when the mouse is moved off
                $(".out",    this).stop().animate({'top':    '0px'},        250); // move up - show
                $(".over",    this).stop().animate({'top':    '-45px'},    250); // move up - hide
                $(".bg",    this).stop().animate({'top':    '-45px'},    120); // move up - hide
            });
  
 
        });