css3制作扇形菜单
⼯作中⽹页中有⼀个扇形的导航菜单，以前没有接触过，参考了
以及原⽹站tympanus/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms，作者讲得很详细，我就不多说了，下⾯是我的demo：有⼀部分浏览器不⽀持css3，还需要为其设置另⼀套样式，通过js判断浏览器类型，并替换样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>纯CSS扇形菜单</title>
<style type="text/css">
/*导航外层div设为圆形*/
.css-transforms .menu-wrapper {
overflow: hidden;
zoom: 1;
position: relative;
width: 460px;
height: 460px;
margin: 40px auto 0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: transparent;
pointer-events: auto;
border: 1px solid #000;
}
/*覆盖a标签的内侧靠近圆⼼的部分, 避免⿏标点击事件*/
.css-transforms .menu-wrapper:after{
color: transparent;
content:".";
display:block;
position: absolute;
z-index:10;
left: 50%;
top:50%;
margin-left: -150px;
margin-top: -150px;
width: 300px;
height: 300px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 1px solid blue;
}
.css-transforms .menu-wrapper li {
position: absolute;
top: -70px;
left: -70px;
overflow: hidden;
width: 300px;
height: 300px;
transform-origin: 100% 100%;
pointer-events: none;
border: 1px solid green;
}
/*a标签反倾斜⾓度为-(90-x)，旋转⾓度为-x,x为我们想要的圆⼼⾓，在这个demo⾥，有3个列表项，半圆，得出圆⼼⾓为60*/
.css-transforms .menu-wrapper li a {
position: absolute;
right: -200px;
bottom: -200px;
display: block;
width: 420px;
height: 420px;
border-radius: 50%;
color: #fff;
text-align: center;
text-decoration: none;
/
*先斜切后旋转，不可颠倒*/
-webkit-transform: skew(-30deg) rotate(-60deg) scale(1);
-moz-transform: skew(-30deg) rotate(-60deg) scale(1);
-ms-transform: skew(-30deg) rotate(-60deg) scale(1);
-o-transform: skew(-30deg) rotate(-60deg) scale(1);
transform: skew(-30deg) rotate(-60deg) scale(1);
pointer-events: auto;
}
}
/*列表项倾斜⾓度为90-x，每个列表项的旋转⾓度依次间隔 >60 */ .css-transforms .menu-wrapper li:first-child {
-webkit-transform: rotate(-10deg) skew(30deg);
-moz-transform: rotate(-10deg) skew(30deg);
-ms-transform: rotate(-10deg) skew(30deg);
-o-transform: rotate(-10deg) skew(30deg);
transform: rotate(-10deg) skew(30deg);
}
.css-transforms .menu-wrapper li:nth-child(2) {
-webkit-transform: rotate(60deg) skew(30deg);
-moz-transform: rotate(60deg) skew(30deg);
-ms-transform: rotate(60deg) skew(30deg);
-o-transform: rotate(60deg) skew(30deg);
transform: rotate(60deg) skew(30deg);
}
.css-transforms .menu-wrapper li:nth-child(3) {
-webkit-transform: rotate(-130deg) skew(30deg);
-moz-transform: rotate(-130deg) skew(30deg);
-ms-transform: rotate(-130deg) skew(30deg);
-o-transform: rotate(-130deg) skew(30deg);
transform: rotate(130deg) skew(30deg);
}
.css-transforms .menu-wrapper li a span{
display: none;
}
.
css-transforms .menu-wrapper li:first-child a{
background: radial-gradient(transparent 45%, #dc7d01 35%); }
.css-transforms .menu-wrapper li:nth-child(2) a{
background: radial-gradient(transparent 45%, #a70101 35%); }
.css-transforms .menu-wrapper li:nth-child(3) a{
background: radial-gradient(transparent 45%, #017d07 35%); }
.css-transforms .menu-wrapper li:first-child a:hover,
.css-transforms .menu-wrapper li:first-child a:active,
.css-transforms .menu-wrapper li:first-child a:focus {
background: radial-gradient(transparent 45%, #e88503 35%); }
.css-transforms .menu-wrapper li:nth-child(2) a:hover,
.
css-transforms .menu-wrapper li:nth-child(2) a:active,
.css-transforms .menu-wrapper li:nth-child(2) a:focus {
background: radial-gradient(transparent 45%, #b40303 35%); }
.css-transforms .menu-wrapper li:nth-child(3) a:hover,
.css-transforms .menu-wrapper li:nth-child(3) a:active,
.css-transforms .menu-wrapper li:nth-child(3) a:focus {
background: radial-gradient(transparent 45%, #028b09 35%); }
.css-transforms .menu-wrapper li:first-child a img{
margin-top: 8px;
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-
ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
}
.css-transforms .menu-wrapper li:nth-child(2) a img{
margin-top: 21px;
}
.css-transforms .menu-wrapper li:nth-child(3) a img{
margin-top: -2px;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-
ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg) ;
}
/*不⽀持css3*/
.no-transforms .menu-wrapper{
margin:10em auto;
css鼠标点击样式padding:1em;
border: 1px solid #000;
}
.no-transforms .menu-wrapper ul{
display:inline-block;
}
.no-transforms li{
width:120px;
height:50px;
float:left;
line-height:50px;
text-align:center;
margin-right: 20px;
background-color: #fff;
/*border: 1px solid red;*/
}
.no-transforms li a{
display:block;
height:100%;
width:100%;
line-height: 50px;
text-decoration: none;
color: #fff;
}
.no-transforms .menu-wrapper li a span{
display: block;
}
.no-transforms .menu-wrapper li a img{
display: none;
}
.no-transforms li a.first{
background-color: #e88503;
}
.no-transforms li a.second{
background-color: #b40303;
}
.no-transforms li a.last{
background-color: #028b09;
}
.no-transforms .menu-wrapper li a:hover,
.no-transforms .menu-wrapper li a:active,
.no-transforms .menu-wrapper li a:focus{
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}
</style>
</head>
<body>
<div class="css-transforms" id="box">
<div class="menu-wrapper">
<ul>
<li><a href="#" class="first"><img src="./font-1.png" alt=""><span>彝族⾳乐图⽚</span></a></li> <li><a href="#" class="second"><img src="./font-2.png" alt=""><span>彝族⾳乐理论</span></a></li> <li><a href="#" class="last"><img src="./font-3.png" alt=""><span>彝族⾳乐</span></a></li>
</ul>
</div>
</div>
<script>
//为不⽀持css3的浏览器更换样式
var wrapper = ElementById('box');
var supports = (function() {
var div = ateElement('div'),
vendors = 'Khtml Ms O Moz Webkit'.split(' '),
len = vendors.length;
return function(prop) {
if ( prop in div.style ) return true;
prop = place(/^[a-z]/, function(val) {
UpperCase();
});
while(len--) {
if ( vendors[len] + prop in div.style ) {
return true;
}
}
};
})();
if ( !supports('transform') ) {
removeClass(wrapper, 'css-transforms');
addClass(wrapper, 'no-transforms');
}
function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); }
function addClass(obj, cls) {
if (!this.hasClass(obj, cls)) obj.className += " " + cls;
}
function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = place(reg, ' ');
}
}
</script>
</body>
</html>
效果如下:
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论