JSFiddle - React, Tailwind, and code Playground

by Michal Pielacha

HTML

<ul>
	<li id="menu-1">Test menu 1</li>
	<li id="menu-2">Test menu 2</li>
	<li id="menu-3">Test menu 3</li>
</ul>

CSS

ul {
	list-style:none;
}

li {
	display: inline-block;
	background-color: yellow;
	border: 1px solid red;
	float: left;
	display: none;
	padding: 2px 5px 2px 5px;
}

JavaScript

showMenuElement( 0 ); // call to initiate the menu

function showMenuElement( x ) {
	x += 1; // cycling through elements
	if (x < 4) {
		var el = "#menu-" + x;
		$( el ).fadeIn( 1000, function() { showMenuElement(x) } ); // show one element, then show next in line
	}
}