以下是 html5触屏滑动侧边栏导航菜单特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html5触屏滑动侧边栏导航菜单特效</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
<link href="css/offcanvas.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="overlay"></div>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed pull-left" data-toggle="offcanvas">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstrap响应式导航菜单</a>
</div>
<div id="navbar" class="collapse navbar-collapse sidebar-offcanvas">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#about">项目</a></li>
<li><a href="#contact">关于我们</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row-offcanvas row-offcanvas-left">
<div class="starter-template">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/thumb-1.jpg" alt>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/thumb-2.jpg" alt>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/thumb-1.jpg" alt>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/thumb-2.jpg" alt>
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/thumb-1.jpg" alt>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/thumb-2.jpg" alt>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/thumb-1.jpg" alt>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/thumb-2.jpg" alt>
</a>
</div>
</div>
</div>
</div>
</div><!-- /.container -->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/offcanvas.js"></script>
</body>
</html>JS代码(offcanvas.js):
/*! Bootstrap-off-canvas-push - v1.0.2* Copyright (c) 2015 Steffen Ermel;
Licensed MIT **/
jQuery(document).ready(function($){
function whichTransitionEvent(){
var el = document.createElement('event'),transitionEvents ={
'WebkitTransition':'webkitTransitionEnd',// Saf 6,Android Browser 'MozTransition':'transitionend',// only for FF < 15 'transition':'transitionend' // IE10,Opera,Chrome,FF 15+,Saf 7+}
;
for(var t in transitionEvents){
if( el.style[t] !== undefined ){
return transitionEvents[t];
}
}
}
var transitionEvent = whichTransitionEvent();
$('[data-toggle="offcanvas"],.overlay').click(function (){
$('.overlay').toggleClass('active');
$('body').toggleClass('active');
$('.row-offcanvas').toggleClass('active');
$('.sidebar-offcanvas').toggleClass('active');
$('.navbar-toggle').toggleClass('collapsed');
$('.navbar-collapse').addClass('transition');
$('.transition').one(transitionEvent,function(e){
$('.navbar-collapse').removeClass('transition');
}
);
}
);
$('.navbar .nav a').click(function (){
$('.overlay').removeClass('active');
$('body').removeClass('active');
$('#navbar').removeClass('in');
$('.row-offcanvas').removeClass('active');
$('.sidebar-offcanvas').removeClass('active');
$('.navbar-toggle').addClass('collapsed');
$('.transition').one(transitionEvent,function(e){
$('.navbar-collapse').removeClass('transition');
}
);
}
);
$('.overlay').swiperight(function (){
$('.overlay').addClass('active');
$('body').addClass('active');
$('#navbar').addClass('in');
$('.row-offcanvas').addClass('active');
$('.sidebar-offcanvas').addClass('active');
$('.navbar-toggle').removeClass('collapsed');
$('.navbar-collapse').addClass('transition');
}
);
$('.overlay').swipeleft(function (){
$('.overlay').removeClass('active');
$('body').removeClass('active');
$('#navbar').removeClass('in');
$('.row-offcanvas').removeClass('active');
$('.sidebar-offcanvas').removeClass('active');
$('.navbar-toggle').addClass('collapsed');
$('.transition').one(transitionEvent,function(e){
$('.navbar-collapse').removeClass('transition');
}
);
}
);
}
);
CSS代码(default.css):
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
分享到QQ
分享到微博
微信扫一扫
