0

メニュー項目と画像を表示できる asp.net Web サイトのドロップダウン メニューが必要です。http://www.petcarerx.com/のようなものが必要です。青いバーのメニュー項目 (犬、猫、その他のペット) のいずれかにマウスを置いたままにすると、ドロップダウン メニューが開き、メニュー項目といくつかの画像が表示されます。水平方向に完全に拡大したいのですが、どのコントロールを使用すればよいか教えてください。 ?

よろしく、 アシフ・ハメド

4

5 に答える 5

0

小さなグーグルを検索して、私はこのウェブサイトに出くわしました：http:

//tympanus.net/codrops/2010/11/25/overlay-effect-menu/

素晴らしい種類のjqueryドロップダウンメニューの素晴らしいチュートリアルがあります

于 2012-09-07T06:33:49.067 に答える
0

Telerikの Kendo UI メニューで良い経験をしました。

于 2012-09-07T06:27:56.000 に答える
0

あなたのための簡単な例：

HTML:

<ul id="menu">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">about</a>
        <div class="submenu">
            <div class="col1 border-right">
                <ul>
                    <li><a href="#">about link 1</a></li>
                    <li><a href="#">about link 2</a></li>
                    <li><a href="#">about link 3</a></li>
                    <li><a href="#">about link 4</a></li>
                </ul>                                    
            </div>
            <div class="col2 border-right">
                <img src="http://www.funnycutepics.com/wp/wp-content/uploads/2011/03/fan-pet-karma.jpg" / width="100" />
            </div>
            <div class="col3">
                <img src="http://www.funnycutepics.com/wp/wp-content/uploads/2011/03/fan-pet-karma.jpg" / width="100" />
            </div>
        </div>            
    </li>
    ...
    ...
    ...
</ul>

jQuery: 

$("ul#menu li").hover(function(){
    $(this).find('a').next('.submenu').stop(true, true).slideToggle(300);
}, function(){
    $(this).find('a').next('.submenu').stop(true, true).slideToggle(200);
})​

CSS:

ul#menu { 
    width: 100%; 
    position: relative; 
    height: 30px; 
    background:#ccc;
    border-bottom: 1px solid #666;        
}

ul#menu li { 
    display: block; 
    float: left; 
    height: 30px; 
    line-height: 30px;      
}

ul#menu li a { display: block; padding: 0 20px; }

.submenu {
   position: absolute;
   width: 100%;
   left: 0px;
   display: none;
   border-bottom: 1px solid #ccc;    
}

ul#menu li div.submenu ul li {
   float: none;
}

.col1, .col2, .col3 {
    width: 33%;
    background: #f4f4f4;
    float: left;
}

.col2, .col3 {
    text-align: center;
}

.border-right { border-right:1px solid #ccc; }

デモ

</p>

于 2012-09-07T10:18:37.233 に答える
0

テレリック メニュー コントロールを使用します...

http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/templates/defaultcs.aspx

于 2012-09-07T09:21:52.937 に答える
0

私はこの目的でSuperfishを使用しています。少しカスタマイズすると、Multilevel と Image がサポートされます。

于 2012-09-07T06:40:41.520 に答える