javascript - マウスオーバー時の垂直タブ付きメガメニュー

Question

このWebサイトで使用されているものと同様のメガメニューを設計する必要があります..

私の実際のメニューは動的で、asp.net Web フォームに基づいています。この時点で実際にどのように実装するかはわかりません。出発点として、最初に親メニューを生成してから、論理的にサブメニューと jQuery の垂直タブとそのメニュー ラッパーのコンテンツをラップすることを考えています。

下の画像はより良いアイデアを与えることができます。

現在、関連メニューのタブを親メニューの下にラップする方法がわかりません。

次に、タブのクリックイベントをホバーに変更したいと思います。

私が実際にやりたいのは、データベーステーブル自体にも多くの変更を加える必要がある完全に動的にすることです。

ダイナミックメガメニューの正しい方向性を教えていただければ幸いです...

とりあえず基礎から始めたいと思います。私はjsfiddleをセットアップしましたが、正しい親メニューの下に表示されるように、各親メニューのタブをラップする方法がわかりません。

<div>
    <ul>
        <li>Home</li>
        <li>
            <About us <ul>
                <li>Sub Menu 1</li>
                <li>Sub Menu 2</li>
                <li>Sub Menu 3</li>
    </ul>
    </li>
    <li>Project
        <ul>
            <li>Project 1</li>
            <li>Project 2</li>
            <li>Project 3</li>
        </ul>
    </li>
    <li>Media
        <ul>
            <li>Latest News</li>
            <li>Press Release</li>
        </ul>
    </li>
    <li>Contact us</li>
    </ul>
</div>

残念ながら、asp.net 関連の asp.net メガ メニューにはあまり適していません。PHP の場合、多くのオープンソースのものとプラグインが利用可能であるため、多くのものを見つけることができます。

メガ メニューは非常に多くのサイトで使用されており、完全な例としてこれらのメニューの設計上の考慮事項について多くを見つけることはできません。.net の専門家の何人かが、多くの人にとって学習曲線として機能するこの問題に対処できる記事を作成できることを願っています。