html5 css3 树形菜单,HTML5/CSS3卷边菜单效果

CSS3制作卷角菜单

ul,li{

list-style-type:none;

padding:0;

}

.form{

width:405px;

height:200px;

background:#2f2f2f;

position:relative;

overflow:hidden;

margin:30px auto;

}

.corner{

background: -webkit-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);

background: -moz-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height: 90px;

background: -o-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height: 90px;

background: -ms-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height: 90px;

background: linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height: 90px;

width: 90px;

height:90px;

border-radius: 0 0 0px 90px / 0 0 0 30px;

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

-moz-transform: rotate(-90deg);

-o-transform: rotate(-90deg);

-ms-transform: rotate(-90deg);

transform: rotate(-90deg);

position: absolute;

left:-4px;

top: -4px;

box-shadow: 5px 2px 8px black;

overflow:hidden;

-webkit-transition:all 0.3s linear 0s;

-moz-transition:all 0.3s linear 0s;

-o-transition:all 0.3s linear 0s;

-ms-transition:all 0.3s linear 0s;

transition:all 0.3s linear 0s;

}

.corner:after{

height:100%;

width:100%;

position: absolute;

content: "";

top: -15px;

left: -82px;

border-radius: 90px 90px 0px 0 / 40px 40px 0 0;

z-index: 1;

background: #2F2F2F;

-webkit-transform: rotate(77deg);

-moz-transform: rotate(77deg);

-o-transform: rotate(77deg);

-ms-transform: rotate(77deg);

transform: rotate(77deg);

box-shadow: 0px 0px 8px black inset;

}

.button{

float: left;

height:40px;

margin:20px 20px;

border-radius:30px;

border:1px solid #151515;

box-shadow:0px 2px 2px rgba(0,0,0,0.6);

overflow:hidden;

}

.button li {

float: left;

}

.button li a{

float:left;

display:block;

text-decoration:none;

padding: 0 20px;

height:40px;

line-height:36px;

font-size:14px;

color:#eee;

text-align:center;

border-right:1px solid #151515;

box-shadow:-1px 0px 0px rgba(255,255,255,0.1) inset,inset 0px -1px 1px rgba(200,200,200,0.1),inset 0px 1px 2px rgba(255,255,255,0.1);

text-shadow:0px -1px 0px #000;

background:-webkit-linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);

background:-moz-linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);

background:-o-linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);

background:-ms-linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);

background:linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);

}

.button li:first-child a{

border-radius:30px 0 0 30px;

}

.button li:last-child a{

border-radius:0px 30px 30px 0;

border-right: none;

}

.button li a:hover{

cursor:pointer;

background:-webkit-linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));

background:-moz-linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));

background:-o-linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));

background:-ms-linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));

background:linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));

box-shadow:0px 2px 4px rgba(0,0,0,0.8) inset;

color:#b7def5;

text-shadow:0px 0px 8px rgba(0,162,255,0.8);

}

.notice{

position:relative;

padding:10px 0 0 25px;

margin: 20px auto;

width: 120px;

}

.arrow{

width:13px;

height:20px;

background:#FC9;

position:absolute;

top:0px;

left:0px;

-webkit-animation:notices linear 0.8s infinite ;

-moz-animation:notices linear 0.8s infinite ;

-o-animation:notices linear 0.8s infinite ;

-ms-animation:notices linear 0.8s infinite ;

animation:notices linear 0.8s infinite ;

}

.arrow:after{

width:0;

height:0;

border-width:12px;

border-style:solid dashed dashed dashed;

border-color:#FC9 transparent transparent transparent;

position:absolute;

bottom:-22px;

left:-5px;

display:block;

content:"";

}

@-webkit-keyframes notices{

0%{top:0px;}

50%{top:10px;}

100%{top:0px;}

}

@-moz-keyframes notices{

0%{top:0px;}

50%{top:10px;}

100%{top:0px;}

}

@-o-keyframes notices{

0%{top:0px;}

50%{top:10px;}

100%{top:0px;}

}

@-ms-keyframes notices{

0%{top:0px;}

50%{top:10px;}

100%{top:0px;}

}

@keyframes notices{

0%{top:0px;}

50%{top:10px;}

100%{top:0px;}

}

• Welcome
• Blog
• About Us
• Contact

(function(){

var form=document.getElementById("form");

var corner=document.getElementById("corner")

var ftop=form.offsetTop;

var fleft=form.offsetLeft;

var switchopen=0;

corner.οnmοusedοwn=function(e){

e.preventDefault();

form.style.cursor="move";

switchopen=1;

}

form.οnmοusemοve=function(e){

if(switchopen==1){

if(e.pageX-fleft>90 ||e.pageY-ftop>90){

corner.style.width=corner.style.height=90+"px";

corner.style.left=corner.style.top=-4+"px"

}

else{

corner.style.width=corner.style.height=e.pageY-ftop+"px";

}

}

}

form.οnmοuseup=function(){

switchopen=0;

this.style.cursor="default";

}

})()