姚迎迎

jQuery 向上弹出式菜单

—

by

迎迎 姚
in

Slide Up Menu / jQuery 向上弹出式菜单

The jQuery Slide Up Menu it’s a good alternative to other existing menus giving the possibility to position the menu on the bottom of your header image or at the bottom of the window, acting like Windows Start Menu. You can let it behave like a normal menu or you can add HTML code inside and put whatever you want inthere

jQuery的向上滑动菜单，这是一个很好的替代现有的可能定位在你的头部图像的下面或在窗口底部的菜单上，就像Windows的“开始”菜单的菜单。 你可以把它像一个普通的菜单， 或者你可以添加HTML代码或者任何你想要的放里面。

Options / 设置

slideUpSpeed / 上弹速度

Number of milliseconds to slide up the submenu items Default: 500

slideDownSpeed / 回收速度

Number of milliseconds to slide down the submenu items Default: 500

ease

Ease animation effect Default: easeInOutCubic (supported without jquery.ease plugin)

Use false to remove the animation ease.
To use any other animation pls use the jQuery Easing Plugin

stopQueue / 停止动画队列

Stop or continue animation on event change Default: true 

Stopping the queue animation will provide a faster visual feedback when sliding trough the menu items although the effects may appear snappier. Using stopQueue false you may get animations executing long after you hovered the item (if the user will rapidly and repeatedly hover the mouse over the menu items).

Usage / 怎么使用

HTML HEAD code / Html 头部调用的代码

<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script> //if needed
<script type="text/javascript" src="jquery.slideup.menu.1.0.min.js"></script>

HTML BODY code / html 菜单的代码

<div class="top-menu">
<ul class="top-menu-main">
  <li class="first">
    <ul class="top-submenu">
      <li class="first">Subitem 1.0</li>
      <li class="">Subitem 1.1</li>
      <li class="">Subitem 1.2</li>
      <li class="">Subitem 1.3</li>
      <li class="last">Subitem 1.4</li>
    </ul>
    <a href="#" class="menu-item-text">Item 1</a>
  </li>
  <li class="">
    <ul class="top-submenu">
      <li class="first">Subitem 2.0</li>
      <li class="">Subitem 2.1</li>
      <li class="last">Subitem 2.2</li>
    </ul>
    <a href="#" class="menu-item-text">Item 2</a>
  </li>
  <li class="">
    <ul class="top-submenu">
      <li class="first">Subitem 3.0</li>
      <li class="last">Subitem 3.1</li>
    </ul>
    <a href="#" class="menu-item-text">Item 3</a>
  </li>
</ul>
</div>

Javascript code / 执行代码

<script>
var opts = {slideUpSpeed:500, slideDownSpeed: 200};
$(document).ready(function(){
  $(".top-menu").slideupmenu(opts);
});
</script>