JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<nav class="navegacao">
                <ul id="menu">
                    <li class="text_glow"><a href="#luxxx"><span>LUXXX</span><em>LUXXX</em></a></li>
                    <li class="text_glow"><a href="#galeria"><span>GALERIA</span><em>GALERIA</em></a></li>
                    <li class="text_glow"><a href="#videos"><span>VÍDEOS</span><em>VÍDEOS</em></a></li>
                    <li class="text_glow"><a href="#programacao"><span>PROGRAMAÇÃO</span><em>PROGRAMAÇÃO</em></a></li>
                    <li class="text_glow"><a href="#lista"><span>LISTA</span><em>LISTA</em></a></li>
                    <li class="text_glow"><a href="#comochegar"><span>COMO CHEGAR</span><em>COMO CHEGAR</em></a></li>
                    <li class="text_glow"><a href="#faleconosco"><span>FALE CONOSCO</span><em>FALE CONOSCO</em></a></li>
                    <li class="text_glow"><a href="#newsletter"><span>NEWSLETTER</span><em>NEWSLETTER</em></a></li>
                </ul>
            </nav>

CSS

#menu li{
    position: relative; 
    font-size: 14px;
    color: #e0968f;
}
#menu a {
    display: block;
    border:none;
    position:relative;
    height:35px;
    overflow:hidden;
    font-size: 14px;
    color: #e0968f;
    text-decoration: none;
}
#menu a span,
#menu a em{
    cursor:pointer;
    padding: 4px 0px;
    font-style: normal;
    display: block;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;    
}
#menu a span{
    position:relative;
    top:0;
    left: 0;
    color:#e0968f;
    /*background: #fff;*/
}
#menu a em{
    position:absolute;
    padding: 4px 0;
    top: 100%;
    color: #000;
    /*background: #FFCC00;*/
    width:100%;
    margin:0;
}
#menu a:hover span{
    top: -100%;
}
#menu a:hover em{
    top: 0;
}
#menu a.selected span,
#menu a.selected:hover span {
    top: -100%;
  
}
#menu a.selected em,
#menu a.selected:hover em {
    top: 0;
      
}
.selected{
    color:#fff;
}

JavaScript

$(function() {
        $('#menu a').click(function(e) {
            e.preventDefault();
            $('#menu a').removeClass("selected");
            $(this).addClass("selected");
           
        });
});