html 右侧抽屉,CSS3右侧悬浮抽屉

* {

margin:0;

padding:0;

}

ul {

list-style:none;

}

.fixed-menu {

position:fixed;

right:0px;

top:50%;

margin-top:-90px;

width:60px;

box-shadow:0px 0px 20px rgba(0,0,0,.3);

z-index:999;

}

.fx-ul li {

position:relative;

height:60px;

line-height:60px;

border-bottom:1px solid #fff;

}

.fx-ul li a {

position:absolute;

left:0;

top:0;

z-index:2;

color:#fff;

display:block;

width:60px;

height:60px;

line-height:60px;

text-align:center;

-webkit-transition:all 0.6s;

-ms-transition:all 0.6s;

-moz-transition:all 0.6s;

text-decoration:none;

font-size:24px;

}

.title {

position:absolute;

left:0px;

bottom:1px;

color:#fff;

width:80px;

height:40px;

line-height:40px;

text-align:center;

-webkit-transition:all 0.6s;

-ms-transition:all 0.6s;

-moz-transition:all 0.6s;

background-color:#fff;

box-shadow:0px 0px 10px rgba(0,0,0,.3);

z-index:1;

opacity:0;

}

.title:before {

content:'';

display:block;

width:10px;

height:10px;

position:absolute;

right:-5px;

top:14px;

background-color:#fff;

transform:rotate(45deg);

}

.fx-ul li:hover .title {

left:-88px;

opacity:1;

}

.fx-ul li.fx-shop a {

background-image:-webkit-linear-gradient(left,#f60,#ffb443);

background-image:-moz-linear-gradient(left,#f60,#ffb443);

background-image:-ms-linear-gradient(left,#f60,#ffb443);

}

.fx-ul li.fx-shop .title {

background-color:#f60;

}

.fx-ul li.fx-shop .title:before {

background-color:#f60;

}

.fx-ul li.fx-contact a {

background-image:-webkit-linear-gradient(left,#00b7ee,#55d8ff);

background-image:-moz-linear-gradient(left,#00b7ee,#55d8ff);

background-image:-ms-linear-gradient(left,#00b7ee,#55d8ff);

}

.fx-ul li.fx-contact .title {

background-color:#00b7ee;

}

.fx-ul li.fx-contact .title:before {

background-color:#00b7ee;

}

.fx-ul li.fx-top a {

background-image:-webkit-linear-gradient(left,#333,#666);

background-image:-moz-linear-gradient(left,#333,#666);

background-image:-ms-linear-gradient(left,#333,#666);

}

.fx-ul li.fx-top .title {

background-color:#333;

}

.fx-ul li.fx-top .title:before {

background-color:#333;

}