0

サブメニュー項目を選択するためのマウスオーバードロップダウンを持つメニューを作成しようとしています。現在、共通メニューは機能していますが、サブメニューを適切なカテゴリの下に表示する最善の方法がわかりません。

メニューは現在、歪んだ比率でテーブルを引き伸ばしています。カテゴリのタイトル テーブルに影響を与えずに、現在のテーブルのサイズを維持し、カテゴリ タイトルの下にドロップするようにします。それに表示する別のテーブルを作成する必要がありますか? 私は Web プログラミングに詳しくありません。

私の 2 番目の問題は、おそらく非常に簡単な問題です。私は答えが何であるか分かりません。Google で運を試してみましたが、うまくいきませんでした。メニューを表示し続けるには、「onMouseOut」表示を何に設定する必要がありますか。サブリンクの 1 つをクリックしようとすると、現在サブメニューが消えます。

<td>
<STYLE TYPE="text/css">
    #menu1 { display : none }
    #menu2 { display : none }
    #menu3 { display : none }
    A:link {color:blue; text-decoration:none}
    A:hover {color:blue; text-decoration:underline}
</STYLE>
    <div id="menu">
        <table border="0" cellspacing="0" cellpadding="2" align="center">
            <tbody>
                <tr>
                    <td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';" onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="top-center" onclick="window.location.href='index2.php?page=files'"> <a href="index2.php?page=files">Files</a></td>

                <td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';" onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="center">


                        <SPAN onMouseOver="document.all.menu2.style.display = 'block'"onMouseOut="document.all.menu2.style.display = 'none'">

                            Configuration<BR>

                        </SPAN>
                        <SPAN ID="menu2" onClick="document.all.menu1.style.display = 'none'">
                            <a href="index2.php?page=SysConfig">System Configuration</a><BR>
                            <a href="index2.php?page=FileConfig">File Configuration</a><BR>
                            <a href="index2.php?page=NetworkConfig">Network Configuration</a><BR>

                        </SPAN>
                        <td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';" onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="center" onclick="window.location.href='index2.php?page=Maintenance'"> <a href="index2.php?page=Maintenance">Maintenance Mode</a></td>

                        <td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';" onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="center" onclick="window.location.href='index2.php?page=IETM'"> <a href="index2.php?page=IETM">IETM</a></td>
                        <td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';"onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="center"> 



                            <SPAN onMouseOver="document.all.menu3.style.display = 'block'"onMouseOut="document.all.menu3.style.display = 'none'">

                                Power Options<BR>
                            </SPAN>

                            <SPAN ID="menu3" onClick="document.all.menu1.style.display = 'none'">

                                <A href="index2.php?page=Shutdown">Shutdown</A><BR>
                                <A href="index2.php?page=Reboot">Reboot</A><BR>                 
                            </SPAN>
                        </td>
                    </td>                   
                </tr>
            </tbody>
        </table>
    </div>  
</TABLE>

4

1 に答える 1

2

まず第一に、テーブルを使用しないでください。多くの方法でオプションを制限しています。代わりに div を使用するか、特定の例 (メニュー用) で html リストを使用できます。

あなたの協奏的な問題に関するもう1つのことは、javaScriptを使用して（物事を少し単純化するために）、次のように言うことができるかどうかです。

<ul id="menu">
    <li id="link1">Link 1
        <ul class="dropdown">
            <li id="sl1">Sublink 1</li>
            <li id="sl2">Sublink 2</li>
            <li id="sl3">Sublink 3</li>                                
        </ul>
    </li>
<li id="link2">Link 2</li>
        ...
<li id="link3">Link 3</li>        
        ...
</ul>

もちろん、適切な css を使用して、この上で JavaScript を使用して広告の表示/非表示機能を使用します。

$(document).ready(function() {

$("#menu li").mouseenter(function(){
    $(this).find(".dropdown").show();
});

$("#menu li").mouseleave(function(){
    $(this).find(".dropdown").hide();
});

});

于 2012-08-01T23:22:35.883 に答える