JQuery はシンプルなドロップダウン メニューを実装します

軽量の DOM フレームワークとして、JQuery は私たちに多くの利便性をもたらします。 ここでは、JQuery を使用して簡単なドロップダウン メニューを実装する方法を説明します。

1. まず、Google からスクリプト ライブラリを引用します。 HTML の一部を書きます:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

3. 次に、そのための CSS を定義します

<div class="menu">
    <span><a href="#">菜单一</a> </span><span><a href="#">菜单二</a>
        <div>
            <a href="#">子项一</a> <a href="#">子项二</a> <a href="#">子项三</a>
        </div>
    </span><span><a href="#">菜单三</a>
        <div>
            <a href="#">子项一</a> <a hef="#">子项二</a> <a href="#">子项三</a>
        </div>
    </span>
</div>

4.hover(over,out)

ホバー イベント (マウスがオブジェクト上を移動し、オブジェクトの外に移動する) をシミュレートするメソッド。これは、頻繁に使用されるタスクに「保持」状態を提供するカスタム メソッドです。

<style type="text/css">
    .menu span
    {
        float: left;
        margin-right: 10px;
        position: relative;
        z-index: 100;
    }
    .menu a
    {
        text-decoration: none;
        display: block;
    }
    .menu span:hover div, .menu span div:hover
    {
        display: block;
    }
    .menu span div
    {
        border: 1px solid black;
        padding: 5px;
        background-color: white;
        display: none;
        position: absolute;
        white-space: nowrap;
    }
</style>

以上です、シンプルなドロップダウン メニューを実装します。

シンプルなドロップダウン メニューを実装する JQuery に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。