jquery - 要素を絶対位置で別の要素の下に配置しますか?

Question

ドロップダウンメニューのあるプロジェクトがあります。HTMLは次のとおりです。

<div class="body">
        <div class="head"></div>
        <div class="navbar">
            <div>Home</div>
            <div id="items"><p>Items</p>
                <div class="idd">
                    <table class="dd">
                        <tr>
                            <td><a href="./items/weapons.html">Weapons</a></td>
                        </tr>
                        <tr>
                            <td><a href="./items/abilities.html">Abilities</a></td>
                        </tr>
                        <tr>
                            <td><a href="./items/armor.html">Armor</a></td>
                        </tr>
                        <tr>
                            <td><a href="./items/rings.html">Rings</a></td>
                        </tr>
                    </table>
                </div>
            </div>

            <div>Sets</div>
            <div>Contact</div>
            <div>Info</div>
            <div>Donations</div>
        </div>
    </div>

では、CSS は次のとおりです。

div.body {
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
}
div.body div.head {
background-image: url("header.png");
width: 995px;
height: 200px;
margin-left: auto;
margin-right: auto;
}
div.navbar div {
font-size: 13pt;
padding-top: 10px;
display: inline-block;
margin-left: 10px;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 10px;
}
div.navbar div:hover {
background-color: #666;
}
div.navbar {
font-family: 'HelveticaNeue';
background-image: url("../newsdcs/navbarbg.png");
width: 730px;
height: 40px;
margin-top: 15px;
border-radius: 5px;
text-align: center;
margin-left: auto;
margin-right: auto;
color: #F0F0F0;
}
div.navbar div p {
margin-top: 0;
margin-bottom: 0;
}
div.navbar div div.idd {
background-color: #666;
position: absolute;
}
a {
color: white;
text-decoration: none;
}

はい、JQuery は次のとおりです。

$(document).ready(function(){
            window.onload = function() {
                if(!window.location.hash) {
                    window.location = window.location + '#l';
                    window.location.reload();
                }
            }
            $(".idd").hide();
            var eTop = $('#items').offset().top;
            var eLeft = $('#items').offset().left;
            var eTopA = eTop + 40;
            var eLeftA = eLeft;
            $(".idd").offset({ top: eTopA, left: eLeftA });
            $("#items").hover(function() {
                $(".idd").show();
            }, function() {
                $(".idd").hide();
            });
        });

そして、すべての人のブラウザーとコンピューターで、異なる結果が得られます。中心から少し外れて、間違った場所にいて、リフレッシュすると、正しい結果、間違った結果、その他の結果が得られます。一貫性のある、中心にある、正確で一貫性のあるドロップダウンメニューを作成するにはどうすればよいですか? どうもありがとう！

score 2 · Accepted Answer

このようなものが役立つかもしれないと思います。これは基本的な jQuery ドロップダウンメニューで、すべてのブラウザーで同じように表示されます。可能であれば、すべての配置スタイルをスタイルシートに残すことをお勧めします。この場合はそうです。

http://jsfiddle.net/UrGfZ/

PeterVR も良い点を指摘しています。ユーザーが JS をブロックするのが心配で、古き良き時代の HTML/CSS でナビゲーションを設定したい場合は、以下のフィドルが機能します。2 つの jsFiddle プロジェクト間で私が行った唯一の変更は、「hasSubNav」クラスを手動で li に追加し、CSS に 1 行を追加してホバー時にサブを表示することです。

http://jsfiddle.net/YzPaE/

この 2 つは同じように見えますが、メニューをどこまで進めたいかによって異なります。ドロップダウンなどをアニメーション化する場合は、jQuery が最適です。それ以外の場合は、純粋な CSS バージョンが魅力のように機能します。

score 1 · Accepted Answer

私はあなたを批判したくはありませんが、あなたはここで間違ったアプローチを取っていると思います. あなたは物事を複雑にしすぎていると思います。いくつかのコメント:

表形式以外のデータには表を使用しないでください。それは賢明なSEOを殺すでしょう！メニューはリンクのリストであり、そのようにコーディングする必要があります。サブメニューはネストされたリストとしてコーディングする必要があります。小さな例:

<ul id='nav'>
  <li><a ..>top 1</a></li>
  <li><a ..>top2</a>
    <ul>
      <li><a ..>sub 1</a>
      <li><a ..>sub 2</a>
      ...
    </ul>
  </li>
  ...
</ul>

メインナビゲーションのような基本的なものに js を使用しないことを強くお勧めします。js が無効になっているユーザー (はい、存在します :-s) についてはどうでしょうか。サイトをナビゲートすることはできません。グレースフルデグレードの原則を常に適用するようにしてください。この場合、基本的なドロップダウンメニューであり、js はまったく必要ありません。数行の基本的な css だけで誰にでも機能する可能性があります。おそらくhttp://onwebdev.blogspot.com/2011/04/css-drop-down-menu-tutorial.htmlのようなチュートリアルを試してみてください（Googleでの最初の結果にすぎません。そこにはたくさんの良い結果があるはずです）

これがあなたを正しい軌道に乗せることを願っています...

score 0 · Accepted Answer

おそらく必要のない余分なマージンなどがたくさんあります。javascriptを使用してテーブルのラッパーの上部と左側を設定しているように見えます。そうするのではなく、そのラッパーのコンテナーに対してposition：relativeを設定してから、left：0とtop：35px（または探している位置）を設定します。これにより、JSが大幅に簡素化されます。

これらの変更を追加しましたが、一貫性が保たれているようです。

div#items {position:relative;}
div.navbar div div.idd {
    left:0;top:35px;
}

CSSを使用してすべてを実行する利点は、テーブルラッパー（div.idd）が常にdiv＃itemsを基準にして配置されるため、div＃itemsの位置のみを気にする必要があることです。クロスブラウザのサポートは、それ自体がアートフォームです。

score 0 · Accepted Answer

ブラウザ間の一貫性が必要な場合は、次の 2 つのオプションがあります。

を使用して、さまざまなブラウザにさまざまなスタイルシートをロードします

<!-- [if IE]>
// Use this stylsheet
<![endif]>

あなたは要点を理解します。

もう 1 つの選択肢は、マージンやパディングなど、ブラウザーが異なる解釈をするものを可能な限り取り除き、可能な限り単純化してから、要素を再配置することです。

また、同じように見えるように異なるネットタグにスタイルを適用している場合でも、異なるタグは異なるブラウザーでは異なるように見えます。

クロスブラウザへようこそ！
-ブライアン

score 0 · Accepted Answer

CSS を使用するのではなく、単純なナビゲーションに jQuery を使用する理由が少しわかりません。

jquery - 要素を絶対位置で別の要素の下に配置しますか?

5 に答える 5

Related

Reference