html5左右两边布局,HTML5很棒的双向导航布局

CSS

语言：

CSSSCSS

确定

@import "https://fonts.googleapis.com/css?family=Open+Sans:300,700";

@import "https://fonts.googleapis.com/css?family=Kreon:300,700";

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: inherit;

font-size: 100%;

vertical-align: baseline;

}

html {

line-height: 1;

}

ol,

ul {

list-style: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

caption,

th,

td {

text-align: left;

font-weight: normal;

vertical-align: middle;

}

q,

blockquote {

quotes: none;

}

q:before,

q:after,

blockquote:before,

blockquote:after {

content: "";

content: none;

}

a img {

border: none;

}

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

main,

menu,

nav,

section,

summary {

display: block;

}

html,

body {

height: 100%;

width: 100%;

box-sizing: border-box;

}

body {

background-color: #222b30;

color: #f0f0f0;

font-family: 'Open Sans';

font-weight: 300;

line-height: 1em;

}

a {

text-decoration: none;

}

.svg-icon {

width: 1.2em;

height: 1.2em;

fill: none;

stroke: #f0f0f0;

stroke-width: 2px;

}

.svg-icon.logo {

stroke-width: 5px;

width: 222px;

}

.heading {

font-size: 8em;

line-height: 2em;

font-family: 'Kreon', serif;

-webkit-transition: all 0.6s ease-in-out;

transition: all 0.6s ease-in-out;

text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.5);

}

@media (max-width: 76em) {

.heading {

font-size: 6em;

}

}

.toogle {

height: 1em;

width: 2em;

position: relative;

margin-top: 1.5em;

background-image: -webkit-linear-gradient(white, white);

background-image: linear-gradient(white, white);

background-position: center 1.25em;

background-repeat: no-repeat;

background-size: 2em 1px;

padding: .75em .75em 2.25em;

border: 1px dashed rgba(255, 255, 255, 0.45);

border-radius: .5em;

}

.toogle__handler {

display: inline-block;

position: absolute;

width: 1em;

height: 1em;

border-radius: 50%;

background-color: #f0f0f0;

-webkit-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

.toogle:before {

content: 'yes';

position: absolute;

bottom: .8em;

left: 0;

width: 100%;

text-align: center;

}

.main {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-webkit-flex-direction: row;

-ms-flex-direction: row;

flex-direction: row;

overflow: auto;

width: 100vw;

min-height: 100vh;

box-sizing: border-box;

-webkit-transition: all 0.6s ease-in-out;

transition: all 0.6s ease-in-out;

background: transparent no-repeat;

background-image: -webkit-radial-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.65) 200%), -webkit-linear-gradient(rgba(34, 43, 48, 0.8) 0, rgba(34, 43, 48, 0.8) 100%), url("https://static.pexels.com/photos/8892/pexels-photo.jpg");

background-image: radial-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.65) 200%), linear-gradient(rgba(34, 43, 48, 0.8) 0, rgba(34, 43, 48, 0.8) 100%), url("https://static.pexels.com/photos/8892/pexels-photo.jpg");

background-size: 200% 200%, cover, cover;

background-position: center right, top center, bottom center;

}

.main__header {

z-index: 3;

width: 100%;

position: fixed;

padding: 1em;

box-sizing: border-box;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: justify;

-webkit-justify-content: space-between;

-ms-flex-pack: justify;

justify-content: space-between;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

}

.main__header__item {

-webkit-transition: all 0.6s cubic-bezier(0.56, -0.29, 0.49, 1.31);

transition: all 0.6s cubic-bezier(0.56, -0.29, 0.49, 1.31);

padding: .75em;

}

.main__nav,

.main__content {

padding: 5em 0;

box-sizing: border-box;

-webkit-transition: all 0.6s ease-in-out;

transition: all 0.6s ease-in-out;

}

.main__nav {

top: 0;

z-index: 2;

position: fixed;

height: 100%;

width: 16em;

-webkit-transform: translateX(-120%);

transform: translateX(-120%);

opacity: 0;

}

.main__nav .heading {

font-size: 2em;

padding: 0 .875em;

}

.main__nav__list__item {

box-sizing: border-box;

padding: 1em 1.8em;

margin-bottom: .5em;

position: relative;

}

.main__nav--direction {

display: none;

}

.main__nav--direction__label {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

}

.main__nav--direction:checked ~ .main {

background-image: -webkit-radial-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.65) 200%), -webkit-linear-gradient(rgba(34, 43, 48, 0.8) 0, rgba(34, 43, 48, 0.8) 100%), url("https://static.pexels.com/photos/8892/pexels-photo.jpg");

background-image: radial-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.65) 200%), linear-gradient(rgba(34, 43, 48, 0.8) 0, rgba(34, 43, 48, 0.8) 100%), url("https://static.pexels.com/photos/8892/pexels-photo.jpg");

background-position: center left, bottom center, bottom center;

}

.main__nav--direction:checked ~ .main .main__header {

-webkit-box-orient: horizontal;

-webkit-box-direction: reverse;

-webkit-flex-direction: row-reverse;

-ms-flex-direction: row-reverse;

flex-direction: row-reverse;

}

.main__nav--direction:checked ~ .main .main__nav {

right: 0;

-webkit-transform: translateX(120%);

transform: translateX(120%);

text-align: right;

}

.main__nav--direction:checked ~ .main .main__nav .heading {

text-shadow: -0.1em 0.1em 0.2em rgba(0, 0, 0, 0.5);

}

.main__nav--direction:checked ~ .main .main__content .heading {

text-shadow: -0.1em 0.1em 0.2em rgba(0, 0, 0, 0.5);

}

.main__nav--direction:checked ~ .main .main__content .main__nav--direction__label .toogle:before {

content: 'no';

}

.main__nav--direction:checked ~ .main .main__content .main__nav--direction__label .toogle .toogle__handler {

-webkit-transform: translateX(100%);

transform: translateX(100%);

}

.main__nav--control {

display: none;

}

.main__nav--control:checked + .main .main__nav {

opacity: 1;

-webkit-transform: translateX(0);

transform: translateX(0);

}

.main__nav--control:checked + .main .main__header .main__header__item:first-child {

-webkit-transform: rotate(-270deg);

transform: rotate(-270deg);

}

.main__content {

z-index: 1;

-webkit-box-flex: 1;

-webkit-flex-grow: 1;

-ms-flex-positive: 1;

flex-grow: 1;

-webkit-flex-shrink: 1;

-ms-flex-negative: 1;

flex-shrink: 1;

-webkit-flex-basis: 0;

-ms-flex-preferred-size: 0;

flex-basis: 0;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

}