CSS3卷角菜单

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3卷角菜单</title>
<style>
.ul { text-indent:2em; font:15px/1.8 Arial,FangSong_UTF8,Tahoma,Geneva,Helvetica,sans-serif,Tahoma,Geneva; color:#ffffff; }
.ul li { list-style:none; margin:0px 5px; }
.ul li a { text-decoration:none; color:#ffffff; }
.ul li a:hover { border-bottom:1px solid #000;} 
.button ul { clear:both; }
.button ul,li{
	list-style-type:none;
	padding:0;
	}
.form{
	width:450px;
	height:250px;
	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: 25px;
	height:25px;
	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(rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
	background:-moz-linear-gradient(rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
  background:-o-linear-gradient(rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
  background:-ms-linear-gradient(rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
  background:linear-gradient(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(rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
	background:-moz-linear-gradient(rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
  background:-o-linear-gradient(rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
  background:-ms-linear-gradient(rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
  background:linear-gradient(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;}
	}  
</style>  
</head>
<body>
<div class="page">
	<header id="header">
		<hgrounp class="white blank">
			<h1>CSS3制作的卷角菜单</h1>
		</hgrounp>
	</header>
	<section class="demo">
    <div class="notice"><div class="arrow"></div>请拖动左上角</div>
    <div class="form" id="form">
      <div class="corner" id="corner"></div>
        <ul class="button">
          <li><a href="http://www.dsxfcb.com/">生活导航</a></li>
          <li><a href="http://www.luolimin.cn/">相商动易</a></li>
          <li class="navcurrent"><a href="http://ie.ie00.net/Search/">IE搜索引擎</a></li>
          <li class="borderno"><a href="http://mem.luolimin.cn/">硅谷动易</a></li>
        </ul>
        <ul class="ul">
    <li>生活导航</li>
    <li>生活导航主体内容明了简介，针对商业客户提供助推的作用，并树立服务于中小企业的发展观。因为有了希望，生命的激情才能不断喷发。因为生活有了希望，才会变得如此灿烂和充满阳光。美好生活，就从生活导航开始。</li>
    <li><a href="http://www.dsxfcb.com" target="_blank">生活导航网</a></li>
    </ul> 
      </div>
      <div class="notice"><div class="arrow"></div>请拖动左上角</div>
    <div class="form" id="form">
      <div class="corner" id="corner"></div>
        <ul class="button">
          <li><a href="http://www.dsxfcb.com/">生活导航</a></li>
          <li><a href="http://www.luolimin.cn/">相商动易</a></li>
          <li class="navcurrent"><a href="http://ie.ie00.net/Search/">IE搜索引擎</a></li>
          <li class="borderno"><a href="http://mem.luolimin.cn/">硅谷动易</a></li>
        </ul>
        <ul class="ul">
    <li>生活导航</li>
    <li>生活导航主体内容明了简介，针对商业客户提供助推的作用，并树立服务于中小企业的发展观。因为有了希望，生命的激情才能不断喷发。因为生活有了希望，才会变得如此灿烂和充满阳光。美好生活，就从生活导航开始。</li>
    <li><a href="http://www.dsxfcb.com" target="_blank">生活导航网</a></li>
    </ul> 
      </div>		
	</section>
</div>
<script>
(function(){
	var form=document.getElementById("form");
	var corner=document.getElementById("corner")
	var ftop=form.offsetTop;
	var fleft=form.offsetLeft;
	var switchopen=0;
	corner.onmousedown=function(e){
		e.preventDefault(); 
        form.style.cursor="move";
		switchopen=1;
		}
	form.onmousemove=function(e){
		if(switchopen==1){
			if(e.pageX-fleft>25 ||e.pageY-ftop>25){
				corner.style.width=corner.style.height=25+"px";
				corner.style.left=corner.style.top=-4+"px"
				}
			else{
				corner.style.width=corner.style.height=e.pageY-ftop+"px";
				
				}
		}
	}
	form.onmouseup=function(){
		switchopen=0;
                this.style.cursor="default";
		}
	})()
</script>
</body>
</html>