Lavalamp for jQuery: Can't get first level menu clickable

Question

I am using this version of the lavalamp jquery plugin and I would like the travel link to have a submenu with options like ( TRAVEL - >DOMESTIC | INTERNATIONAL | SPACE | DARK AGES | GOLDEN ERA ) and also to be able to navigate to the top-level travel.html page.

Travel should link to travel.html and DOMESTIC, INTERNATIONAL, SPACE, DARK AGES, GOLDEN ERA should all be linking to their respective pages.

I felt as though it shouldn't be this difficult but somehow I am not able to get it done.

Many thanks.

EDIT: ADDING CODE

HTML

<ul class="lavaLampWithImage" id="1">
    <li><a href="#">Home</a></li>
    <li><a href="products.html" >Travel</a>
        <div>
            <ul>                    
                <li><a  href="domestic.html">Domestic</a></li>
                <li><a  href="international.html">International</a></li>
                <li><a  href="space.html">Space</a></li>
                <li><a  href="dark-ages.html">Dark Ages</a></li>
                <li><a  href="golden-era.html">Golden Era</a></li>
            </ul>
        </div>
    </li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">Ride an elephant</a></li>
</ul>
<script type="text/javascript">
    $(function() {
        $("#1").lavaLamp({
            speed: 700,
            click: function(event, menuItem) {
                return true;
            }
        });
    });
</script>

JAVASCRIPT

(function($) {
$.fn.lavaLamp = function(o) {
    o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});

    return this.each(function() {
        var me = $(this), noop = function(){},
            $back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
            $li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];

        $li.not(".back").hover(function() {
            move(this);
        }, noop);

        $(this).hover(noop, function() {
            move(curr);
        });

        $li.click(function(e) {
            setCurr(this);
            return o.click.apply(this, [e, this]);
        });

        setCurr(curr);

        function setCurr(el) {
            $back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
            curr = el;
        };

        function move(el) {
            $back.each(function() {
                $.dequeue(this, "fx"); }
            ).animate({
                width: el.offsetWidth,
                left: el.offsetLeft
            }, o.speed, o.fx);
        };

    });
};
})(jQuery);

CSS

.lavaLampWithImage {
    position: relative;
    height: 29px;
    width: 421px;
    background: url("bg.gif") no-repeat top;
    padding: 15px;
    margin: 10px 0;
    overflow: hidden;
}

.lavaLampWithImage li {
    float: left;
    list-style: none;
}

.lavaLampWithImage li.back {
    background: url("lava.gif") no-repeat right -30px;
    width: 9px; height: 30px;
    z-index: 8;
    position: absolute;
}

.lavaLampWithImage li.back .left {
    background: url("lava.gif") no-repeat top left;
    height: 30px;
    margin-right: 9px; /* 7px is the width of the rounded shape */
}

.lavaLampWithImage li a {
    font: bold 14px arial;
    text-decoration: none;
    color: #fff;
    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;    
}

.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
    border: none;
}

What I basically were trying to achieve was to have the Travel first level menu-tab linked to travel.html and to be able to have the lavalamp effect even on travel.html .

Answer 1

A typical HTML widget consists of 3 distinct components when implementing a plug-in, including CSS, HTML layout, and the jQuery plug-in script w/ properties wanted.

Start with the HTML layout :

<ul class="lavaLamp">
        <li><a href="#">Home</a>

        </li>
        <li><a href="#">Plant a tree</a></li>
        <li><a href="#">Travel</a>
            <ul>    <!-- submenus of travel parent menu -->
                <li><a href="#">Domestic</a></li> 
                <li><a href="#">International</a></li> 
                <li><a href="#">Space</a></li> 
            </ul>
        </li>
        <li><a href="#">Ride an elephant</a></li>
</ul>

Note* that the lavalamp plug-in automatically add's a background list item tag that moves the background on hover event

Now let's do some basic styling with CSS: :

.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;
    }

The above CSS should be edited to your liking for styling purposes. Other CSS selections can be added by jQuery $('SELECTOR').addClass('className');

Now for the plug-in . Most of the javascript work is taken care by the Lava Lamp plugin itself, so all you have to do is add the .js files to your project, reference them in the web form you're using them in, or a master page, and add script tags to place the fired events in:

<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>

<!-- Place this section in your webform using the lava lamp menu-->
<script type="text/javascript">
    $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>

Checkout the lava lamp site for the latest code updates, such as object properties for different settings.

Edit1: To fix the sub-menu bugs, visit this site to change code in the plug-in file.

Any questions, feel free to ask!