圆形、扇形菜单

8/31/2015来源:CSS教程人气:1020

圆形、扇形菜单

  最近要用到扇形菜单,在 Google 上面找了好久终于找到一个http://www.webdm.cn/webcode/32dc9a08-9e19-4b0f-8864-8e2bba59a824.html,

效果如下图:

  可是这个例子只是圆形的一个角,不是一个整圆。由于对 CSS3 不是特别熟悉,弄了半天终于搞定,效果图:

  源码

<!DOCTYPE html><html><head>    <meta name="viewport" content="width=device-width" />    <title>扇形菜单Demo</title>    <style type="text/css">        #sectorDiv        {            position: absolute;            left: 600px;            top: 230px;            z-index: 100;        }        #sectorDiv ul        {            padding: 0;            margin: 0;            list-style: none;            position: absolute; /*left: 0;            top: 0;            width: 0;            height: 0;*/        }        #oneUl        {            left: -203px;            top: -203px;            width: 300px;            height: 300px;            /*border-color: Red;            border-style: solid;            border-width: thick;*/            overflow: hidden;            z-index: -100;        }        #twoUl        {            left: 103px;            top: -203px;            width: 300px;            height: 300px;           /* border-color: Red;            border-style: solid;            border-width: thick;*/            overflow: hidden;            z-index: -100;        }        #threeUl        {            left: -203px;            top: 103px;            width: 300px;            height: 300px;           /* border-color: Red;            border-style: solid;            border-width: thick;*/            overflow: hidden;            z-index: -100;        }        #fourUl        {            left: 103px;            top: 103px;            width: 300px;            height: 300px;            /*border-color: Red;            border-style: solid;            border-width: thick;*/            overflow: hidden;            z-index: -100;        }        #sectorDiv ul li a        {            color: #000;            text-decoration: none;            font: bold 13px/30px arial, sans-serif;            text-align: center;            -webkit-transform-origin: 0 0;            -moz-transform-origin: 0 0;            -ms-transform-origin: 0 0;            -o-transform-origin: 0 0;            transform-origin: 0 0;            line-height:100px;        }        #oneUl .ulOne        {            padding: 0;            margin: 0;            list-style: none;            position: absolute;            width: 0;            height: 0;        }        #oneUl li.liOne > a        {            position: absolute;            display: block;            width: 100px;            height: 100px;            background: #c8c8c8;            border-radius: 0 0 100px 0;            left: 300px;            top: 300px;            -webkit-transform: rotate(180deg);            -moz-transform: rotateZ(180deg);            -ms-transform: rotate(180deg);            -o-transform: rotate(180deg);            transform: rotate(180deg);        }                #twoUl li.liOne > a        {            position: absolute;            display: block;            width: 100px;            height: 100px;            background: #c8c8c8;            top:300px;            border-radius: 0 0 100px 0;                        -webkit-transform: rotate(-90deg);            -moz-transform: rotateZ(-90deg);            -ms-transform: rotate(-90deg);            -o-transform: rotate(-90deg);            transform: rotate(-90deg);        }        #threeUl li.liOne > a        {            position: absolute;            display: block;            width: 100px;            height: 100px;            background: #c8c8c8;            left:300px;            top:0px;            border-radius: 0 0 100px 0;                        -webkit-transform: rotate(90deg);            -moz-transform: rotateZ(90deg);            -ms-transform: rotate(90deg);            -o-transform: rotate(90deg);            transform: rotate(90deg);        }       /* #fourUl .ulOne        {            padding: 0;            margin: 0;            list-style: none;            position: absolute;            width: 0;            height: 0;        }*/        #fourUl li.liOne > a        {            position: absolute;            display: block;            width: 100px;            height: 100px;            background: #c8c8c8;            border-radius: 0 0 100px 0;        }                #sectorDiv ul.ulTwo, #sectorDiv ul.ulThree        {            z-index: -1;        }                #fourUl li.liTwo        {            left: 0;            position: absolute;            top: 0;        }        #oneUl li.liTwo > a        {            position: absolute;            display: block;            width: 100px;            padding-left: 100px;            height: 200px;            background: #ddd;            border-radius: 0 0 200px 0;            -webkit-transform: rotate(180deg);            -moz-transform: rotateZ(180deg);            -ms-transform: rotate(180deg);            -o-transform: rotate(180deg);                                   transform: rotate(180deg);        }         #twoUl li.liTwo > a        {            position: absolute;            display: block;            width: 100px;            padding-left: 100px;            height: 200px;            background: #ddd;            border-radius: 0 0 200px 0;            -webkit-transform: rotate(-90deg);            -moz-transform: rotateZ(-90deg);            -ms-transform: rotate(-90deg);            -o-transform: rotate(-90deg);                                   transform: rotate(-90deg);        }        #threeUl li.liTwo > a        {            position: absolute;            display: block;            width: 100px;            padding-left: 100px;            height: 200px;            background: #ddd;            border-radius: 0 0 200px 0;            -webkit-transform: rotate(90deg);            -moz-transform: rotateZ(90deg);            -ms-transform: rotate(90deg);            -o-transform: rotate(90deg);                                   transform: rotate(90deg);        }        #fourUl li.liTwo > a        {            position: absolute;            display: block;            width: 100px;            padding-left: 100px;            height: 200px;            background: #ddd;            border-radius: 0 0 200px 0;        }        #oneUl ul.ulThree li a        {            position: absolute;            display: block;            width: 100px;            padding-left: 200px;            height: 300px;            background: #999;            border-radius: 0 0 300px 0;            -webkit-transform: rotate(180deg);            -moz-transform: rotateZ(180deg);            -ms-transform: rotate(180deg);            -o-transform: rotate(180deg);            transform: rotate(180deg);        }        #twoUl ul.ulThree li a        {            position: absolute;            display: block;            width: 100px;            padding-left: 200px;            height: 300px;            background: #999;            border-radius: 0 0 300px 0;            -webkit-transform: rotate(-90deg);            -moz-transform: rotateZ(-90deg);            -ms-transform: rotate(-90deg);            -o-transform: rotate(-90deg);            transform: rotate(-90deg);        }          #threeUl ul.ulThree li a        {            position: absolute;            display: block;            width: 100px;            padding-left: 200px