0

学校のイントラネット サイトのドロップダウン メニューを作成していて、奇妙な問題が発生しました。サブメニューは、選択したメニューの y 位置から 36px オフセットされます。 ここに画像の説明を入力

これがコードの抜粋です（品質を許してください:D）

<html>
<head>  
    <style>
    #navagationBar {
        margin: 0;
        padding: 0;
        z-index: 30;
    }

    #navagationBar li  {    
        list-style: none;
        float: left;
        font: bold 12px 'Arial';
        margin-left: 10px;
        width: 96px;
    }

    #navagationBar li a  {  
        display: block;
        margin: 0 1px 0 0;
        padding: 4px 10px;
        width: 136px;
        color: #FFFFFF;
        text-align: center;
        text-decoration: none;
    }

    #navagationBar li a:hover  {    
        background: #796952;
    }

    #navagationBar div  {   
        position: absolute;
        visibility: hidden;
        background: transparent; 
    }

    #navagationBar div a  { 
        position: relative;
        display: block;
        padding: 5px 10px;
        width: 136px;
        white-space: nowrap;
        text-align: left;
        text-decoration: none;
        background: #796952;  
        color: #FFF;
        font: 9px "Arial";
    }

    #navagationBar div a:hover  {   
        background: #969696;
        color: #FFF;
    }

    #navagationBar a  {
        color: #FFF;
    }

    div.navagation  {
        background: #2d221c;

        height: 28px;
    }

    div.sub  {
        left: 156px;
    }
    </style>
    <!-- BG COLOR: #2d221c
         FORERGROUND: #3c3429
         HOVER: #796952
         -->
    <script>    
            var menuItem = 0;
            var subItem = 0;

            var timeLimit = 250;
            var closeTimer = 0;
            var closeSubTimer = 0;


            // open menu
            function openMenu(id)  {
                stopTimer();

                // If a layer is already open close it
                if (menuItem)  {
                    menuItem.style.visibility = 'hidden';
                }

                // Then set the one clicked on by the user to be shown
                menuItem = document.getElementById(id);
                menuItem.style.visibility = 'visible';
            }

            function openSub(id)  {
                stopSubTimer();

                // If a layer is already open close it
                if (subItem)  {
                    subItem.style.visibility = 'hidden';
                }

                subItem = document.getElementById(id);
                subItem.style.visibility = 'visible';
            }

            function close()  {
                if (menuItem)  {
                    menuItem.style.visibility = 'hidden';
                }
            }

            function closeSub()  {
                if (subItem)  {
                    subItem.style.visibility = 'hidden';
                }
            }

            function startTimer()  {
                closeTimer = window.setTimeout(close, timeLimit);
            }

            function startSubTimer()  {
                closeSubTimer = window.setTimeout(closeSub, timeLimit);
            }

            // Stop timing
            function stopTimer()  {
                if (closeTimer)  {
                    window.clearTimeout(closeTimer);
                    closeTimer = null;
                }
            }

            // TODO: Make more modular          
            function stopSubTimer()  {
                if (closeSubTimer)  {
                    window.clearTimeout(closeSubTimer);
                    closeSubTimer = null;
                }
            }

            // If the user click out, close teh box
            document.onclick = close();
            document.onclick = closeSub();
    </script>
