Vertical Sliding Menu(垂直滑动菜单)

Vertical Sliding Menu(垂直滑动菜单)

垂直滑动菜单这种特效已经有许多网站在应有,当我们点击按钮的时候,会滑动出一个下拉菜单,我们再点击按钮的时候,下拉菜单就被隐藏到盒子里。这样的垂直滑动菜单,非常有利于用户体验。

Html Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="button">
    <img src="images/button.png" width="184" height="32" class="menu_class" />
    <ul class="the_menu">
        <li><a href="#">A Website #1</a></li>
        <li><a href="#">A Website #2</a></li>
        <li><a href="#">A Link #1</a></li>
        <li><a href="#">A Link #2</a></li>
        <li><a href="#">A Website #3</a></li>
        <li><a href="#">A Website #4</a></li>
        <li><a href="#">A Link #3</a></li>
        <li><a href="#">A Link #4</a></li>
    </ul>
</div>

jQuery Code:

1
2
3
4
5
$(document).ready(function () {
    $('img.menu_class').click(function () {
	$('ul.the_menu').slideToggle('medium');
    });
});

演示:

http://blog.moocss.com/jQuery/demo25/sliding-menu/sliding_menu.html

下载:

http://blog.moocss.com/jQuery/demo25/

站点统计