0

我正在使用这个版本的 lavalamp jquery 插件，我希望旅行链接有一个子菜单，其中包含（旅行 - >国内 | 国际 | 空间 | 黑暗时代 | 黄金时代）之类的选项，并且还能够导航到顶部级travel.html页面。

Travel 应该链接到 travel.html 并且DOMESTIC、INTERNATIONAL、SPACE、DARK AGES、GOLDEN ERA都应该链接到它们各自的页面。

在此处输入图像描述

我觉得好像它不应该这么困难，但不知何故我无法完成它。

非常感谢。

编辑：添加代码

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

我基本上试图实现的是将Travel一级菜单选项卡链接到travel.html并能够在travel.html.

4

1 回答 1

2

实现插件时，典型的 HTML 小部件由 3 个不同的组件组成，包括 CSS、HTML 布局和带有所需属性的 jQuery 插件脚本。

从HTML 布局开始：

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

注意* lavalamp 插件会自动添加一个背景列表项标签，​​用于在悬停事件时移动背景

现在让我们用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;
    }

上述 CSS 应根据您的喜好进行编辑以用于样式目的。其他 CSS 选择可以通过 jQuery 添加 $('SELECTOR').addClass('className');

现在为插件。大多数 javascript 工作由 Lava Lamp 插件本身负责，因此您只需将 .js 文件添加到项目中，在您使用它们的 Web 表单或母版页中引用它们，然后添加脚本标签以将触发的事件放置在：

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

查看熔岩灯站点以获取最新的代码更新，例如不同设置的对象属性。

Edit1：要修复子菜单错误，请访问此站点以更改插件文件中的代码。

有任何问题请随时询问我（们！

于 2012-04-25T20:47:13.233 回答