0

解決策を探しましたが、残念ながら見つかりませんでした。

それはフローティングボーダーを維持することです。サブメニューの要素をポイントすると、境界線が .active li の位置に移動します (アクティブなページに応じて - たとえば、ホームページが実行中の場合、「ホーム」はクラス = アクティブになります)。

カーソルを指す要素にとどまるといいですね。

ラバランプソース：http://chiroandmelinda.com/jscripts/lavalamp-0.2.0/demo.html

私のコード

//編集

「戻る」機能と「移動」機能を変更する方法はありますか?

ソース - jquery.easing.min.js

4

1 に答える 1

1

私は自分で問題を解決します:)

これが私の解決策です。ドロップメニューのli要素の一部をホバーした後にフローティングボーダーが左に移動したくない場合は、メインulのすべてのメインli要素に「ダミー」クラスを設定する必要があります（サブメニューではありません！）

EG (私は class="mainNav" を使用します)

<ul>
  <li class="mainNav">Home</li>
  <li class="mainNav">About Us</li>
  <li class="mainNav">Portfolio</li>
    <ul>
      <li>1</li>
      <li>2</li>
    </ul>
  <li class="mainNav">Contact</li>
</ul>

その後、jQueryLavaLamp ソースの値を変更する必要があります。つまり、jquery.lavalamp.min.jsで

メインファイル

このコード (jquery.lavalamp.min.js) を見ると、次のような元のファイルにある 63 行目を検索する必要があります。

$li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];

見つけたら、次のようなコードに変更します。

$li = $(".mainNav", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];

私は最初$(".li", this)にclass="mainNav"要素のみ$(".mainNav", this) の周りに浮かぶクレイジーなフローティングボーダー (LavaLamp) に変更します! li要素の周りではありません:)

ここにいくつかのJSFIDDLEがあります

すべてのlavalamp.jsコードをjavascriptウィンドウに貼り付けて、主な問題要素を直接操作します。

9行目にすでに「.mainNav」と書いていますが、それを「li」に変更して、最初と2番目の違いを確認できます。私がそれを手伝ってくれることを願っています:)

于 2013-08-01T01:42:52.473 に答える