这是一个全屏响应式手机菜单插件，点击右下角的菜单按钮，会从头而降菜单列表。
淘建站为您提供更多_导航菜单_收缩菜单_全屏，在此特别感谢您对我们的支持与厚爱！
查看演示
演示不了，点击反馈
加入收藏
下载 210 次
打赏作者
觉得不错，可打赏下作者
下载资源
免费共享
特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。
手机菜单列表和关闭按钮
<nav id="main-nav">
<ul>
<li><a href="http://www.sucaiq.com/js"><span>jQuery</span></a></li>
<li><a href="http://www.sucaiq.com/templates"><span>模板</span></a></li>
<li><a href="http://www.sucaiq.com/php"><span>PHP</span></a></li>
</ul>
<a href="http://www.sucaiq.com/js" class="cd-close-menu">Close<span></span></a>
</nav>点击显示菜单和关闭菜单
jQuery(document).ready(function($) {
//open menu
$('.cd-menu-trigger').on('click', function(event) {
event.preventDefault();
$('#cd-main-content').addClass('move-out');
$('#main-nav').addClass('is-visible');
$('.cd-shadow-layer').addClass('is-visible');
});
//close menu
$('.cd-close-menu').on('click', function(event) {
event.preventDefault();
$('#cd-main-content').removeClass('move-out');
$('#main-nav').removeClass('is-visible');
$('.cd-shadow-layer').removeClass('is-visible');
});
//clipped image - blur effect
set_clip_property();
$(window).on('resize', function() {
set_clip_property();
});
function set_clip_property() {
var $header_height = $('.cd-header').height(),
$window_height = $(window).height(),
$header_top = $window_height - $header_height,
$window_width = $(window).width();
$('.cd-blurred-bg').css('clip', 'rect(' + $header_top + 'px, ' + $window_width + 'px, ' + $window_height + 'px, 0px)');
}
});
