JSFiddle - React, Tailwind, and code Playground

by helpinspireme

HTML

<nav class="primary">
    <div class="mobile-nav">
    <a class="home first <?php if ( $nav == 'home' ) { echo 'active';}?>" href="index.php">Home</a>
    <a class="about <?php if ( $nav == 'about' ) { echo 'active';}?>" href="about.php">About</a>
    <a class="linkedin" href="#">LinkedIn</a>
    <a class="contact" href="#">Contact</a>
    </div>
    <a class="nav-name"></a>
    <div class="cl"></div>
</nav>

CSS

nav.primary .nav-name { opacity: 0; margin-left: 0;
    -webkit-transition: opacity 0.5s ease-in-out, margin-left 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out, margin-left 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out, margin-left 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out, margin-left 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out, margin-left 0.5s ease-in-out; }
  nav.primary .nav-name.show { opacity: 1; margin-left: 25px; }

JavaScript

$('.primary a').on ({
		mouseenter: function () {
        	var navText = $(this).html();
			$('.primary .nav-name').html(navText);
			$('.primary .nav-name').toggleClass('show');
	    },
	    mouseleave: function () {
	        $('.primary .nav-name').toggleClass('show');
	    }
	});