JSFiddle - React, Tailwind, and code Playground

by XstreamINsanity

HTML

<ul class="menu">
 <li>Home<img src="#" title="Home"/></li>
 <li>Forums<img src="#" title="Forums"/></li>
 <li>Chat Rooms<img src="#" title="Chat Rooms"/></li>
 <li>Messages<img src="#" title="Messages"/></li>
 <li>Profile<img src="#" title="Profile"/></li>
 <li>News<img src="#" title="News"/></li>
 <li>Help/FAQ<img src="#" title="Help/FAQ"/></li>
</ul>

CSS

body
{
 background-color: lightred;
 padding: 0;
 margin: 0;
}

.menu
{
 position: relative;
 top: 50px;
 padding: 0;
 margin: 0;
 list-style: none;
}

.menu li
{
 text-align: right;
 border: 1px solid black;
 border-left: 0;
 padding: 0px;
 margin: 0;
 margin-top; 20px;
 margin-bottom: 5px;
 width: 235px;
 position: relative;
 border-top-right-radius: 20px;
 border-bottom-right-radius: 20px;
 left: -195px;
 font-size: 24px;
 font-family: Trebuchet MS;
 background-color: #EEE;
}

.menu li:hover
{
 background-color: #DDD;
 -webkit-box-shadow: 0px 0px 5px black;
 -moz-box-shadow: 0px 0px 5px black;
 box-shadow: 0px 0px 5px black;
}

.menu li img
{
 position: relative;
 top: 3px;
 padding: 0 10px 0 5px;
 margin: 0;
 height: 25px;
 width: 25px;
}

JavaScript

$(document).ready(function() { $('.menu li').mouseenter(function() { $(this).animate({ left:"0px" }, "fast"); }); $('.menu li').mouseleave(function() { $(this).animate({ left:"-195px" }, "fast"); }); });