2

この質問がされた可能性があると確信していますが、正しい解決策が見つかりませんでした..

ページのどこにでも配置できるアイコンの上にマウスを置いてメニューを表示する必要があります。コード例は次のとおりです: ( http://jsfiddle.net/Qfjdk/2/ ) これはポップアップを表示しますが、コードを

#nav {
    margin:0; 
    padding:0; 
    list-style:none;
    float: left;
}

に

#nav {
    margin:0; 
    padding:300px; 
    list-style:none;
    float: right;
}

ご覧のとおり、メニューの位置は常に下の中央にあります。アイコンが表示されている場所に基づいてメニューの位置を変更したい。

アイコン要素が右揃えの場合、メニューをアイコンの右端から開始するように配置します。アイコン要素が表示されたページの左下にある場合、メニューの左下を要素の左上などに揃えたい.

私はアルゴリズムを探しているのではなく、パラメーターを設定する正しい方法を探しています..あなたの助けに感謝します

4

1 に答える 1

1

最初に、サポートする選択肢の数を定義し (たとえば、4: 右上、右下、左上、または左下のボタン)、これらの異なるオプション (.pos1、 .pos2、.pos3、.pos4)。

次に、JS または jQuery を使用して、ウィンドウに対するアイコンのオフセットを計算します。その結果に応じて、以前に作成したクラスから正しいクラスをポップアップに与えます。これは、ロード時とウィンドウのサイズ変更時に行うことができます。たとえば、右への距離を計算し、CSS の変更を適用します (代わりにクラスを適用することもできますが、これはどのように機能するかを示すためのものです)。

var callback = function () {

// when hover on an element, calculate offset to right

        $('.yourElement').mouseover(function(){ 
            var currentElement = $(this);
            var distanceRight = $(window).width() - ($(currentElement).offset().left + $(currentElement).width());

            // If the distance is less than 50, then do...          
            if (distanceRight < 50) {
                $('.yourPopup').css("left","-200px");
            }
            else {}
        });
    };

    $(document).ready(callback);
    $(window).resize(callback);
于 2012-11-27T22:34:55.570 に答える