0

メニューは3段階。最初のレベルには、「すべて表示」という項目が 1 つだけあります。第 2 レベルには製品カテゴリが含まれます。第 3 レベルにはサブカテゴリが含まれます。メニューレベルはもうありません。

サブカテゴリは水平に表示する必要があります:

Show all
+-----------+
|Category1  |+-----------------------------------------------------------+
|Category2 >|| Subcategory21  Subcategory24  Subcategory27  Subcategory2A|
|Category3  || Subcategory22  Subcategory25  Subcategory28  Subcategory2B|
+-----------+| Subcategory23  Subcategory26  Subcategory28               |
             +-----------------------------------------------------------+

これを実装するためにjquery ui menu menu widgetを試しました。サブカテゴリは縦に表示されます。サブカテゴリが水平に表示されるようにこれを変更する方法は?

これに対してjquery uiにパッチを当てることができますか、これを可能にする他のコントロールがありますか。サブメニューは、マウス ホバーで開く必要があります。jquery-ui メニューでは、マウス ホバーを使用して開くことができますが、第 3 レベルを水平にレンダリングする方法が見つかりませんでした。

データは実行時にデータベースから読み取られます。jquery、jquery ui、ASP.NET/Mono MVC2 を使用

アップデート

デモはhttp://jsfiddle.net/cNgG5/にあります 

<ul id="menu" style="width:110px">
    <li><a href="#">Category</a>

        <ul>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
        </ul>
    </li>
<script>    
$(function () {
    $("#menu").menu();
} );
</script>

カーソルをカテゴリに移動すると、1 列のメニューが表示されます。複数の列にレンダリングする方法は?

4

2 に答える 2

1

CSSを使用できます。たとえば、すべてのサブカテゴリにクラスを与え、float:left を設定します。もちろん、あなたをより良くするためにもっと情報が必要です。jsfiddle でコードをアップロードできれば、より良いでしょう。

わかりました、グループの水平メニューのライブ デモをできる限りシンプルにここでお届けします。各グループに 1 つの li を含め、リアルタイムごとに div を入力する必要があります。css だけを使用して、必要なことを行うことができます。

jQuery UI 水平グループ メニュー

<ul id="menu" style="width:110px">
    <li><a href="#">Category</a>

        <ul>
            <li>
                <div><a href="">submenu</a></div>
                <div><a href="">submenu</a></div>
                <div><a href="">submenu</a></div>
            </li>
            <li>
                <div><a href="">submenu</a></div>
                <div><a href="">submenu</a></div>
            </li>
            <li>
                <div><a href="">submenu</a></div>
                <div><a href="">submenu</a></div>
                <div><a href="">submenu</a></div>
                <div><a href="">submenu</a></div>
            </li>
        </ul>
    </li>
</ul>

css は次のようになります。

#menu{width:400px;float:left;}
#menu  li ul li{
    width:100px;
    float:left;
    word-wrap: break-word;
}
#menu li ul li div{
    width:100px;
    float:left;
}
于 2013-03-02T21:19:44.477 に答える
1

jquery-ui-1.10.1.custom.ss (またはその下で使用している同等のもの) にこれを入れます:

.ui-menu {
    width: 30em; /* or whatever width you want it to be */
}

と

.ui-menu-item {
    display: inline-block;
    width: 100% /* TAKE THIS OUT! */
}

アップデート：

申し訳ありません..十分なテストを行っていません..代わりにこれを実行してください（コード内に説明があります） http://jsfiddle.net/cNgG5/7/

/* this only applies to the first level submenu.. the 30em can be replaced with whatever width 
   you want the menu to appear in */
#menu>.ui-menu-item .ui-menu {
    width: 30em;
}
/* this only applies to the items in the first level submenu.. for them to 
stack up next to each other, we want to override the width: 100% given in 
.ui-menu .ui-menu-item, without affecting the first level menu
(that was the problem with my previous answer) */
#menu>.ui-menu-item .ui-menu .ui-menu-item {
    display: inline-block;  
    width: auto;
}

トリック:直接の子セレクターを使用します。

注:最終的なソリューションに複数のレベルのサブメニューがある場合 (つまり、メニュー -> サブメニュー -> サブメニューなど)、上記のプロセスを繰り返すことができます.. 上記のスタイルを適切なレベルに適用するだけです。

于 2013-03-03T07:29:43.697 に答える