jQuery手机端右侧弹出菜单js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery手机端右侧弹出菜单js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery�ֻ����Ҳ൯���˵�</title>
<link rel="stylesheet" href="css/cooker.css">
<link rel="stylesheet" href="css/docs.css">
<link rel="stylesheet" href="css/drawer.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/jquery.drawer.min.js"></script>
<base target="_blank" />
</head>
<body class="drawer drawer-right">
<!-- ���� ��ʼ -->
<div class="drawer-toggle drawer-hamberger"><span></span></div>
<div class="drawer-main drawer-default">
  <nav class="drawer-nav" role="navigation">
    <div class="drawer-brand">
      <a href="#">Drawer</a>
    </div>
    <p class="drawer-nav-title">Demo</p>
    <ul class="drawer-nav-list">
      <li><a href="#">Left</a></li>
      <li><a href="#">Right</a></li>
      <li><a href="#">Responsive Left</a></li>
      <li><a href="#">Responsive Right</a></li>
    </ul>
    <p class="drawer-nav-title">Other Projects</p>
    <ul class="drawer-nav-list">
      <li><a href="#">Animsition</a></li>
      <li><a href="#">Chaffle</a></li>
      <li><a href="#">Drawer</a></li>
      <li><a href="#">Oblurlay</a></li>
      <li><a href="#">Ripller</a></li>
    </ul>
    <p class="drawer-nav-title">Authtor</p>
    <ul class="drawer-nav-list">
      <li><a href="#">blivesta.com</a></li>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">GitHub</a></li>
      <li><a href="#">Dribbble</a></li>
    </ul>
  </nav>
</div>

<div class="drawer-overlay">
    <main class="masthead" role="main">
        <div class="container">
            <h1>�ֻ����Ҳ���Ӧʽ�����˵�</h1>
            <p class="lead">A small CSS3 and jQuery plugin for app style drawer menu.</p>
            <p class="center-block form-inline" style="max-width:480px"><a class="button button-border button-lg js-trigger"><span class="oi oi-menu"></span>��</a></p>
        </div>
    </main>
    <div class="site-body">
      <div class="site-body-inner container">
      </div>
    </div>
</div><!-- /.drawer-overlay --> 

<script>
	$(document).ready(function(){
	$('.drawer').drawer();
	$('.js-trigger').click(function(){
	  $('.drawer').drawer("open");
	});
	});
</script> 
<!-- ���� ���� -->
</body>
</html>

CSS代码(docs.css):

