0

私はこのバージョンの lavalamp jquery プラグインを使用しています。旅行リンクに ( TRAVEL - >DOMESTIC | INTERNATIONAL | SPACE | DARK AGES | GOLDEN ERA ) などのオプションを含むサブメニューがあり、トップに移動できるようにしたいと考えています。 -レベルの 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>

ジャバスクリプト

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

さまざまな設定のオブジェクトプロパティなど、最新のコード更新については、溶岩ランプサイトを確認してください。

編集1：サブメニューのバグを修正するには、このサイトにアクセスしてプラグインファイルのコードを変更してください。

ご不明な点がございましたら、お気軽にお問い合わせください。

于 2012-04-25T20:47:13.233 に答える