html5纵向导航栏,HTML5 手风琴式垂直导航栏

CSS

语言：

CSSSCSS

确定

body {

margin: 0;

padding: 0 2rem;

font-family: 'Roboto', sans-serif;

overflow-x: hidden;

}

body * {

box-sizing: border-box;

}

.heading {

text-align: center;

}

button,

.button {

position: relative;

display: inline-block;

color: white;

padding: 0.75rem 2rem;

margin: 0 auto;

background-color: #374d72;

border: none;

width: 100%;

font-weight: bold;

font-size: 1.2rem;

text-align: center;

-webkit-transition: all 0.3s;

-moz-transition: all 0.3s;

transition: all 0.3s;

}

button:hover,

.button:hover {

background-color: #374d72;

}

button:hover:before,

button:hover:after,

.button:hover:before,

.button:hover:after {

color: #4cc4cf;

}

button:after,

button:before,

.button:after,

.button:before {

-webkit-transition: all 0.3s;

-moz-transition: all 0.3s;

transition: all 0.3s;

/* ---------------------- Vertical Tabs */

}

.tabs {

position: relative;

min-height: 0;

-webkit-transition: all 0.5s;

-moz-transition: all 0.5s;

/* ---------------------- Tab */

/* ---------------------- Content */

transition: all 0.5s;

}

.tabs .tab {

/* ---------------------- Tab Toggle */

margin-bottom: 1px;

}

@media screen and (min-width: 55rem) {

.tabs .tab {

float: left;

clear: left;

width: 30%;

}

}

.tabs .tab .tab-toggle {

padding: 1rem 4rem 1rem 2rem;

position: relative;

outline: none;

width: 100%;

}

@media screen and (min-width: 55rem) {

.tabs .tab .tab-toggle {

text-align: left;

}

}

.tabs .tab .tab-toggle:after {

content: "\25BC";

position: absolute;

display: block;

right: 2rem;

top: 50%;

-webkit-transform: rotate(0deg) translateY(-50%);

-moz-transform: rotate(0deg) translateY(-50%);

-ms-transform: rotate(0deg) translateY(-50%);

-o-transform: rotate(0deg) translateY(-50%);

transform: rotate(0deg) translateY(-50%);

}

@media screen and (min-width: 55rem) {

.tabs .tab .tab-toggle:after {

-webkit-transform: rotate(-90deg) translateX(50%);

-moz-transform: rotate(-90deg) translateX(50%);

-ms-transform: rotate(-90deg) translateX(50%);

-o-transform: rotate(-90deg) translateX(50%);

transform: rotate(-90deg) translateX(50%);

}

}

.tabs .tab .tab-toggle.active {

color: #8099c2;

background-color: white;

cursor: default;

}

.tabs .tab .tab-toggle.active:after {

color: #8099c2;

-webkit-transform: rotate(180deg) translateY(50%);

-moz-transform: rotate(180deg) translateY(50%);

-ms-transform: rotate(180deg) translateY(50%);

-o-transform: rotate(180deg) translateY(50%);

transform: rotate(180deg) translateY(50%);

}

@media screen and (min-width: 55rem) {

.tabs .tab .tab-toggle.active:after {

-webkit-transform: rotate(-90deg) translateX(50%) translateY(0);

-moz-transform: rotate(-90deg) translateX(50%) translateY(0);

-ms-transform: rotate(-90deg) translateX(50%) translateY(0);

-o-transform: rotate(-90deg) translateX(50%) translateY(0);

transform: rotate(-90deg) translateX(50%) translateY(0);

right: 1rem;

}

}

.tabs .content {

max-height: 0;

overflow: hidden;

padding: 0 2rem;

background-color: #efefef;

-webkit-transition: all 1s;

-moz-transition: all 1s;

transition: all 1s;

}

@media screen and (min-width: 55rem) {

.tabs .content {

max-height: none;

position: absolute;

right: 0;

top: 0;

width: 70%;

opacity: 0;

padding: 0rem 2rem 2rem 2rem;

-webkit-transform: translateX(100%);

-moz-transform: translateX(100%);

-ms-transform: translateX(100%);

-o-transform: translateX(100%);

transform: translateX(100%);

}

}

.tabs .content.active {

max-height: 1000px;

}

@media screen and (min-width: 55rem) {

.tabs .content.active {

max-height: none;

opacity: 1;

-webkit-transform: none;

-moz-transform: none;

-ms-transform: none;

-o-transform: none;

transform: none;

}

}

.tabs .content > .heading {

font-size: 1.5rem;

margin-bottom: 1rem;

}