-2

jQuery と CSS を使用したドロップダウン メニューについて質問があります。以下は私の HTML 構造です。

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <img src="images/Icons.png" alt="a"/>
            <div class="menu" id="a">
                <ul>
                    <li><a href="#">link 1</a></li>
                    <li><a href="#">link 2</a></li>
                </ul>
            </div>
        </td>
        <td>
            <img src="images/Icons.png" alt="b"/>
            <div class="menu" id="b">
                <ul>
                    <li><a href="#">link 3</a></li>
                    <li><a href="#">link 4</a></li>
                </ul>
            </div>
        </td>
        <td>
            <img src="images/Icons.png" alt="c"/>
            <div class="menu" id="c">
                <ul>
                    <li><a href="#">link 5</a></li>
                    <li><a href="#">link 6</a></li>
                </ul>
            </div>
        </td>
    </tr>
</table>

マウスを画像に合わせると、divが表示されてメニューが表示され、メニューリンクがクリック可能になり、マウスが画像から離れると、divが非表示になるか、ユーザーがメニューからマウスを離します。

教えてください、よろしくお願いします。

4

2 に答える 2

3

テーブルの代わりに順序付けられていないリストを使用することを強くお勧めします.htmlは次のようになります。

<nav id="main-nav">
    <ul>
        <li>
            <a href="#">
                <img src="whatever.jpg" alt="" />
            </a>
            <ul class="dropdown">
                <li><a href="#">Lorem ipsum dolor sit amet consecteur</a></li>
                <li><a href="#">Lorem ipsum dolor sit amet consecteur</a></li>
                <li><a href="#">Lorem ipsum dolor sit amet consecteur</a></li>
                <li><a href="#">Lorem ipsum dolor sit amet consecteur</a></li>
            </ul>
        </li>
    </ul>
</nav>

そしてあなたのスタイル：

#main-nav > ul {}
#main-nav > ul > li {}
#main-nav > ul > li > a {}
#main-nav > ul > li:hover > ul { display:block; }
#main-nav > ul > li > ul { display:none; }
#main-nav > ul > li > ul > li {}
#main-nav > ul > li > ul > li > a {}

このhtml/cssを使用して、機能させたいものを作成できます

于 2013-06-07T22:42:49.997 に答える
0

次のように 2 つの CSS クラスを追加することで、これにアプローチします。

.hidden
{
display: none;
width: 0px;
height: 0px;
}

.show
{
/*add any styling desired when showing*/
}

次に、マウスオーバー効果について：

window.onload = function(){
     document.getElementById('imageId').onmouseover = function() {
          document.getElementById('menuId').classname = 'show';
     }

     document.getElementById('imageId').onmouseout = function() {
          document.getElementById('menuId').classname = 'hidden';
     }
}

次に、メニューのデフォルトの css クラスを隠しクラスに設定するだけで問題ありません。

于 2013-06-06T16:56:11.100 に答える