JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://www.gmarwaha.com/jquery/lavalamp/js/jquery.lavalamp.js"></script>
<div id="bglight">
<div class="wrapper">
<!-- MENU -->
<div class="nav">
<div class="navlogoplacer">
<a href="index.html">
<img src="images/logo.png" width="142" height="96" alt="Miller's Martial Arts" />
</a>
</div>
<div class="navlinkplacer">
<ul class="lavaLampNav" id="1">
<li><a href="index.html">Nyheter</a></li>
<li><a href="kurs.html">Kurs</a></li>
<li><a href="privattimer.php">Privattimer</a></li>
<li><a href="galleri.html">Galleri</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
</ul>
</div>
</div>
<!-- MAP -->
<div class="lokalet" style="float:left;">
<div class="adstxt">
<div class="kart">
<iframe width="255" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=no&geocode=&q=Waldemar+Thranes+gate+86a,+Oslo,+NO.&aq=t&sll=37.0625,-95.677068&sspn=41.767874,117.158203&ie=UTF8&hq=&hnear=Waldemar+Thranes+gate+86,+Gr%C3%BCnerl%C3%B8kka,+0175+Oslo,+Norge&t=m&z=14&ll=59.928304,10.753733&output=embed">
</iframe>
<br />
<small>
<a href="http://maps.google.com/maps?f=q&source=embed&hl=no&geocode=&q=Waldemar+Thranes+gate+86a,+Oslo,+NO.&aq=t&sll=37.0625,-95.677068&sspn=41.767874,117.158203&ie=UTF8&hq=&hnear=Waldemar+Thranes+gate+86,+Gr%C3%BCnerl%C3%B8kka,+0175+Oslo,+Norge&t=m&z=14&ll=59.928304,10.753733">Vis større kart
</a>
</small>
</div>
<div class="adr">
Waldemar Thranes gate 86a<br />
0175 Oslo
</div>
</div>
</div> ...
CSS
.wrapper {
width: 960px;
min-height: 720px;
margin: 0px auto;
text-align: center;
padding-top: 20px;
position: relative;
}
/* ---- Nav ---- */
div.wrapper div.nav {
min-width: 960px;
width: 960px;
max-width: 960px;
clear: both;
height: 96px;
}
div.navlogoplacer {
float: left;
height: 96px;
width: 142px;
padding-left: 20px;
}
div.navlinkplacer {
float: left;
width: 400px;
height: 29px;
}
.lavaLampNav {
position: relative;
height: 29px;
width: 400px;
overflow: hidden;
padding: 5px;
}
.lavaLampNav li {
float: left;
list-style: none;
}
.lavaLampNav li.back {
width: 9px;
height: 30px;
z-index: 3;
position: absolute;
background-image: url(../images/lava.gif);
background-repeat: no-repeat;
background-position: right -30px;
}
.lavaLampNav li.back .left {
height: 30px;
margin-right: 9px; /* 7px is the width of the rounded shape */
background-image: url(../images/lava.gif);
background-repeat: no-repeat;
background-position: left top;
}
.lavaLampNav li a {
text-decoration: none;
color: #ce1f24;
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;
font-family: LeagueGothic;
font-size: 20px;
text-shadow: 0px 2px 3px #000;
}
.lavaLampNav li a:hover {
color: #1b1a20;
}
.lavaLampNav li a:hover, .lavaLampNav li a:active, .lavaLampNav li a:visited {
border: none;
}
JavaScript
$(function() {
$("#1").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});