jquery网站左侧弹出导航菜单js代码

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

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

以下是 jquery网站左侧弹出导航菜单js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="gb2312">
  <meta http-equiv="Content-Type" content="text/html">
  <title>jquery��վ��൯�������˵�</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="stylesheet" href="css/style.css">
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/menu.js"></script>

</head>

<body>
<div id="pgcontainer">
  <header>
    <div id="navbar">
      <a href="#" class="menubtn">menu</a>
      <!-- use captain icon for toggle menu -->
      <div id="hamburgermenu">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
    <div class="overlay"></div>
  </header>
  
  <div id="content">
    <h1>Here's A Basic Heading</h1>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus massa vestibulum nisl pretium, dapibus dignissim orci ultricies. Duis eleifend sem vitae laoreet interdum. Praesent diam elit, consequat quis velit nec, fringilla auctor neque. Nullam nisi justo, cursus tincidunt metus a, imperdiet dictum lacus.</p>
    
    <p>Cras sed faucibus ipsum. Curabitur rutrum mauris eu urna aliquam, vel luctus tortor posuere. Donec elit turpis, mollis non diam consequat, laoreet mattis velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum at nulla bibendum, ornare nunc accumsan, vestibulum libero. Cras luctus mauris quis diam cursus tristique.</p>
    
    <p>Praesent ipsum purus, vestibulum id sapien ac, pretium venenatis justo. Phasellus sit amet quam eget eros egestas ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam placerat ultrices felis ut ullamcorper.</p>
    
    <p>Maecenas molestie risus quis sagittis malesuada. Morbi eleifend adipiscing dapibus. Pellentesque quis arcu convallis, pellentesque libero vel, ultricies dui. Duis dapibus pellentesque facilisis. Praesent vitae nunc vehicula, placerat orci in, elementum turpis. Aenean porta turpis et iaculis venenatis.</p>
    
    <p>Duis euismod massa elementum orci consequat, vel dictum sapien scelerisque. Mauris sollicitudin eu diam a auctor. Nulla faucibus elit eu diam luctus faucibus. Duis lorem lectus, dignissim vitae nulla vitae, aliquam dictum ipsum. Curabitur cursus massa in adipiscing congue. Fusce volutpat neque id ipsum blandit, a vestibulum lacus mollis.</p>
    
    <p>Vivamus sit amet sapien et sem eleifend scelerisque ut et turpis. Fusce iaculis magna dui, quis tincidunt nunc fringilla ullamcorper.</p>
    
    <p>Suspendisse sapien sem, laoreet euismod nisi sit amet, tincidunt placerat tellus. Nam nunc odio, fermentum vitae erat nec, bibendum aliquet mauris.</p>
    
    <p>Integer malesuada nisl in porttitor accumsan. Integer dictum felis dolor, sit amet vestibulum libero tincidunt nec. Donec id quam at purus molestie gravida. Praesent quis consectetur tortor, id semper nunc. Morbi porta tempor risus nec tempor. </p>
  </div>
</div><!-- @end #pgcontainer -->
</body>
</html>

JS代码(menu.js):

$(function(){
	var menuwidth = 240;
	// 边栏宽度 var menuspeed = 400;
	// 边栏滑出耗费时间 var $bdy = $('body');
	var $container = $('#pgcontainer');
	var $burger = $('#hamburgermenu');
	var negwidth = "-"+menuwidth+"px";
	var poswidth = menuwidth+"px";
	$('.menubtn').on('click',function(e){
	if($bdy.hasClass('openmenu')){
	jsAnimateMenu('close');
}
else{
	jsAnimateMenu('open');
}
}
);
	$('.overlay').on('click',function(e){
	if($bdy.hasClass('openmenu')){
	jsAnimateMenu('close');
}
}
);
	function jsAnimateMenu(tog){
	if(tog == 'open'){
	$bdy.addClass('openmenu');
	$container.animate({
	marginRight:negwidth,marginLeft:poswidth}
,menuspeed);
	$burger.animate({
	width:poswidth}
,menuspeed);
	$('.overlay').animate({
	left:poswidth}
,menuspeed);
}
if(tog == 'close'){
	$bdy.removeClass('openmenu');
	$container.animate({
	marginRight:"0",marginLeft:"0"}
,menuspeed);
	$burger.animate({
	width:"0"}
,menuspeed);
	$('.overlay').animate({
	left:"0"}
,menuspeed);
}
}
}
);

CSS代码(style.css):

@charset "UTF-8";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;outline:none;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
html{overflow-y:scroll;}
body{width:100%;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background:#353839;font-size:62.5%;line-height:1;}
br{display:block;line-height:1.6em;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
ol,ul{list-style:none;}
input,textarea{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;outline:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
strong,b{font-weight:bold;}
em,i{font-style:italic;}
table{border-collapse:collapse;border-spacing:0;}
img{border:0;max-width:100%;}
h1{font-family:'Montserrat',Arial,sans-serif;font-size:3.6em;line-height:1.3em;font-weight:700;color:#484848;text-align:center;letter-spacing:-0.05em;margin-bottom:15px;}
p{font-size:1.7em;line-height:1.5em;margin-bottom:20px;color:#616161;}
/** page structure **/
#content{max-width:1000px;background:#fff;padding:25px 65px;margin:0 auto;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;}
header{display:block;width:100%;height:52px;background:#5186a8;padding:15px 10px;margin-bottom:25px;}
#navbar{max-width:1000px;margin:0 auto;}
.menubtn{position:relative;z-index:101;color:#274a61;text-decoration:none;font-size:0em;line-height:0em;top:2px;padding:15px;background-image:url('../img/hamburger.png');background-position:50% 50%;background-size:25px 25px;background-repeat:no-repeat;}
.menubtn:hover,.openmenu .menubtn{color:#bdd43e;background-image:url('../img/hamburger-active.png');}
/** toggle menu **/
body.openmenu{position:fixed;overflow:hidden;}
#pgcontainer{padding:45px 0;margin:0;}
.overlay{position:fixed;z-index:99;background-color:rgba(0,0,0,0.5);bottom:0;right:0;left:0;}
.openmenu .overlay{top:0;}
#hamburgermenu{height:100%;width:0;background:#373737;position:fixed;top:0;left:0;z-index:101;overflow:hidden;-webkit-box-shadow:3px 0 7px rgba(0,0,0,0.55);-moz-box-shadow:3px 0 7px rgba(0,0,0,0.55);box-shadow:3px 0 7px rgba(0,0,0,0.55);}
#hamburgermenu ul{margin-top:45px;z-index:101;overflow-y:auto;overflow-x:hidden;}
#hamburgermenu ul li{display:block;}
#hamburgermenu ul li a{display:block;min-width:130px;padding:18px 8px;color:#cdcdcd;font-size:1.45em;font-weight:bold;text-decoration:none;text-align:center;}
#hamburgermenu li a:hover{color:#fff;background:#2c2c2c;}

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