JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.myotherdrive.com/dyn/file/679.394407.10082010.69658.6a64fi/jquery.easing.1.3.js"></script>
<script src="http://www.myotherdrive.com/dyn/file/054.144407.10082010.69600.6a64fi/jquery.lavalamp.min.js"></script>
<ul class="lavalamp">
<li class="current"><a href="#home">Home</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<br><br><br>
<div id="home" class="info">
Home page stuff goes here.
</div>
<div id="work" class="info">
Work information goes here.
</div>
<div id="about" class="info">
About me.
</div>
<div id="contact" class="info">
Contact me.
</div>
<br><br><br>
<div class="links">
You can see my <a href="#work">work</a> or <a href="#contact">contact me.</a>
</div>
CSS
div.info { display: none; }
.lavalamp {
position: relative;
height: 29px;
width: 421px;
background-color: #222;
padding: 15px;
margin: 10px 0;
overflow: hidden;
border: 1px solid gray;
}
.lavalamp li {
float: left;
list-style: none;
}
.lavalamp li.back {
border: 1px solid #000;
background-color: #555;
width: 9px;
height: 30px;
z-index: 8;
position: absolute;
}
.lavalamp li a {
font: bold 14px arial;
text-decoration: none;
color: #eee;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavalamp li a:hover, .lavaLamp li a:active, .lavaLamp li a:visited {
border: none;
}
JavaScript
$(function() {
// set up lavalamp
$(".lavalamp").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
// change information box
var $block = $( $(menuItem).find('a').attr('href') );
$('.info').not($block).hide();
$block.fadeIn();
return false;
}
});
// initialize information box
$('.current').trigger('click');
$('.links a').click(function(){
var block = $(this).attr('href');
$('.current').removeClass('current');
$('.lavalamp').find('a[href=' + block + ']').parent().trigger('click');
})
});