Let me get you started on integrating LavaLamp into your jQuery powered site.
I hope you agree that a typical HTML widget consists of 3 distinct components.
- A semantically correct HTML markup
- A CSS to skin the markup
- An unobstrusive javascript that gives it a purpose
Now lets follow the above steps and implement the LavaLamp menu for your site.
Step 1: The HTML
Since most UI developers believe that an unordered list(ul) represents the correct semantic structure for a Menu/Navbar, we will start by writing just that.
<ul class="lavaLamp"> <li><a href="#">Home</a></li> <li><a href="#">Plant a tree</a></li> <li><a href="#">Travel</a></li> <li><a href="#">Ride an elephant</a></li> </ul> <li class="back"><div class="left"></div></li>
Step 2: The CSS
You can skin this markup in many different ways to achieve your own personalized menu.
/* Styles for the entire LavaLamp menu */ .lavaLamp { position: relative; height: 29px; width: 421px; background: url("../image/bg.gif") no-repeat top; padding: 15px; margin: 10px 0; overflow: hidden; } /* Force the list to flow horizontally */ .lavaLamp li { float: left; list-style: none; } /* Represents the background of the highlighted menu-item. */ .lavaLamp li.back { background: url("../image/lava.gif") no-repeat right -30px; width: 9px; height: 30px; z-index: 8; position: absolute; } .lavaLamp li.back .left { background: url("../image/lava.gif") no-repeat top left; height: 30px; margin-right: 9px; } /* Styles for each menu-item. */ .lavaLamp li a { position: relative; overflow: hidden; text-decoration: none; text-transform: uppercase; font: bold 14px arial; color: #fff; outline: none; text-align: center; height: 30px; top: 7px; z-index: 10; letter-spacing: 0; float: left; display: block; margin: auto 10px; }
Step 3: The Javascript
This is the easy part. Most of the javascript work is taken care by the Lava Lamp plugin itself. As a developer, you just have to include the mandatory and/or optional javascript files and fire a call to initialize the menu.
<script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/jquery.lavalamp.js"></script> <!-- Optional --> <script type="text/javascript" src="path/to/jquery.easing.js"></script> <script type="text/javascript"> $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })); </script>