sifr - sIFR と LavaLamp は連携できますか?

Question

私は、sIFR と LavaLamp をうまく連携させるのにかなりの時間を費やしています。

LavaLamp の簡単な歴史:

LavaLamp: jQuery プラグイン

によって開始された

LavaLamp と jQuery をサポートする JS ファイルをロードする LavaLamp css を追加する
ソートされていないリストを作成し、クラス「lavaLamp」を追加します
アンカータグを含むリストメンバーを URL に追加する

CSS の例

.lavaLamp {
        position: absolute;
        height: 29px;
        padding: 15px;
        margin: 24px 0 0 0;
        }



.lavaLamp li {

        float: left;
        list-style: none;
        }



.lavaLamp li.back {

        background: url(../images/lava.png) no-repeat right -30px
        width: 9px;
        height: 30px;
        z-index: 8;
        position: absolute;
        }



.lavaLamp li.back .left {

        background: url(../images/lava.png) no-repeat top left
        height: 30px;
        margin-right: 9px;
        }



.lavaLamp li a {

        font-size: 20px;
        position: relative;
        overflow: hidden;
        text-decoration: none;
        color: #000000;
        outline: none;
        text-align: center;
        height: 30px;
        top: 4px;
        z-index: 10;
        letter-spacing: 0;
        float: left;
        display: block;
        padding:0px 10px;
        }

HTML の例:

<div id="menu">
   <ul class="lavaLamp">
      <li><a href="somewhere.html">Some Where</a></li>
      <li><a href="somewhereelse.html">Some Where Else</a></li>
   </ul>
</div>

メニューを初期化するために sIFR を取得する最初の試みは、セレクターを「selector: '#menu'」に設定することでした。これはまったく機能しませんでした。ゆっくりと、div のネストにどんどん移動し始めました。

最後に、selector: '.lavaLamp li a' を実行すると、LavaLamp が正しく初期化され、フォントとロールオーバーが正しく表示されるようになりました。

問題：

アクティブにする必要があるテキストを直接クリックすると、アンカータグが機能しません。ただし、LavaLamp がロールオーバーとして使用する画像の左端または右端をクリックすると、アンカーをクリックします。
メニュー内の他の項目にカーソルを合わせると、マウスを離すと、現在アクティブなメニュー項目に戻るのではなく、最後にロールオーバーした項目が強調表示されたままになることがあります。

助けてくれてありがとう...

-A

sifr - sIFR と LavaLamp は連携できますか?

1 に答える 1

Related

Reference