asp.net 网站的下拉菜单答案

【问题标题】：dropdown menu for asp.net websiteasp.net 网站的下拉菜单
【发布时间】：2012-09-07 06:23:46
【问题描述】：

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

问候，阿西夫·哈米德

【问题讨论】：

Asif，我制作了一个小演示，希望你会喜欢，见下面我的answer。

标签： javascript jquery asp.net html css

【解决方案1】：

我对@987654321@ 有很好的体验。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

使用 Telerik 菜单控制...

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

【讨论】：

【解决方案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; }

DEMO

【讨论】：