</head>
    <body>
        <div class="navagation">
            <ul id="navagationBar">
                <li><a href="#" onMouseOver="openMenu('menu0')" onMouseOut="startTimer()">HSIE</a>
                    <div id="menu0" onMouseOver="stopTimer()" onMouseOut="startTimer()">
                        <a href="#" onMouseOver="openSub('submenu0_0')" onMouseOut="startSubTimer()">Business Studies</a>
                        <div class='sub' id="submenu0_0" onMouseOver="openSub('submenu0_0')" onMouseOut="startSubTimer()">
                            <a href='view.php?id=110'>Year 11</a>
                            <a href='view.php?id=109'>Year 12</a>
                        </div>
                        <a href="#" onMouseOver="openSub('submenu0_1')" onMouseOut="startSubTimer()">Commerce</a>
                        <div class='sub' id="submenu0_1" onMouseOver="openSub('submenu0_1')" onMouseOut="startSubTimer()">
                            <a href='view.php?id=112'>Year 9</a>
                            <a href='view.php?id=111'>Year 10</a>
                        </div>
                        <a href="#" onMouseOver="openSub('submenu0_2')" onMouseOut="startSubTimer()">Geography</a>
                        <div class='sub' id="submenu0_2" onMouseOver="openSub('submenu0_2')" onMouseOut="startSubTimer()">
                            <a href='view.php?id=48'>Year 7</a>
                            <a href='view.php?id=92'>Year 8</a>
                            <a href='view.php?id=105'>Year 9</a>
                            <a href='view.php?id=70'>Year 10</a>
                            <a href='view.php?id=69'>Year 11</a>
                            <a href='view.php?id=131'>Year 12</a>
                        </div>
                        <a href="#" onMouseOver="openSub('submenu0_3')" onMouseOut="startSubTimer()">History</a>
                        <div class='sub' id="submenu0_3" onMouseOver="openSub('submenu0_3')" onMouseOut="startSubTimer()">
                            <a href='category.php?id=89'>Junior</a>
                            <a href='category.php?id=90'>Senior</a>
                        </div>
                    </div>
                </li>
            </ul>  
        </div>
    </body>
</html>
4

4 に答える 4

1

サブメニューのdivを対応するタグの前に配置してみてください（これらのdivをタグの後に配置するのではなく）。

たとえば、これを試してください。

<div class='sub' id="submenu0_0" onMouseOver="openSub('submenu0_0')" onMouseOut="startSubTimer()">
    <a href='view.php?id=110'>Year 11</a>
    <a href='view.php?id=109'>Year 12</a>
</div>
<a href="#" onMouseOver="openSub('submenu0_0')" onMouseOut="startSubTimer()">Business Studies</a>

これの代わりに：

<a href="#" onMouseOver="openSub('submenu0_0')" onMouseOut="startSubTimer()">Business Studies</a>
<div class='sub' id="submenu0_0" onMouseOver="openSub('submenu0_0')" onMouseOut="startSubTimer()">
    <a href='view.php?id=110'>Year 11</a>
    <a href='view.php?id=109'>Year 12</a>
</div>
于 2012-08-07T10:30:06.313 に答える
1

DOM アクセス

getElementbyId();まず、ページ全体が読み込まれる前に DOM にアクセスしないようにする必要があります。

body 終了タグの直前でスクリプトを呼び出すか、コード全体を 1 つの関数でラップして、最後、body 終了タグの直前で呼び出す必要があります。ヤフーです！Google フロントエンド開発のベスト プラクティス。

$(document).ready() functionまたは、JQueryまたは別の JavaScript ライブラリのドキュメント読み込み関数を使用することもできます。ただし、この問題だけに対処するためにライブラリを使用するのはやり過ぎです。

グローバル変数

関数スコープ外でvarmenuItem = 0;を宣言することにより、変数をグローバルとして宣言することになります。これは非常に悪いことです! Web サイトの名前空間全体が乱雑になります。関数内で変数を宣言してクロージャを作成します。

また、後でオブジェクト (DOM オブジェクト) を参照するため、menuItem 変数を整数で初期化する必要はありません。Javascript は型を宣言する必要がなく、これは機能しますが、コードの読者との混乱を引き起こしています。var menuItem;関数内で使用するだけです。

CSS ブロックの書式設定コンテキスト

display: inlineまたはdisplay: blockHTML 要素を使用してみてください。W3C CSS ビジュアル フォーマット モデルを読んで理解してください。

于 2012-08-07T10:26:38.643 に答える
0

これは癖モードによるものですか？

次のような適切な doctype を使用してみてください。

<!DOCTYPE HTML>
<html>
<head>

</head>
<body>

</body>
</html>
于 2012-08-07T10:37:16.610 に答える
0

サブレベルごとに個別の ID があるため、それぞれにスタイルを追加できます。

#submenu0_0 > a {top:0px;}
#submenu0_1 > a {top:25px;}
#submenu0_2 > a {top:50px;}
#submenu0_3 > a {top:75px;}
于 2012-08-07T10:35:43.363 に答える