jQuery 向上弹出式菜单

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 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>
    <a href="#" class="menu-item-text">Item 1</a>
  <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>
    <a href="#" class="menu-item-text">Item 2</a>
  <li class="">
    <ul class="top-submenu">
      <li class="first">Subitem 3.0</li>
      <li class="last">Subitem 3.1</li>
    <a href="#" class="menu-item-text">Item 3</a>

Javascript code / 执行代码

var opts = {slideUpSpeed:500, slideDownSpeed: 200};


Simple jquery horizontal accordion


html code

  • Freebies
    Download free files to make your job easier.

  • Tutorials
    Tips and tricks to help you keep up with the latest technology.

  • Inspiration
    Get inspired by what other designers are doing.

  • Inspiration
    Get inspired by what other designers are doing.

css dode

#horizontal_accordion{   list-style: none;   margin: 0 0 0 -2px;   padding: 0;   background:#dedede;   height:auto;  width:664px;   display:block;   height:115px; border:1px solid #c5c5c5; border-right:none;  }

#horizontal_accordion li{ overflow: hidden;   width: 109px; height:115px; padding:0; float: left;   display: block;    list-style:none;  background:none;   border-right:1px solid #c5c5c5;}
#horizontal_accordion .eightdgift { background:url(../images/8dgif.png) #dbdbdb no-repeat;}
#horizontal_accordion .currnet { width: 333px; background-position: 0 -115px; background-color:#fff;}

#horizontal_accordion li p{   margin: 0;   padding: 20px 20px 20px 130px;   display: block;}

javascript code

另外你还需要对 thickbox.js 或者 thickbox-compressed.js 进行一点修改。打开JS 文件,找到 ‘tb_pathToImage’ ,正确设置 loadingAnimation.gif 的路径。

2.在你的网页中外调 ThickBox.CSS 文件.

或者打开 thickbox.css ,把代码复制到现有的 css 文件里。
3. 观看例子, 学习使用不同的方法调用 ThickBox 的功能.
html 图片 示例

Single Image


Windows IE 6.0, Windows FF, Windows Opera 9.0, Macintosh Safari 1.3.2 & 2.0.3, Macintosh FF 1.5

MIT 许可

特此授权。任何人可以免费获取此软件的拷贝和他相关文档(“软件”),此软件不受任何限制。所不受的限制包括: 有权利使用, 拷贝, 修改, 合并, 出版, 分发, 颁发从属许可, 和/或买卖该软件的拷贝.