JSFiddle - React, Tailwind, and code Playground

by terby

HTML

<head>
  <meta charset="utf-8" />
  <title>CSS3 Animated Navigation Menu | Tutorialzine Demo</title>

  <!-- Our CSS stylesheet file -->
  <link rel="stylesheet" href="assets/css/styles.css" />

  <!-- Including the Lobster font from Google's Font Directory -->
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />

  <!-- Enabling HTML5 support for Internet Explorer -->
  <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
</head>

<body>

  <header>
	<h1>TIRT</h1>
    <h1>CSS3 Animated Navigation Menu</h1>
    <h2>&laquo; Read and download on Tutorialzine</h2>
  </header>

  <nav>
    <ul class="fancyNav">
      <li id="home"><a href="#home" class="homeIcon">Home</a></li>
      <li id="news"><a href="#news">News</a></li>
      <li id="about"><a href="#about">About us</a></li>
      <li id="services"><a href="#services">Services</a></li>
      <li id="contact"><a href="#contact">Contact us</a></li>
    </ul>
  </nav>

  <footer>Looks best in Firefox 4, usable everywhere.</footer>

</body>

CSS

body {
	background-color: #404146;
}
.fancyNav{
    /* Affects the UL element */
    overflow: hidden;
    display: inline-block;

    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;

    box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
    -moz-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
    -webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.fancyNav li{
    /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */

    background-color: #f0f0f0;
    background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
    background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);

    border-right: 1px solid rgba(9, 9, 9, 0.125);

    /* Adding a 1px inset highlight for a more polished efect: */

    box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;

    position:relative;

    float: left;
    list-style: none;
}

.fancyNav li:after{

    /* This creates a pseudo element inslide each LI */ 

    content:'.';
    text-indent:-9999px;
    overflow:hidden;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1;
    opacity:0;

    /* Gradients! */

    background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
    background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0)...

JavaScript

//https://demo.tutorialzine.com/2011/05/css3-animated-navigation-menu/#home