html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery网站侧边隐藏展开导航插件 - 站长素材</title>
<link rel="stylesheet" type="text/css" href="fancynav/css/fancynav.min.css">
</head>
<body>
<div class="opener"><span data-fancynav-header="My cool company name">Navigation Header</span></div>
<div class="wrapper">
<ul class="demolist fancynav-add" style="display: none">
<li><a href="index.html">Item #1</a></li>
<li><a href="index.html">Item #2</a></li>
<li><a href="index.html">Item #3</a></li>
<li><a href="index.html">Item #4</a></li>
</ul>
</div>
<script type="text/javascript" src="assets/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="fancynav/js/jquery.fancynav.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(‘.demo-buttons span, .opener > span‘).fancynav();
});
</script>
</body>
</html>
fancynav.min.css:
/**
* FancyNav - Mobile Navigation with CSS3 Transitions
* http://kratzik.com/fancynav
* Copyright (c) 2017 Johann Kratzik
* Version 1.0.0
*/
.fancynav-inner,.fancynav-mainnav,.fancynav-subnav,.fancynav-overlay{-moz-transition:all .5s;-o-transition:all .5s;-webkit-transition:all .5s;transition:all .5s}.fancynav-outer{position:relative;overflow:hidden;min-height:100vh;background:rgba(68,68,68,0.3)}.fancynav-inner{background:#fff;min-height:100vh;position:relative;z-index:999}.fancynav-mainnav{position:absolute;left:0;top:0;bottom:0;width:300px;z-index:1001;visibility:hidden;background:#444}.fancynav-header{font-size:18px;color:#fff;overflow:hidden;background:rgba(0,0,0,0.2)}.fancynav-header::before,.fancynav-header::after{display:table;content:" "}.fancynav-header::after{clear:both}.fancynav-title{float:left;padding:15px}.fancynav-close{float:right;width:50px;text-align:center;padding:15px 0;font-size:16px;font-weight:700;color:#fff;line-height:1.2;cursor:pointer}.fancynav-close::before{content:"\2715"}.fancynav-mainnav ul{margin:0;padding:0;list-style-type:none;border-top:1px solid rgba(0,0,0,0.3)}.fancynav-mainnav > ul{position:relative;z-index:1}.fancynav-mainnav ul > li{border-bottom:1px solid rgba(0,0,0,0.3)}.fancynav-mainnav ul > li > a{display:block;padding:15px 60px 15px 15px;position:relative;color:#fff;font-size:16px;line-height:1.2;text-decoration:none}.fancynav-subnav{position:absolute;left:0;top:0;z-index:1;width:100%;height:100vh;background:#444;visibility:hidden;-moz-transform:translate(-100%,0);-0-transform:translate(-100%,0);-webkit-transform:translate(-100%,0);-ms-transform:translate(-100%,0);transform:translate(-100%,0)}.fancynav-subnav-active{visibility:visible;-moz-transform:translate(0,0);-o-transform:translate(0,0);-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.fancynav-next{position:absolute;top:0;right:0;width:50px;height:100%;cursor:pointer;color:#fff;background:rgba(0,0,0,0.1)}.fancynav-next::before,.fancynav-next::after{content:‘ ‘;position:absolute;width:10px;height:2px;left:20px;top:50%;background:#fff;border-radius:1px}.fancynav-next::before{margin-top:-5px;-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.fancynav-next::after{margin-top:1px;-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.fancynav-back{box-sizing:border-box;position:relative;font-size:13px;line-height:1;font-weight:700;padding:10px 15px 10px 45px;display:block;text-transform:uppercase;color:#fff;cursor:pointer;background:rgba(0,0,0,0.1)}.fancynav-back::before,.fancynav-back::after{content:‘ ‘;position:absolute;width:10px;height:2px;left:15px;top:50%;background:#fff;border-radius:1px}.fancynav-back::before{margin-top:-5px;-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.fancynav-back::after{margin-top:1px;-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.fancynav-overlay{visibility:hidden;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1000;background:rgba(68,68,68,0.3);cursor:pointer}.fancynav .fancynav-overlay{visibility:visible}.fancynav-blue .fancynav-mainnav,.fancynav-blue .fancynav-subnav{background:#336ca6}.fancynav-blue .fancynav-outer,.fancynav-blue .fancynav-overlay{background:rgba(51,108,166,0.3)}.fancynav-green .fancynav-mainnav,.fancynav-green .fancynav-subnav{background:#48a770}.fancynav-green .fancynav-outer,.fancynav-green .fancynav-overlay{background:rgba(72,167,112,0.3)}.fancynav-animation-slide-top .fancynav-mainnav{-moz-transform:translate(-100%,0);-o-transform:translate(-100%,0);-webkit-transform:translate(-100%,0);-ms-transform:translate(-100%,0);transform:translate(-100%,0)}.fancynav-animation-slide-top.fancynav-opened .fancynav-mainnav{visibility:visible;-moz-transform:translate(0,0);-o-transform:translate(0,0);-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.fancynav-animation-slide-along .fancynav-mainnav{-moz-transform:translate(-50%,0);-o-transform:translate(-50%,0);-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0)}.fancynav-animation-slide-along.fancynav-opened .fancynav-mainnav{visibility:visible;z-index:999;-moz-transform:translate(0,0);-o-transform:translate(0,0);-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.fancynav-animation-slide-along .fancynav-inner{z-index:1001}.fancynav-animation-slide-along.fancynav-opened .fancynav-inner{-moz-transform:translate(300px,0);-o-transform:translate(300px,0);-webkit-transform:translate(300px,0);-ms-transform:translate(300px,0);transform:translate(300px,0)}.fancynav-animation-slide-reverse .fancynav-mainnav{-moz-transform:translate(100%,0);-o-transform:translate(100%,0);-webkit-transform:translate(100%,0);-ms-transform:translate(100%,0);transform:translate(100%,0)}.fancynav-animation-slide-reverse.fancynav-opened .fancynav-mainnav{visibility:visible;-moz-transform:translate(0,0);-o-transform:translate(0,0);-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.fancynav-animation-slide-reverse .fancynav-inner{z-index:1001}.fancynav-animation-slide-reverse.fancynav-opened .fancynav-inner{-moz-transform:translate(300px,0);-o-transform:translate(300px,0);-webkit-transform:translate(300px,0);-ms-transform:translate(300px,0);transform:translate(300px,0)}.fancynav-animation-reveal.fancynav-opened .fancynav-mainnav{visibility:visible}.fancynav-animation-reveal .fancynav-inner{z-index:1001}.fancynav-animation-reveal.fancynav-opened .fancynav-inner{-moz-transform:translate(300px,0);-o-transform:translate(300px,0);-webkit-transform:translate(300px,0);-ms-transform:translate(300px,0);transform:translate(300px,0)}.fancynav-animation-push .fancynav-mainnav{-moz-transform:translate(-100%,0);-o-transform:translate(-100%,0);-webkit-transform:translate(-100%,0);-ms-transform:translate(-100%,0);transform:translate(-100%,0)}.fancynav-animation-push.fancynav-opened .fancynav-mainnav{visibility:visible;-moz-transform:translate(0,0);-o-transform:translate(0,0);-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.fancynav-animation-push .fancynav-inner{z-index:1001}.fancynav-animation-push.fancynav-opened .fancynav-inner{-moz-transform:translate(300px,0);-o-transform:translate(300px,0);-webkit-transform:translate(300px,0);-ms-transform:translate(300px,0);transform:translate(300px,0)}.fancynav-animation-rotate-in .fancynav-mainnav{-moz-transform:translate(-100%,0) rotateY(-90deg);-o-transform:translate(-100%,0) rotateY(-90deg);-webkit-transform:translate(-100%,0) rotateY(-90deg);-ms-transform:translate(-100%,0) rotateY(-90deg);transform:translate(-100%,0) rotateY(-90deg);-moz-transform-origin:100% 50%;-o-transform-origin:100% 50%;-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.fancynav-animation-rotate-in.fancynav-opened .fancynav-mainnav{visibility:visible;-moz-transform:translate(0,0) rotateY(0);-o-transform:translate(0,0) rotateY(0);-webkit-transform:translate(0,0) rotateY(0);-ms-transform:translate(0,0) rotateY(0);transform:translate(0,0) rotateY(0)}.fancynav-animation-rotate-in .fancynav-outer{-moz-perspective:1500px;-webkit-perspective:1500px;perspective:1500px;-moz-perspective-origin:0 50%;-webkit-perspective-origin:0 50%;perspective-origin:0 50%}.fancynav-animation-rotate-in.fancynav-opened .fancynav-inner{-moz-transform:translate(300px,0);-o-transform:translate(300px,0);-webkit-transform:translate(300px,0);-ms-transform:translate(300px,0);transform:translate(300px,0)}.fancynav-animation-rotate-out .fancynav-mainnav{-moz-transform:translate(-100%,0) rotateY(90deg);-o-transform:translate(-100%,0) rotateY(90deg);-webkit-transform:translate(-100%,0) rotateY(90deg);-ms-transform:translate(-100%,0) rotateY(90deg);transform:translate(-100%,0) rotateY(90deg);-moz-transform-origin:100% 50%;-o-transform-origin:100% 50%;-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.fancynav-animation-rotate-out.fancynav-opened .fancynav-mainnav{visibility:visible;-moz-transform:translate(0,0) rotateY(0);-o-transform:translate(0,0) rotateY(0);-webkit-transform:translate(0,0) rotateY(0);-ms-transform:translate(0,0) rotateY(0);transform:translate(0,0) rotateY(0)}.fancynav-animation-rotate-out .fancynav-outer{-moz-perspective:1500px;-webkit-perspective:1500px;perspective:1500px;-moz-perspective-origin:0 50%;-webkit-perspective-origin:0 50%;perspective-origin:0 50%}.fancynav-animation-rotate-out.fancynav-opened .fancynav-inner{-moz-transform:translate(300px,0);-o-transform:translate(300px,0);-webkit-transform:translate(300px,0);-ms-transform:translate(300px,0);transform:translate(300px,0)}.fancynav-animation-rotate-delayed .fancynav-mainnav{-moz-transform:translate3d(-100%,0,0) rotateY(90deg);-o-transform:translate3d(-100%,0,0) rotateY(90deg);-webkit-transform:translate3d(-100%,0,0) rotateY(90deg);-ms-transform:translate3d(-100%,0,0) rotateY(90deg);transform:translate3d(-100%,0,0) rotateY(90deg);-moz-transform-origin:0 50%;-o-transform-origin:0 50%;-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.fancynav-animation-rotate-delayed.fancynav-opened .fancynav-mainnav{visibility:visible;-moz-transition-delay:.1s;-o-transition-delay:.1s;-webkit-transition-delay:.1s;transition-delay:.1s;-moz-transform:translate3d(0,0,0) rotateY(0deg);-o-transform:translate3d(0,0,0) rotateY(0deg);-webkit-transform:translate3d(0,0,0) rotateY(0deg);-ms-transform:translate3d(0,0,0) rotateY(0deg);transform:translate3d(0,0,0) rotateY(0deg)}.fancynav-animation-rotate-delayed .fancynav-outer{-moz-perspective:1500px;-webkit-perspective:1500px;perspective:1500px;-moz-perspective-origin:0 50%;-webkit-perspective-origin:0 50%;perspective-origin:0 50%}.fancynav-animation-rotate-delayed .fancynav-inner{z-index:1001}.fancynav-animation-rotate-delayed.fancynav-opened .fancynav-inner{-moz-transform:translate(300px,0);-o-transform:translate(300px,0);-webkit-transform:translate(300px,0);-ms-transform:translate(300px,0);transform:translate(300px,0)}.fancynav-animation-scale-up .fancynav-mainnav{-moz-transform:translate3d(0,0,-300px);-o-transform:translate3d(0,0,-300px);-webkit-transform:translate3d(0,0,-300px);-ms-transform:translate3d(0,0,-300px);transform:translate3d(0,0,-300px);-moz-perspective:1000px;-webkit-perspective:1000px;perspective:1000px}.fancynav-animation-scale-up.fancynav-opened .fancynav-mainnav{visibility:visible;-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.fancynav-animation-scale-up .fancynav-outer{-moz-perspective:1500px;-webkit-perspective:1500px;perspective:1500px;-moz-perspective-origin:0 50%;-webkit-perspective-origin:0 50%;perspective-origin:0 50%}.fancynav-animation-scale-up .fancynav-inner{-moz-perspective:1000px;-webkit-perspective:1000px;perspective:1000px;z-index:1001}.fancynav-animation-scale-up.fancynav-opened .fancynav-inner{-moz-transform:translate3d(300px,0,0);-o-transform:translate3d(300px,0,0);-webkit-transform:translate3d(300px,0,0);-ms-transform:translate3d(300px,0,0);transform:translate3d(300px,0,0)}.fancynav-animation-fall-down .fancynav-mainnav{-moz-transform:translate(0,-100%);-o-transform:translate(0,-100%);-webkit-transform:translate(0,-100%);-ms-transform:translate(0,-100%);transform:translate(0,-100%)}.fancynav-animation-fall-down.fancynav-opened .fancynav-mainnav{visibility:visible;-moz-transform:translate(0,0);-o-transform:translate(0,0);-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.fancynav-animation-fall-down .fancynav-inner{z-index:1001}.fancynav-animation-fall-down.fancynav-opened .fancynav-inner{-moz-transform:translate(300px,0);-o-transform:translate(300px,0);-webkit-transform:translate(300px,0);-ms-transform:translate(300px,0);transform:translate(300px,0)}
jquery.fancynav.min.js:
/**
* FancyNav - Mobile Navigation with CSS3 Transitions
* http://kratzik.com/fancynav
* Copyright (c) 2017 Johann Kratzik
* Version 1.0.0
*/
!function(a,b){"use strict";function c(b,c){this.options=c,this.$currentLink=b,this.$rootBody=a("body"),void 0!==b.data("fancynav-add")&&(this.options=a.extend({},this.options,{add:b.data("fancynav-add")})),void 0!==b.data("fancynav-animation")&&(this.options=a.extend({},this.options,{animation:b.data("fancynav-animation")})),void 0!==b.data("fancynav-class")&&(this.options=a.extend({},this.options,{navClass:b.data("fancynav-class")})),void 0!==b.data("fancynav-header")&&(this.options=a.extend({},this.options,{navHeader:b.data("fancynav-header")})),void 0!==b.data("fancynav-back")&&(this.options=a.extend({},this.options,{backText:b.data("fancynav-back")})),this.init()}c.prototype={init:function(){this.initNavLinkEvents()},initNavLinkEvents:function(){var a=this;this.$currentLink.on("click",function(b){b.preventDefault(),a.initPageLayout(),a.generateNavBlock(),setTimeout(function(){a.$rootBody.addClass("fancynav-opened")},10)})},initPageLayout:function(){this.$outerWrap=a(‘<div class="fancynav-outer"></div>‘),this.$innerWrap=a(‘<div class="fancynav-inner"></div>‘),this.$innerWrap.append(this.$rootBody.contents()),this.$outerWrap.append(this.$innerWrap),this.$rootBody.append(this.$outerWrap),this.initOverlay()},initOverlay:function(){var b=this;this.pageOverlay=a(‘<div class="fancynav-overlay">‘),this.pageOverlay.on("click",function(a){b.destroy()}),this.$innerWrap.append(this.pageOverlay)},generateNavBlock:function(){var b=this;this.$mainNavContent=a(‘<nav class="fancynav-mainnav"></nav>‘),this.$mainNav=a("<ul>"),b.$rootBody.addClass("fancynav fancynav-animation-"+b.options.animation),b.options.navClass&&b.$rootBody.addClass(b.options.navClass),this.$navHeader=a(‘<header class="fancynav-header"></header>‘),this.$navTitle=a(‘<div class="fancynav-title"></div>‘),this.$navTitle.text(b.options.navHeader),this.$navCloser=a(‘<span class="fancynav-close"></span>‘),this.$navCloser.on("click",function(a){b.destroy()}),this.navBlocksClone=this.convertIntoArray(this.options.add),this.navBlocksClone.forEach(function(c){var d=a(c).clone();b.setNavLinksFromClone(d.contents())}),this.customizeNavBlock(),this.$mainNavContent.prepend(this.$navHeader).append(this.$mainNav),this.$outerWrap.prepend(this.$mainNavContent),this.$navHeader.prepend(this.$navTitle).append(this.$navCloser),this.listItems=a("li",this.$mainNavContent),this.listItems.each(function(b){var c=b+1;a(this).addClass("fancynav-item-"+c)})},convertIntoArray:function(b){if("string"==typeof b){var c=a.map(b.split(","),a.trim);return c}return b},setNavLinksFromClone:function(a){this.$mainNav.append(a)},customizeNavBlock:function(){var b=this,c=this.$mainNav.find(‘li:has("ul")‘);c.each(function(){var c=a(this),d=c.find("> a"),e=c.find("ul").eq(0);c.addClass("fancynav-has-inner");var f=b.options.backText?b.options.backText:d.text(),g=a("<div>");g.addClass("fancynav-subnav");var h=a(‘<span class="fancynav-back"></span>‘);h.text(f),h.on("click",function(a){a.preventDefault(),g.removeClass("fancynav-subnav-active")});var i=a(‘<span class="fancynav-next"></span>‘);i.on("click",function(a){a.preventDefault(),g.hasClass("fancynav-subnav-active")||g.addClass("fancynav-subnav-active")}),d.append(i),g.append(h).append(e),c.append(g)})},destroy:function(){var a=this;a.$rootBody.find(".fancynav-mainnav");a.$rootBody.removeClass("fancynav-opened"),setTimeout(function(){a.$navCloser.off(),a.$currentLink.removeData("FancyNav"),a.pageOverlay.off(),a.pageOverlay.remove(),a.$mainNavContent.remove(),a.$rootBody.removeClass("fancynav fancynav-animation-"+a.options.animation).removeClass(a.options.navClass).append(a.$innerWrap.contents()),a.$outerWrap.remove()},a.options.hideDelay)}},a.fn.fancynav=function(b){return b=a.extend({},{add:".fancynav-add",animation:"slide-top",navClass:"",navHeader:"",backText:"",hideDelay:510},b),this.each(function(){var d=a(this);d.data("FancyNav",new c(d,b))})}}(jQuery,jQuery(window));
—————————————
时间： 2024-08-01 10:21:07