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

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

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://fonts.googleapis.com/css?family=Marcellus+SC"></script>
<div id="jq-slideup">
<div class="header">
</div>
<div class="top-menu style4">
    <ul class="top-menu-main" style="cursor: pointer;">
      <li class="first" style="position: relative; float: left; list-style: none;">
        <ul class="top-submenu" style="bottom: 38px; min-width: 100%; position: absolute; padding: 0px; margin: 0px; white-space: nowrap; width: 177px; display: none;">
          <li class="first" style="list-style: none;">Submenu item 1</li>
          <li class="" style="list-style: none;">Submenu item 2</li>
          <li class="" style="list-style: none;">Submenu item 3</li>
          <li class="" style="list-style: none;">Submenu item 4</li>
          <li class="last" style="list-style: none;">Item 5</li>
        </ul>
        <a href="#" class="menu-item-text" style="display: block;">Menu item 1</a>
      </li>
      <li class="" style="position: relative; float: left; list-style: none;">
        <ul class="top-submenu" style="bottom: 38px; min-width: 100%; position: absolute; padding: 0px; margin: 0px; white-space: nowrap; width: 360px; display: none;">
          <li class="first text-html" style="list-style: none;">
            <h1>Title H1</h1>
            <p>Now, as the business of standing mast-heads, ashore or afloat, is a very ancient and interesting one, let us in some measure expatiate here.</p>
            <p>I take it, that the earliest standers of mast-heads were the old Egyptians; because, in all my researches, I find none prior to them.</p>
            <p>For though their progenitors, the builders of Babel, must doubtless, by their tower</p>
          </li>
        </ul>
        <a href="#" class="menu-item-text" style="display: block;">Html content</a>
      </li>
      <li class="" style="position: relative; float: left; list-style: none;">
        <ul...

CSS

body {font-family: 'Marcellus SC', serif; font-size:120%;}
p {word-wrap: break-word;}

/* =Clearfix
-------------------------------------------------------------- */
.clearfix:after{
	clear:both;
	content:"\0020";
	display:block;
	height:0;
	max-height:0;
	overflow:hidden;
	visibility:hidden;
}

.clearfix{
	display:inline-block;
}

*html .clearfix{
	height:1%;
}

.clearfix{
	display:block;
}

.clear {
	clear:both;
}


#jq-slideup ul.top-menu-main > li {
  margin: 0 10px;
  display: block;
}

#jq-slideup .top-menu {
  font-family: "Arial Narrow", Georgia, Tahoma, arial;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  background: transparent;
  height: 37px;
  border-bottom: 1px solid #333;
}

#jq-slideup .header {
  height: 300px; 
  background: #ccc;
  -moz-box-shadow: 0 0 8px #ccc;
  -webkit-box-shadow: 0 0 8px #ccc;
  box-shadow: 0 -5px 10px #ccc;
}

#jq-slideup .content {
}

#jq-slideup .content .main {padding-top: 20px;}
#jq-slideup .donate {
  padding: 5px;
  background: #cfcfcf;
  color: #333;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  
}
#jq-slideup .donate form {margin-bottom: 5px;}
#jq-slideup .donate > div {
  padding: 10px;
  position: relative; float: left; width : 370px;
  font-style: italic;
  line-height: 15px;
  font-size: 11px;
}
#jq-slideup .s-menu {margin: 0; padding: 0; margin-top: 20px;}
#jq-slideup .s-menu li {list-style-type: none; width: 100px; padding: 5px; margin: 2px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  cursor: pointer;
  background: #efefef;
  width: 100%;
}
#jq-slideup .s-menu li:hover {background: #cfcfcf; color: #000;}
.s-menu li.selected {background: #fff; color: #000;}

#jq-slideup .s-menu li {padding: 12px; margin-bottom: 5px;}
#jq-slideup .col-1-3 {width: 45%; margin-right: 2%; position: relative; float: left;}

#jq-slideup div.button {
  cursor: pointer;
  font-family: georgia, tahoma, arial;
  font-size: 20px;
 ...

JavaScript

/* jQuery SlideUp menu v1.0 - http://adis.ro/jquery/slideup/
 * Open source under the BSD License. 
 * Copyright  2011 Adi Ban
 * All rights reserved (please read the full terms on the original website) */
(function($){$.fn.slideupmenu=function(b){var c=jQuery.extend({slideUpSpeed:500,slideDownSpeed:500,ease:"easeInOutCubic",stopQueue:true},b);var d=this;$(this).find('li').unbind('click mouseenter mouseleave');$(this).find('ul.top-menu-main').css({'cursor':'pointer'});$(this).find('ul.top-menu-main > li').css({'position':'relative','float':'left','list-style':'none'});$(this).find('ul.top-menu-main > li > a').css({'display':'block'});$(this).find('ul.top-submenu').css({'display':'none'}).css({'bottom':$('ul.top-menu-main > li').height()+'px','display':'none','min-width':'100%','position':'absolute','padding':'0px','margin':'0px','white-space':'nowrap'});$(this).find('ul.top-submenu > li').css({'list-style':'none'});$(this).find('ul.top-submenu').css({'display':'none'}).css({'bottom':$('ul.top-menu-main > li').height()+'px'});$(this).find('ul.top-submenu > li').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')});$(this).find('ul.top-menu-main > li').hover(function(){var a=$(this).find('ul').css('width',$(this).find('ul').width()+'px');if(c.stopQueue)a=a.stop(true,true);a.slideDown(c.slideUpSpeed,c.ease)},function(){var a=$(this).find('ul');if(c.stopQueue)a=a.stop(true,true);a.slideUp(c.slideDownSpeed,c.ease)})}})(jQuery);


(function($){
    var opts = {slideUpSpeed:500, slideDownSpeed: 200};
    $(document).ready(function(){
      $('ul.s-menu li').click(function(){
        $(this).parent().find('li').removeClass('selected');
        $(this).addClass('selected');
      });
      $('ul.s-style li').click(function(){
        $('.top-menu').removeClass().addClass('top-menu').addClass('style'+$(this).attr('rel'));
        $(".top-menu").slideupmenu(opts);  
      });
      $('ul.s-way li[rel="1"]').live('click', function() {
       ...