以下是 基于jquery宽屏菜单导航特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CSS-Only Responsive Layout with Smooth Transitions</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="CSS-only Responsive Layout with Smooth Transitions" />
<meta name="keywords" content="css3, transitions, animations, css-only, navigation, smooth scrolling, full width, full height, window width, window height" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="css/simple.css" />
<![endif]-->
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<span class="right">
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<div class="st-container">
<input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
<a href="#st-panel-1">Serendipity</a>
<input type="radio" name="radio-set" id="st-control-2"/>
<a href="#st-panel-2">Happiness</a>
<input type="radio" name="radio-set" id="st-control-3"/>
<a href="#st-panel-3">Tranquillity</a>
<input type="radio" name="radio-set" id="st-control-4"/>
<a href="#st-panel-4">Positivity</a>
<input type="radio" name="radio-set" id="st-control-5"/>
<a href="#st-panel-5">Passion</a>
<div class="st-scroll">
<section class="st-panel" id="st-panel-1">
<div class="st-deco" data-icon="H"></div>
<h2>Serendipity</h2>
<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>
</section>
<section class="st-panel st-color" id="st-panel-2">
<div class="st-deco" data-icon="2"></div>
<h2>Happiness</h2>
<p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>
</section>
<section class="st-panel" id="st-panel-3">
<div class="st-deco" data-icon="B"></div>
<h2>Tranquillity</h2>
<p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
</section>
<section class="st-panel st-color" id="st-panel-4">
<div class="st-deco" data-icon="x"></div>
<h2>Positivity</h2>
<p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
</section>
<section class="st-panel" id="st-panel-5">
<div class="st-deco" data-icon="Ç"></div>
<h2>Passion</h2>
<p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
</section>
</div><!-- // st-scroll -->
</div><!-- // st-container -->
</div>
</body>
</html>
JS代码(modernizr.custom.79639.js):
/* Modernizr 2.5.3 (Custom Build) | MIT & BSD * Build:http://www.modernizr.com/download/#-cssanimations-csstransforms-csstransforms3d-csstransitions-shiv-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes */
;
window.Modernizr=function(a,b,c){
function z(a){
j.cssText=a}
function A(a,b){
return z(m.join(a+";
")+(b||""))}
function B(a,b){
return typeof a===b}
function C(a,b){
return!!~(""+a).indexOf(b)}
function D(a,b){
for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;
return!1}
function E(a,b,d){
for(var e in a){
var f=b[a[e]];
if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}
return!1}
function F(a,b,c){
var d=a.charAt(0).toUpperCase()+a.substr(1),e=(a+" "+o.join(d+" ")+d).split(" ");
return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}
var d="2.5.3",e={
}
,f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={
}
.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={
}
,r={
}
,s={
}
,t=[],u=t.slice,v,w=function(a,c,d,e){
var f,i,j,k=b.createElement("div"),l=b.body,m=l?l:b.createElement("body");
if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),k.appendChild(j);
return f=["­
","<style>",a,"</style>"].join(""),k.id=h,(l?k:m).innerHTML+=f,m.appendChild(k),l||(m.style.background="",g.appendChild(m)),i=c(k,a),l?k.parentNode.removeChild(k):m.parentNode.removeChild(m),!!i}
,x={
}
.hasOwnProperty,y;
!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){
return x.call(a,b)}
:y=function(a,b){
return b in a&&B(a.constructor.prototype[b],"undefined")}
,Function.prototype.bind||(Function.prototype.bind=function(b){
var c=this;
if(typeof c!="function")throw new TypeError;
var d=u.call(arguments,1),e=function(){
if(this instanceof e){
var a=function(){
}
;
a.prototype=c.prototype;
var f=new a,g=c.apply(f,d.concat(u.call(arguments)));
return Object(g)===g?g:f}
return c.apply(b,d.concat(u.call(arguments)))}
;
return e}
);
var G=function(a,c){
var d=a.join(""),f=c.length;
w(d,function(a,c){
var d=b.styleSheets[b.styleSheets.length-1],g=d?d.cssRules&&d.cssRules[0]?d.cssRules[0].cssText:d.cssText||"":"",h=a.childNodes,i={
}
;
while(f--)i[h[f].id]=h[f];
e.csstransforms3d=(i.csstransforms3d&&i.csstransforms3d.offsetLeft)===9&&i.csstransforms3d.offsetHeight===3}
,f,c)}
([,["@media (",m.join("transform-3d),("),h,")","{
#csstransforms3d{
left:9px;
position:absolute;
height:3px;
}
}
"].join("")],[,"csstransforms3d"]);
q.cssanimations=function(){
return F("animationName")}
,q.csstransforms=function(){
return!!F("transform")}
,q.csstransforms3d=function(){
var a=!!F("perspective");
return a&&"webkitPerspective"in g.style&&(a=e.csstransforms3d),a}
,q.csstransitions=function(){
return F("transition")}
;
for(var H in q)y(q,H)&&(v=H.toLowerCase(),e[v]=q[H](),t.push((e[v]?"":"no-")+v));
return z(""),i=k=null,function(a,b){
function g(a,b){
var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;
return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}
function h(){
var a=k.elements;
return typeof a=="string"?a.split(" "):a}
function i(a){
var b={
}
,c=a.createElement,e=a.createDocumentFragment,f=e();
a.createElement=function(a){
var e=(b[a]||(b[a]=c(a))).cloneNode();
return k.shivMethods&&e.canHaveChildren&&!d.test(a)?f.appendChild(e):e}
,a.createDocumentFragment=Function("h,f","return function(){
var n=f.cloneNode(),c=n.createElement;
h.shivMethods&&("+h().join().replace(/\w+/g,function(a){
return b[a]=c(a),f.createElement(a),'c("'+a+'")'}
)+");
return n}
")(k,f)}
function j(a){
var b;
return a.documentShived?a:(k.shivCSS&&!e&&(b=!!g(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{
display:block}
audio{
display:none}
canvas,video{
display:inline-block;
*display:inline;
*zoom:1}
[hidden]{
display:none}
audio[controls]{
display:inline-block;
*display:inline;
*zoom:1}
mark{
background:#FF0;
color:#000}
")),f||(b=!i(a)),b&&(a.documentShived=b),a)}
var c=a.html5||{
}
,d=/^<|^(?:button|form|map|select|textarea)$/i,e,f;
(function(){
var a=b.createElement("a");
a.innerHTML="<xyz></xyz>",e="hidden"in a,f=a.childNodes.length==1||function(){
try{
b.createElement("a")}
catch(a){
return!0}
var c=b.createDocumentFragment();
return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}
()}
)();
var k={
elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:j}
;
a.html5=k,j(b)}
(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){
return D([a])}
,e.testAllProps=F,e.testStyles=w,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}
(this,this.document);
CSS代码(demo.css):
@import url('normalize.css');@font-face{font-family:'RaphaelIcons';src:url('raphaelicons-webfont.eot');src:local('☺'),url('fonts/raphaelicons-webfont.woff') format('woff'),url('fonts/raphaelicons-webfont.ttf') format('truetype'),url('fonts/raphaelicons-webfont.svgwebfontKOf9F4sx') format('svg');font-weight:normal;font-style:normal;}
/* General Demo Style */
body{font-family:Georgia,serif;background:#ddd;font-weight:400;font-size:15px;color:#333;overflow:hidden;-webkit-font-smoothing:antialiased;}
a{color:#555;text-decoration:none;}
.clr{clear:both;padding:0;height:0;margin:0;}
/* Header Style */
.codrops-top{line-height:24px;font-size:9px;text-transform:uppercase;z-index:9999;position:relative;font-family:Cambria,Georgia,serif;}
.codrops-top a{padding:0px 10px;letter-spacing:1px;color:#888;display:inline-block;text-shadow:0 1px 1px rgba(255,255,255,0.4);}
.codrops-top span.right{float:right;}
.codrops-top span.right a{float:left;display:block;}
@media screen and (max-width:520px){.codrops-top{display:none;}
}
CSS代码(simple.css):
body{overflow:auto;}
.st-container > input{display:none;}
CSS代码(style.css):
.st-container{position:absolute;width:100%;height:100%;top:0;left:0;font-family:'Josefin Slab','Myriad Pro',Arial,sans-serif;}
.st-container > input,.st-container > a{position:fixed;bottom:0px;width:20%;cursor:pointer;font-size:16px;height:34px;line-height:34px;}
.st-container > input{opacity:0;z-index:1000;}
.st-container > a{z-index:10;font-weight:700;background:#e23a6e;color:#fff;text-align:center;text-shadow:1px 1px 1px rgba(151,24,64,0.2);}
/* "Fix" for percentage rounding:add a background bar pseudo element with the same color like the labels */
.st-container:before{content:'';position:fixed;width:100%;height:34px;background:#e23a6e;z-index:9;bottom:0;}
#st-control-1,#st-control-1 + a{left:0;}
#st-control-2,#st-control-2 + a{left:20%;}
#st-control-3,#st-control-3 + a{left:40%;}
#st-control-4,#st-control-4 + a{left:60%;}
#st-control-5,#st-control-5 + a{left:80%;}
.st-container > input:checked + a,.st-container > input:checked:hover + a{background:#821134;}
.st-container > input:checked + a:after,.st-container > input:checked:hover + a:after{bottom:100%;border:solid transparent;content:'';height:0;width:0;position:absolute;pointer-events:none;border-bottom-color:#821134;border-width:20px;left:50%;margin-left:-20px;}
.st-container > input:hover + a{background:#AD244F;}
.st-container > input:hover + a:after{border-bottom-color:#AD244F;}
.st-scroll,.st-panel{position:relative;width:100%;height:100%;}
.st-scroll{top:0;left:0;-webkit-transition:all 0.6s ease-in-out;-moz-transition:all 0.6s ease-in-out;-o-transition:all 0.6s ease-in-out;-ms-transition:all 0.6s ease-in-out;transition:all 0.6s ease-in-out;/* Let's enforce some hardware acceleration */
-webkit-transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;}
.st-panel{background:#fff;overflow:hidden;}
#st-control-1:checked ~ .st-scroll{-webkit-transform:translateY(0%);-moz-transform:translateY(0%);-o-transform:translateY(0%);-ms-transform:translateY(0%);transform:translateY(0%);}
#st-control-2:checked ~ .st-scroll{-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-o-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);}
#st-control-3:checked ~ .st-scroll{-webkit-transform:translateY(-200%);-moz-transform:translateY(-200%);-o-transform:translateY(-200%);-ms-transform:translateY(-200%);transform:translateY(-200%);}
#st-control-4:checked ~ .st-scroll{-webkit-transform:translateY(-300%);-moz-transform:translateY(-300%);-o-transform:translateY(-300%);-ms-transform:translateY(-300%);transform:translateY(-300%);}
#st-control-5:checked ~ .st-scroll{-webkit-transform:translateY(-400%);-moz-transform:translateY(-400%);-o-transform:translateY(-400%);-ms-transform:translateY(-400%);transform:translateY(-400%);}
/* Content elements */
.st-deco{width:200px;height:200px;position:absolute;top:0px;left:50%;margin-left:-100px;background:#fa96b5;-webkit-transform:translateY(-50%) rotate(45deg);-moz-transform:translateY(-50%) rotate(45deg);-o-transform:translateY(-50%) rotate(45deg);-ms-transform:translateY(-50%) rotate(45deg);transform:translateY(-50%) rotate(45deg);}
[data-icon]:after{content:attr(data-icon);font-family:'RaphaelIcons';color:#fff;text-shadow:1px 1px 1px rgba(151,24,64,0.2);position:absolute;width:200px;height:200px;line-height:200px;text-align:center;font-size:90px;top:50%;left:50%;margin:-100px 0 0 -100px;-webkit-transform:rotate(-45deg) translateY(25%);-moz-transform:rotate(-45deg) translateY(25%);-o-transform:rotate(-45deg) translateY(25%);-ms-transform:rotate(-45deg) translateY(25%);transform:rotate(-45deg) translateY(25%);}
.st-panel h2{color:#e23a6e;text-shadow:1px 1px 1px rgba(151,24,64,0.2);position:absolute;font-size:54px;font-weight:900;width:80%;left:10%;text-align:center;line-height:50px;margin:-70px 0 0 0;padding:0;top:50%;-webkit-backface-visibility:hidden;}
#st-control-1:checked ~ .st-scroll #st-panel-1 h2,#st-control-2:checked ~ .st-scroll #st-panel-2 h2,#st-control-3:checked ~ .st-scroll #st-panel-3 h2,#st-control-4:checked ~ .st-scroll #st-panel-4 h2,#st-control-5:checked ~ .st-scroll #st-panel-5 h2{-webkit-animation:moveDown 0.6s ease-in-out 0.2s backwards;-moz-animation:moveDown 0.6s ease-in-out 0.2s backwards;-o-animation:moveDown 0.6s ease-in-out 0.2s backwards;-ms-animation:moveDown 0.6s ease-in-out 0.2s backwards;animation:moveDown 0.6s ease-in-out 0.2s backwards;}
@-webkit-keyframes moveDown{0%{-webkit-transform:translateY(-40px);opacity:0;}
100%{-webkit-transform:translateY(0px);opacity:1;}
}
@-moz-keyframes moveDown{0%{-moz-transform:translateY(-40px);opacity:0;}
100%{-moz-transform:translateY(0px);opacity:1;}
}
@-o-keyframes moveDown{0%{-o-transform:translateY(-40px);opacity:0;}
100%{-o-transform:translateY(0px);opacity:1;}
}
@-ms-keyframes moveDown{0%{-ms-transform:translateY(-40px);opacity:0;}
100%{-ms-transform:translateY(0px);opacity:1;}
}
@keyframes moveDown{0%{transform:translateY(-40px);opacity:0;}
100%{transform:translateY(0px);opacity:1;}
}
.st-panel p{position:absolute;text-align:center;font-size:16px;line-height:22px;color:#8b8b8b;z-index:2;padding:0;width:50%;left:25%;top:50%;margin:10px 0 0 0;-webkit-backface-visibility:hidden;}
#st-control-1:checked ~ .st-scroll #st-panel-1 p,#st-control-2:checked ~ .st-scroll #st-panel-2 p,#st-control-3:checked ~ .st-scroll #st-panel-3 p,#st-control-4:checked ~ .st-scroll #st-panel-4 p,#st-control-5:checked ~ .st-scroll #st-panel-5 p{-webkit-animation:moveUp 0.6s ease-in-out 0.2s backwards;-moz-animation:moveUp 0.6s ease-in-out 0.2s backwards;-o-animation:moveUp 0.6s ease-in-out 0.2s backwards;-ms-animation:moveUp 0.6s ease-in-out 0.2s backwards;animation:moveUp 0.6s ease-in-out 0.2s backwards;}
@-webkit-keyframes moveUp{0%{-webkit-transform:translateY(40px);opacity:0;}
100%{-webkit-transform:translateY(0px);opacity:1;}
}
@-moz-keyframes moveUp{0%{-moz-transform:translateY(40px);opacity:0;}
100%{-moz-transform:translateY(0px);opacity:1;}
}
@-o-keyframes moveUp{0%{-o-transform:translateY(40px);opacity:0;}
100%{-o-transform:translateY(0px);opacity:1;}
}
@-ms-keyframes moveUp{0%{-ms-transform:translateY(40px);opacity:0;}
100%{-ms-transform:translateY(0px);opacity:1;}
}
@keyframes moveUp{0%{transform:translateY(40px);opacity:0;}
100%{transform:translateY(0px);opacity:1;}
}
/* Colored sections */
.st-color,.st-deco{background:#fa96b5;}
.st-color [data-icon]:after{color:#fa96b5;}
.st-color .st-deco{background:#fff;}
.st-color h2{color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.1);}
.st-color p{color:#fff;color:rgba(255,255,255,0.8);}
@media screen and (max-width:520px){.st-panel h2{font-size:42px;}
.st-panel p{width:90%;left:5%;margin-top:0;}
.st-container > a{font-size:13px;}
}
@media screen and (max-width:360px){.st-container > a{font-size:10px;}
.st-deco{width:120px;height:120px;margin-left:-60px;}
[data-icon]:after{font-size:60px;-webkit-transform:rotate(-45deg) translateY(15%);-moz-transform:rotate(-45deg) translateY(15%);-o-transform:rotate(-45deg) translateY(15%);-ms-transform:rotate(-45deg) translateY(15%);transform:rotate(-45deg) translateY(15%);}
}
分享到QQ
分享到微博
微信扫一扫
