Question

我需要一个asp.net网站的下拉菜单，我可以在这里有菜单项和图片。我需要一个像http://www.petcarerx.com/这样的人。如果我将鼠标放在蓝条上的任何菜单项（狗，猫，其他宠物，下拉菜单打开，菜单项和一些图像。我希望它水平扩展到全长。请建议我应该使用哪个控件？

此致 Asif Hameed

Answer 1

我对Kendo UI menu by Telerik有很好的经验。

Answer 2

搜索一个小谷歌，我偶然发现了这个网站：

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

有一个很好的jquery下拉菜单的教程

Answer 3

我为此目的使用Superfish。稍微自定义时支持多级和图像。

Answer 4

使用telerik菜单控件...

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

Answer 5

一个简单的例子：

<强> 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; }

asp.net网站的下拉菜单

5 个答案:

DEMO