/*! * drawer v2.0.0 * * Licensed under MIT * Author:blivesta * */
.highlight{padding:9px 14px;margin-bottom:14px;background-color:#f7f7f9;border:1px solid #e1e1e8;border-radius:4px;}
.highlight pre{padding:0;margin-top:0;margin-bottom:0;white-space:nowrap;background-color:transparent;border:0;}
.highlight pre code{font-size:inherit;color:#333;/* Effectively the base text color */
}
.highlight pre .lineno{display:inline-block;width:22px;padding-right:5px;margin-right:10px;color:#bebec5;text-align:right;}
/* .highlight{background:#ffffff;}
*/
.highlight .c{font-style:italic;color:#998;}
/* Comment */
.highlight .err{color:#a61717;background-color:#e3d2d2;}
/* Error */
.highlight .k{font-weight:bold;}
/* Keyword */
.highlight .o{font-weight:bold;}
/* Operator */
.highlight .cm{font-style:italic;color:#998;}
/* Comment.Multiline */
.highlight .cp{font-weight:bold;color:#999;}
/* Comment.Preproc */
.highlight .c1{font-style:italic;color:#998;}
/* Comment.Single */
.highlight .cs{font-style:italic;font-weight:bold;color:#999;}
/* Comment.Special */
.highlight .gd{color:#000;background-color:#fdd;}
/* Generic.Deleted */
.highlight .gd .x{color:#000;background-color:#faa;}
/* Generic.Deleted.Specific */
.highlight .ge{font-style:italic;}
/* Generic.Emph */
.highlight .gr{color:#a00;}
/* Generic.Error */
.highlight .gh{color:#999;}
/* Generic.Heading */
.highlight .gi{color:#000;background-color:#dfd;}
/* Generic.Inserted */
.highlight .gi .x{color:#000;background-color:#afa;}
/* Generic.Inserted.Specific */
.highlight .go{color:#888;}
/* Generic.Output */
.highlight .gp{color:#555;}
/* Generic.Prompt */
.highlight .gs{font-weight:bold;}
/* Generic.Strong */
.highlight .gu{color:#aaa;}
/* Generic.Subheading */
.highlight .gt{color:#a00;}
/* Generic.Traceback */
.highlight .kc{font-weight:bold;}
/* Keyword.Constant */
.highlight .kd{font-weight:bold;}
/* Keyword.Declaration */
.highlight .kp{font-weight:bold;}
/* Keyword.Pseudo */
.highlight .kr{font-weight:bold;}
/* Keyword.Reserved */
.highlight .kt{font-weight:bold;color:#458;}
/* Keyword.Type */
.highlight .m{color:#099;}
/* Literal.Number */
.highlight .s{color:#d14;}
/* Literal.String */
.highlight .na{color:#008080;}
/* Name.Attribute */
.highlight .nb{color:#0086b3;}
/* Name.Builtin */
.highlight .nc{font-weight:bold;color:#458;}
/* Name.Class */
.highlight .no{color:#008080;}
/* Name.Constant */
.highlight .ni{color:#800080;}
/* Name.Entity */
.highlight .ne{font-weight:bold;color:#900;}
/* Name.Exception */
.highlight .nf{font-weight:bold;color:#900;}
/* Name.Function */
.highlight .nn{color:#555;}
/* Name.Namespace */
.highlight .nt{color:#000080;}
/* Name.Tag */
.highlight .nv{color:#008080;}
/* Name.Variable */
.highlight .ow{font-weight:bold;}
/* Operator.Word */
.highlight .w{color:#bbb;}
/* Text.Whitespace */
.highlight .mf{color:#099;}
/* Literal.Number.Float */
.highlight .mh{color:#099;}
/* Literal.Number.Hex */
.highlight .mi{color:#099;}
/* Literal.Number.Integer */
.highlight .mo{color:#099;}
/* Literal.Number.Oct */
.highlight .sb{color:#d14;}
/* Literal.String.Backtick */
.highlight .sc{color:#d14;}
/* Literal.String.Char */
.highlight .sd{color:#d14;}
/* Literal.String.Doc */
.highlight .s2{color:#d14;}
/* Literal.String.Double */
.highlight .se{color:#d14;}
/* Literal.String.Escape */
.highlight .sh{color:#d14;}
/* Literal.String.Heredoc */
.highlight .si{color:#d14;}
/* Literal.String.Interpol */
.highlight .sx{color:#d14;}
/* Literal.String.Other */
.highlight .sr{color:#009926;}
/* Literal.String.Regex */
.highlight .s1{color:#d14;}
/* Literal.String.Single */
.highlight .ss{color:#990073;}
/* Literal.String.Symbol */
.highlight .bp{color:#999;}
/* Name.Builtin.Pseudo */
.highlight .vc{color:#008080;}
/* Name.Variable.Class */
.highlight .vg{color:#008080;}
/* Name.Variable.Global */
.highlight .vi{color:#008080;}
/* Name.Variable.Instance */
.highlight .il{color:#099;}
/* Literal.Number.Integer.Long */
body,html{font-family:'Roboto',sans-serif;background:#eee;}
hr{width:60px;margin:40px auto;border:2px solid #ddd;}
.container{max-width:768px;}
h1,h2,h3,h4{font-weight:100;}
.labels{display:inline-block;padding:5px 10px;margin-bottom:10px;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-weight:100;color:#bfa44c;background-color:#e7ddbc;border-radius:2px;}
.icon-blivesta{display:inline-block;width:16px;height:16px;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%09%3Cpath%20d%3D%22M8.773%2C0L4.781%2C3.991l3.993%2C3.991l-4.01%2C4.009L8.773%2C16H16V0H8.773z%20M12.398%2C13.703l-2.017-2.016l2.017-2.016l2.016%2C2.016%0A%09L12.398%2C13.703z%20M12.398%2C6.259l-2.017-2.016l2.017-2.016l2.016%2C2.016L12.398%2C6.259z%22/%3E%0A%3C/svg%3E");-webkit-background-size:16px 16px;background-size:16px;}
.icon-blivesta.icon-sm{width:12px;height:12px;-webkit-background-size:12px 12px;background-size:12px;}
.icon-blivesta.icon-lg{width:24px;height:24px;-webkit-background-size:12px 12px;background-size:12px;}
.icon-blivesta.icon-circle{border-radius:50%;}
.dropdown-toggle:hover{cursor:pointer;}
.button-border,.button-border-primary,.button-border-warning,.button-border-success,.button-border-danger,.button-border-info{background-color:transparent;}
.button{padding:15px 30px;margin-bottom:10px;font-weight:400;}
.select{display:inline-block !important;width:auto !important;}
.social{padding-top:10px;margin-bottom:10px;}
.social li{height:20px;overflow:hidden;}
.social .btn-gh{width:95px;}
.social .btn-tw{width:99px;}
.social .btn-gg{width:73px;}
.social .btn-fb{width:115px;}
.social .btn-fb iframe{overflow:hidden;}
.header{margin-bottom:0;}
.header .navbar-nav > li > a:hover,.header .header-brand:hover{opacity:.6;}
.navbar-header{float:left;}
.navbar-right{float:right !important;}
.masthead{position:relative;padding:60px 15px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.1);background-color:#8c7732;background-image:-webkit-linear-gradient(45deg,#8c7732 0%,#d3c184 100%);background-image:-o-linear-gradient(45deg,#8c7732 0%,#d3c184 100%);background-image:linear-gradient(45deg,#8c7732 0%,#d3c184 100%);}
.masthead h1{margin-bottom:5px;font-size:50px;font-weight:700;text-transform:capitalize;opacity:.95;}
.masthead .lead{opacity:.7;}
.masthead p{margin:0 auto 20px;font-weight:100;}
.masthead a{color:#fff;}
.site-home .masthead{text-align:center;}
@media (min-width:768px){.site-home .masthead{padding-top:100px;padding-bottom:100px;}
.site-home .masthead h1{font-size:70px;}
}
@media (min-width:768px){.body{padding:40px 0;}
}
.adpacks{bottom:10px;left:10px;z-index:99;max-width:340px;min-height:130px;padding:15px;margin:0;margin-bottom:30px;font-size:12px;text-align:left!important;background:#fff;background:rgba(255,255,255,.2);border-radius:4px;}
.adpacks:before,.adpacks:after{display:table;content:" ";}
.adpacks:after{clear:both;}
.site-home .adpacks{margin-right:auto;margin-left:auto;}
.adpacks-wrap .adpacks-img{float:left;width:145px;}
.adpacks-wrap .adpacks-img img{margin-right:15px;}
.adpacks-poweredby{display:block;margin-top:10px;}
.section{padding:30px 0;}
.section:last-child{padding-bottom:60px;border-bottom:none;}
.site-home .section{text-align:center;}
.section-title{margin-top:10px;margin-bottom:20px;}
.icon-mark{margin-top:30px;margin-bottom:30px;color:#e7ddbc;text-align:center;}
.icon-mark .oi{font-size:54px;}
.section-body .lead{margin-top:30px !important;}
.section-body .lead:first-child{margin-top:0;}
.section-body h2{margin-top:30px;margin-bottom:30px;}
.section-body .highlight{margin-bottom:60px;text-align:left !important;}
.section-body .highlight:last-child{margin-bottom:0;}
.footer{padding-top:40px;padding-bottom:40px;color:#777;background-color:#e7ddbc;border-top:1px solid #fff;}
.footer hr{width:60px;margin:40px auto;border:2px solid #d3c184;}
.site-home .footer{text-align:center;}
/*# sourceMappingURL=docs.css.map */

附件:下载该文件资源,减少时间成本(增值服务)