html5+nav+自动收回,HTML5悬停时横向伸缩的导航菜单栏

CSS

语言：

CSSSCSS

确定

body,

html {

background: #2e3941;

height: 100%;

width: 100%;

overflow: hidden;

}

.wrapper {

position: absolute;

top: 0;

bottom: 0;

right: 0;

left: 0;

margin: auto;

}

.nav {

width: 100px;

height: 38px;

position: absolute;

top: 0;

z-index: 2;

bottom: 0;

left: 50%;

border: 1px solid #fff;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-webkit-transition: all 1s ease;

transition: all 1s ease;

transform: translate(-50%, -50%);

top: 50%;

}

.nav button#main-btn {

background: transparent;

border: 0;

padding: 10px;

width: 100px;

height: 50px;

position: absolute;

left: 0;

right: 0;

margin: auto;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

-webkit-transition: all 0.5s ease;

transition: all 0.5s ease;

color: #fff;

font-family: paytone one;

top: 0;

bottom: 0;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

font-size: 12px;

transform-origin: middle;

}

.nav button#main-btn:hover {

-moz-transform: scale(1.5);

-ms-transform: scale(1.5);

-webkit-transform: scale(1.5);

transform: scale(1.5);

}

.nav button#main-btn:focus {

outline: none;

}

.nav #sub-navs button {

background: transparent;

width: 100px;

height: 50px;

border: 0;

position: absolute;

left: 0;

right: 0;

margin: auto;

transition: all 1s ease, scale 0.5s ease, transform 0.5s ease;

font-family: paytone one;

top: 0;

bottom: 0;

opacity: 0;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

font-size: 12px;

transform-origin: middle;

color: #2e3941 !important;

}

.nav #sub-navs button:hover {

-moz-transform: scale(1.5);

-ms-transform: scale(1.5);

-webkit-transform: scale(1.5);

transform: scale(1.5);

}

.nav #sub-navs button:focus {

outline: none;

}

a {

color: #fff;

text-decoration: none;

}

.content {

width: 65%;

background: #fff;

height: 100%;

left: 0;

right: 0;

margin: auto;

}