0
4

5 回答 5

0

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

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

有一个很棒的教程，用于一种很棒的 jquery 下拉菜单

于 2012-09-07T06:33:49.067 回答
0

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

于 2012-09-07T06:40:41.520 回答
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

使用 Telerik 菜单控制...

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

于 2012-09-07T09:21:52.937 回答
0

我对Telerik 的 Kendo UI 菜单有很好的体验。

于 2012-09-07T06:27:56.000 回答