2

私が取り組んでいるプロジェクトのドロップダウン メニューを作成していて、いくつかの問題に遭遇しました。各サブメニューの幅とstyle.leftが、ルートレベルのメニュー項目がホバーされたときに呼び出される JavaScript 関数によって設定されるように構築されています。これらのメニュー項目にカーソルを合わせると、次のように表示されます。

サブメニューは明らかに左側にかなりの数ピクセルずれています。サブメニューのstyle.leftを変更しないと、代わりに次のようになります。

ここで、アライメントは正しいです。この障害は、Windows 7 と Linux の両方の Mozilla Firefox と Google Chrome の両方で発生しているため、プラットフォームに関連する障害ではありません。

エラーを生成するコードは次のとおりです。

menu.js

function show_sub_menu(cath){
    var menu_item = document.getElementById(cath)    //cath is an integer passed to the function
    var m_width = Math.floor(window.innerWidth*0.7*0.2);  //Menu is 70% of window, each item is 20% of menu
    menu_item.style.left = cath*m_width;  //Set the style.left dynamically depending on what menu item is to be displayed
                                          //This last line of code produces the error
}

menu.css

#m_wrapper{
    position:relative;
    width:100%;
}

#menu{
    position:relative;
    width:70%;
}

#menu li{
    width:20%;
    float:left;
}

#menu div{
    position:absolute;
    width:20%;
    top:30px;
}

#menu div a{
    position:relative;
    display:block;
    padding:5px;
}

menu.htm

<div id=m_wrapper>
    <ul id=menu>
        <li onMouseOver=show_sub_menu('0')>Item 1</li>
            <div id=0 onMouseOver=show_sub_menu('0')>
                <a href=#>Item 1.1</a>
                <a href=#>Item 1.2</a>
            </div>
        </li>
    </ul>
</div>

.js のm_widthは私の画面設定では 235px で、m_width*cathは 0 であるため、これは非常に非論理的に思えます。

4

1 に答える 1

2

まず、リスト項目が早期に閉じられ、ID が数字で始まってはなりません。それでは、それをきれいにしましょう：

<div id="m_wrapper">
    <ul id="menu">
        <li onMouseOver="show_sub_menu('0');">
            Item 1
            <div id="s0" onMouseOver="show_sub_menu('0');">
                <a href="#">Item 1.1</a>
                <a href="#">Item 1.2</a>
            </div>
        </li>
    </ul>
</div>

次に、CSS を確認してみましょう。サブメニューをメイン メニュー項目に対して相対的に配置したいのでposition:relative;、リスト項目自体を配置して、そこから他のものを配置できるスペースを作成しましょう。

リスト項目の左上隅に基づいてサブメニューを配置するコンテキストができたので、本当に必要なのは、そのメニューをその隅から 30 ピクセル下に表示することです。左右の調整は必要ありません。

#m_wrapper{
    position:relative;
    width:100%;
}

#menu{
    position:relative;
    width:70%;
}

#menu li{
    position:relative;
    width:20%;
    float:left;
}

#menu div{
    position:absolute;
    width:100%;
    top:30px;
    left:0;
}

#menu div a{
    display:block;
    padding:5px;
}

ここから、サブメニューを必要な場所に配置する必要がありますが、常に表示されています。代わりにJavaScript を変更するように追加および変更するdisplay:none;ことで、これを処理します。#menu divdisplay

function show_sub_menu(cath){
    var menu_item = document.getElementById("s"+cath);
    menu_item.style.display = "block";
}

これにより、必要なときに必要な場所にメニューが表示されるようになります。消える行為はあなたに任せます。

于 2013-04-17T20:59:57.727 に答える