扇形旋转多级菜单效果
代码语言:html
所属分类:菜单导航
代码描述:扇形旋转多级菜单效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>css3鼠标悬停扇形打开菜单代码 </title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
position: relative;
margin: 0px;
padding: 0px;
font-size: 14px;
color: #000;
background-repeat: no-repeat;
background-position: center center;
background-color: #F7F8F8;
background-size: 100% 100%;
}
.tips {
width: 702px;
margin: 0 auto;
line-height: 24px;
padding-top: 10px;
}
.bredcolor {
color: #fff;
}
.menuHolder {
width: 200px;
height: 200px;
position: absolute;
z-index: 100;
left: 0;
top: 0;
border-radius: 0 0 200px 0;
border: 1px solid #0095da;
border-top: none;
border-left: none;
}
.menuHolder ul {
padding: 0;
margin: 0;
list-style: none;
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
}
.menuHolder ul li {
border-radius: 0 0 300px 0;
width: 0;
height: 0;
}
.menuHolder ul li a {
color: #000;
text-decoration: none;
text-align: center;
box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.4);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
.menuHolder ul.p1 li {
position: absolute;
left: 0;
top: 0;
}
.menuHolder ul.p2 {
z-index: -1;
}
.menuHolder ul.p3 {
z-index: -1;
}
.menuHolder li.s1 > a {
position: absolute;
display: block;
width: 200px;
height: 200px;
background: #01040c url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAMAAABG8BK2AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADAUExURQAAAACg6R0rUB0rUB0rUB0rUACg6R0rUB0rUB0rUB0rUB0rUB0rUBdIdR0rUB0rUB0rUB0rUB0rUACg6QCg6QCg6QCg6R0rUACg6QCg6R0rUB0rUB0rUACg6QCg6QCg6QCg6R0rUB0rUACg6QCg6QCg6R0rUB0rUB0rUACg6QCg6R0rUB0rUB0rUB0rUAAiNwCg6R0rUAApQQCDwQA/YACJyQAxTQBahwCO0AB8twBVgACd5AA6WQBuogBDZgBtoVrNu/8AAAAvdFJOUwDidxry5QfcEwYwHWYBqNK3+WGEUJr0r+wRSMhO8a1zOfxTzxolWpMgxsJxkIec1Fe18wAAA1pJREFUWMO9WGl3qjAQBQSRRRBcwH1rq12Zcd/a9///1YsJWrWiSU/em08cSG5m7ixMRlEypWiH75Fv6Ii64UfvoV1UhKUQegZeiOGFBRGMYiMKyDbT0wZ2zlIUK2cPNM8kr4KowauTFZIN/ZI7vvwwdkt9Ah5aPCgNAmJozvWPjkZMNRt3QRyPLHNvnGe55BjPuY0y0FHX7ihtaWTR4NaCEWLp+6Bir1t9VtsAbfW52u19c+uUEEeZhxWaGLweFucrHQJwKu1OJX844DXAZobzHRMNO32ul2OycfW5+VpMkmSy+Np8rsiLuFxPF9gGmk4Gip9+yJdrAPPlIjmTxXIOUCunGjn+VZyCeVSzogKsZ8kVma0B1MqRAvOHXVYTffYyXyWaXAWhQESjKlOo4GPzkucRGkzFhyFsl8kNWW5h+MDsMnB0ES8YMHYfVVjtkpuyW4H6yHgO8Cx+cjq6DCWG6SS5I5MpxAzHRf2UZg9LzCIV1ndRCM4aVGZXlG5k2ZiC5occuqT6DCnPjo6tY9CbqNGHKqy4UAjOCqp0i4bmIe6f0KSOq8B2l3DKbgs0fiwTn1JlfMZvXYVlwi1LUOuMZb+YMmNQZcowTwRkDmWqjoGN1E2UmXoNZiIwM6jVGTsejemgn2PKrBMhWTN1cv1gn0Uhc30+FlNmr05MnV7CkEaQy9w0TwRlzpzlYkT8pCMNvY6Imw7O6tAQRL2o2GhSm2pwVqWmcFWmZ3UMatQqE21CDSW6d2ETD0yygh5zdai8MXd34U8iLJ/QZS5/Izy3WDptxGE2LLFaxNc+0nr1IuruvXzBC61e6CsG0l++CgtxmAWoNADRUHSklbwNE3GKJ9CmeYC6gkjzEiARh0kAaFYiZsHwCdRokhOYDKP4aiDEB6MkUDwmFEtyeEb4cVF8En4ZycAFc5IMGanJJSepmVEo+Bj+LhSSypakIiqrpEv6wUj63cn6+UpqBSQ1JrLaJElN295Z0bGF5EG53kLuQWU0tITlX7bXT+dt+sfvmv2Pf3P1kHQRYteyHP+1LOdnX+8kXBJlXVkzLtDEvljoAi3rOs89XIic/zPqOBm8/EByRAYve25bhzFQaz8Gsgpju3UYA7WERlMF99pQyhUaSl2MyALdvDci+ws4DgfWZ4I43wAAAABJRU5ErkJggg==") no-repeat 44px 44px;
/*background-size: 46px;*/
border-radius: 0 0 200px 0;
}
.menuHolder:hover .s1 > a{
background: #01040c url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAMAAABG8BK2AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADAUExURQAAAB0rUB0rUACg6QCg6R0rUB0rUB0rUB0rUB0rUB0rUB0rUB0rUB0rUB0rUB0rUACg6R0rUACg6QCg6R0rUACg6R0rUB0rUB0rUB0rUACg6R0rUACg6QCg6QCg6QCg6QCg6QCg6QCg6QCg6QCg6QCg6R0rUB0rUB0rUB0rUB0rUAAiNwCg6R0rUAA/YAAtRwBahwCJyQAoQAA1UwB7tgBHawBtogCP0QAkOwBUfwCFwwCd5QBhkQCb4gCBvgCV2ltuAOgAAAArdFJOUwCp0fMId7MdZAUw5fL5FNmE3k/jD+xIWMRQl+/ErXM4E+DPGiWgk92Qh5xuwGC5AAAD50lEQVRYw61YaXuiWgyWRQEBEZdWazc603ZmSFhkcUP7///VHM5RLzisveSDj4K8JG+Wk6TXK5eh/JvjVQ1RU3nutzzstZeZzKl4Iyonj1qB3A108pjJ9ZdDaUYwpeGyz5nkkj64a4qhyAZ5YCFLtzckeUFuGLLSSBMCoval4ptSn5hq1GskccSYqvcpMjGOk6pRlivU+jVKK30NV8uqP3wgDjIvenl+f5wKAML08f35JaPyAPGj9GWjBer9yw9x8kQAsiI8TcTL3b6OixLnSwaqlxB7Hc/Jg5t4FwVr214H0S7ekAvz8eslNFU0CgmSTOTPN8QxUcT3XDsnrucTlcZnjSQezQKckYH8jH2dWAChYxeIEwJYk3Oc82j8Y5eyQJ5dFB+IJoUgFIho9MAUGvG4uOX5A1Wm4o83OHhbu1S23gHefjC7VPy4iRfUGbs/Ldg4dqU4G7B+Mp51zMWPtEKZocxh79o14u5hznBkXGVp5nDALLIgXNu1sg7BYnYNzg+ybESNgopvsG+AQnD28EZ5lrSMWQay4H2AjWs3EncDDyyc0bh46x5N+nUCx8BuKMERaPwoJt6fYXjGrzgFz24sHkxFxjJ/YUalyozBt1uID2Oqjop3ZzdRZl4FcNrAOCC8MnY4mhu6PmLKhHYrCZk6I12fUeOo68V5O2VSdeYiix35+knc5NstxWfOonooK6Sh99TGTRdnPdEQxJXSG6JJbRIgF3knKJRTLgZBoFaZOCQqUaJfbmxqAmNv4IW5Wu79Yu5+hthuLTE8M5f/IgwvWTrt2sPsWGItCcc80nr12NbdqUTwSKsXyQeVOcqCXFZG+ziqLxkBWMxVak9DGsMCrPO+BDjsE2dbXXZAoHmAWg+R5iXATYgmpwOBOoZeVe0AoFmJWAaTviuK/dTJX/GupJhtGYxCYIqNukbYLv5KofxCqlyY0+QkRhVS7GYP3sALjylVp8Qpp7jQ4Qkckyy7WyfZp0p5pQ4vDD+XnNWb6B+q9lFp+JUkQ3pWn4LmyVCSmuRVhNu4+rzJpGZJoUitSA7wVdUVZAtFVdkKCEV+1KhsVRfRiLRqYdCgiNaU9K33BYdkXV/S6w4YNyb5sKs9YOqPu+BU1MbdHHdNDl9KkVt9+DZpBbbJEZLqVoA0Jp/1jYmbb5OvjcnntTG5tknvbdqk99s2qaum7b8Wctq0hZwWtJAp6DcbWi03N9x/t72+z7fpf77X7P/5/6PHrGD06GgQ6mosKx8St9s2Q2JXI2v5AD232gzQXY3znS0Xulp1dLZ4oRTRNdDneQ2ksDXQJ10DLVvtk0ZdLKWyKzId9ZVZtyL7C2xM4LVCBMEFAAAAAElFTkSuQmCC") no-repeat 44px 44px;
}
.menuHolder li.s2 > a {
position: absolute;
display: block;
width: 200px;
padding-left: 200px;
height: 400px;
background: #0b2433;
border-radius: 0 0 400px 0;
font-size: 16px;
color: #306c92;
border-right: 1px solid #009be2;
}
.menuHolder ul.p3 li a {
position: absolute;
display: block;
width: 200px;
padding-left: 400px;
height: 600px;
line-height: 200px;
/*background: #999;*/
border-radius: 0 0 600px 0;
border-top: 1px solid #053f63;
border-right: 1px solid #008acb;
color: #306c92;
font-size: 16px;
}
.menuHolder ul ul {
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotateZ(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.menuHolder li.s2:nth-of-type(6) > a {
/*background: #888;*/
-webkit-transform: rotate(75deg);
-moz-transform: rotateZ(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
}
.menuHolder li.s2:nth-of-type(5) > a {
/*background: #999;*/
-webkit-transform: rotate(60deg);
-moz-transform: rotateZ(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.menuHolder li.s2:nth-of-type(4) > a {
/*background: #aaa;*/
-webkit-transform: rotate(45deg);
-moz-transform: rotateZ(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menuHolder li.s2:nth-of-type(3) > a {
/*background: #bbb;*/
-webkit-transform: rotate(30deg);
-moz-transform: rotateZ(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.menuHolder li.s2:nth-of-type(2) > a {
/*background: #ccc;*/
-webkit-transform: rotate(15deg);
-moz-transform: rotateZ(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
transform: rotate(15deg);
}
.menuHolder .a6 li:nth-of-type(6) > a {
/*background: #444;*/
-webkit-transform: rotate(75deg);
-moz-transform: rotateZ(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
}
.menuHolder .a6 li:nth-of-type(5) > a {
/*background: #555;*/
-webkit-transform: rotate(60deg);
-moz-transform: rotateZ(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.menuHolder .a6 li:nth-of-type(4) > a {
/*background: #666;*/
-webkit-transform: rotate(45deg);
-moz-transform: rotateZ(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menuHolder .a6 li:nth-of-type(3) > a {
/*background: #777;*/
-webkit-transform: rotate(30deg);
-moz-transform: rotateZ(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.menuHolder .a6 li:nth-of-type(2) > a {
/*background: #888;*/
-webkit-transform: rotate(15deg);
-moz-transform: rotateZ(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
transform: rotate(15deg);
}
.menuHolder .a5 li:nth-of-type(5) > a {
/*background: #555;*/
-webkit-transform: rotate(72deg);
-moz-transform: rotateZ(72deg);
-ms-transform: rotate(72deg);
-o-transform: rotate(72deg);
transform: rotate(72deg);
}
.menuHolder .a5 li:nth-of-type(4) > a {
/*background: #666;*/
-webkit-transform: rotate(54deg);
-moz-transform: rotateZ(54deg);
-ms-transform: rotate(54deg);
-o-transform: rotate(54deg);
transform: rotate(54deg);
}
.menuHolder .a5 li:nth-of-type(3) > a {
/*background: #777;*/
-webkit-transform: rotate(36deg);
-moz-transform: rotateZ(36deg);
-ms-transform: rotate(36deg);
-o-transform: rotate(36deg);
transform: rotate(36deg);
}
.menuHolder .a5 li:nth-of-type(2) > a {
/*background: #888;*/
-webkit-transform: rotate(18deg);
-moz-transform: rotateZ(18deg);
-ms-transform: rotate(18deg);
-o-transform: rotate(18deg);
transform: rotate(18deg);
}
.menuHolder .a3 li:nth-of-type(3) > a {
/*background: #777;*/
-webkit-transform: rotate(60deg);
-moz-transform: rotateZ(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.menuHolder .a3 li:nth-of-type(2) > a {
/*background: #888;*/
-webkit-transform: rotate(30deg);
-moz-transform: rotateZ(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.menuHolder li.s1:hover ul.p2 {
-webkit-transform: rotate(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.menuHolder li.s2:hover ul.p3 {
-webkit-transform: rotate(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.menuHolder ul li:hover > a {
/*background: #f00;*/
/*color: #fff;*/
}
.menuHolder li.s2:hover > a {
/*background: #d00;*/
color: #9ae6ff;
text-shadow: 0 0 24px rgba(107, 194, 255, .64);
}
.menuHolder .p3 li:hover a {
/*background: #d00;*/
color: #9ae6ff;
text-shadow: 0 0 24px rgba(107, 194, 255, .64);
}
.menuWindow {
/*width: 610px;*/
/*height: 610px;*/
/*overflow: hidden;*/
position: absolute;
left: 0;
top: 0;
z-index: 100;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0