Operations logo
HTMLz.com
Professional Website Design - PHP Programming - Discount Domain Names


Include in your CSS. You will need to download bg.gif and lava.png

.lavaLampWithImage { position: relative; height: 50px; width: 980px; background: url("images/bg.gif") no-repeat top; padding: 0px 0 0 20px; margin: 10px 0 0 0px; overflow: hidden; } .lavaLampWithImage li { float: left; list-style: none; } .lavaLampWithImage li.back { background: url("images/lava.png") no-repeat right -50px; width: 9px; height: 52px; z-index: 8; position: absolute; } .lavaLampWithImage li.back .left { background: url("images/lava.png") no-repeat top left; height: 50px; margin-right: 9px; /* 7px is the width of the rounded shape */ } .lavaLampWithImage li a { font: bold 14px arial; text-decoration: none; color: #000; outline: none; text-align: center; top: 25px; text-transform: uppercase; letter-spacing: 0; z-index: 10; display: block; float: left; height: 40px; position: relative; overflow: hidden; margin: auto 10px; } .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited { border: none; color: #000; }

Put in the Head of the page. You will need to download jquery.easing.min.js and jquery.lavalamp.min.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.easing.min.js"></script> <script type="text/javascript" src="jquery.lavalamp.min.js"></script> <script type="text/javascript"> $(function() { $("#1, #2, #3").lavaLamp({ fx: "backout", speed: 700, click: function(event, menuItem) { return false; } }); }); </script>

Put on your web page

<ul class="lavaLampWithImage" id="1"> <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>
 

For over 19 years HTMLz.com has provided web and graphic design services to the Dallas, Area. Some of our popular pages are: Professional Website Design Services. Graphic Design and Print Graphic Design Services. PHP Programming Services. Discount Domain Names. Website Templates.

HTMLz
2009 Knollwood Lane Carrollton TX 75006
Phone: (214) 724-3038
Fax: (214) 724-3038

Cloud

author lava lamp navigation using jquery tutorial lavlamp.min.js lavalampwithimage function left none height position url no-repeat images background top 50px lava.png width relative float color put page z-index 9px 10px overflow hidden li.back 0px margin menuitem event return

htmlz discount domain names
brightcove free video cloud hosting
© 2015 HTMLz | Site Map 18.612ms (0.019s)

HTMLz.com Professional Website Design - Graphics Design - PHP Programming - Discount Domain Names - Lava Lamp Navigation using JQuery and lavlamp.min.js Tutorial

Lava Lamp Navigation using JQuery Tutorial

Lava Lamp Navigation using JQuery and lavlamp.min.js Tutorial