在CSS中创build一个径向菜单
如何创build一个看起来像这样的菜单…
链接到PSD
我不想使用PSD图像。 我宁愿使用像FontAwesome这样的软件包中的图标，并在CSS中生成背景/ css。
使用PSD来生成工具提示的图像然后使用它的菜单的版本可以在这里find。
差不多3年后，我终于有时间重新审视这个问题，并发表一个改进版。 您仍然可以在最后查看原始答案以供参考。
虽然SVG可能是更好的select，特别是今天，我的目标是保持它只是HTML和CSS，没有JS，没有SVG，没有图像（根元素背景除外）。
2015演示
截图
Chrome 43：
Firefox 38：
IE 11：
码
HTML非常简单。 我使用checkboxhack来显示/隐藏菜单。
<input type='checkbox' id='t'/> <label for='t'>✰</label> <ul> <li><a href='#'>☀</a></li> <li><a href='#'>☃</a></li> <li><a href='#'>☁</a></li> </ul> 我使用Sass来保持这个逻辑，并且如果需要，可以更容易地进行更改。 沉重的评论。
$d: 2em; // diameter of central round button $r: 16em; // radius of menu $n: 3; // must match number of list items in DOM $exp: 3em; // menu item height $tip: .75em; // dimension of tip on middle menu item $w: .5em; // width of ends $cover-dim: 2*($r - $exp); // dimension of the link cover $angle: 15deg; // angle for a menu item $skew-angle: 90deg - $angle; // how much to skew a menu item to $angle $scale-factor: cos($skew-angle); // correction factor - see vimeo.com/98137613 from min 15 $off-angle: .125deg; // offset angle so we have a little space between menu items // don't show the actual checkbox input { transform: translate(-100vw); // move offscreen visibility: hidden; // avoid paint } // change state of menu to revealed on checking the checkbox input:checked ~ ul { transform: scale(1); opacity: .999; // ease out back from easings.net/#easeOutBack transition: .5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } // position everything absolutely such that their left bottom corner // is in the middle of the screen label, ul, li { position: absolute; left: 50%; bottom: 50%; } // visual candy styles label, a { color: #858596; font: 700 1em/ #{$d} sans-serif; text-align: center; text-shadow: 0 1px 1px #6c6f7e; cursor: pointer; } label { z-index: 2; // place it above the menu which has z-index: 1 margin: -$d/2; // position correction such that it's right in the middle width: $d; height: $d; border-radius: 50%; box-shadow: 0 0 1px 1px white, 0 .125em .25em #876366, 0 .125em .5em #876366; background: radial-gradient(#d4c7c5, #e5e1dd); } ul { z-index: 1; margin: -$r + $exp + 1.5*$d 0; // position correction padding: 0; list-style: none; transform-origin: 50% (-$r + $exp); transform: scale(.001); // initial state: scaled down to invisible will-change: transform; // better perf on transitioning transform opacity: .001; // initial state: transparent filter: drop-shadow(0 .125em .25em #847c77) drop-shadow(0 .125em .5em #847c77); // ease in back, also from easings.net transition: .5s cubic-bezier(0.6, -0.28, 0.735, 0.045); // menu ends &:before, &:after { position: absolute; margin: -$exp (-$w/2); width: $w; height: $exp; transform-origin: 50% 100%; background: linear-gradient(#ddd, #c9c4bf); content: ''; } &:before { border-radius: $w 0 0 $w; transform: rotate(-.5*$n*$angle) translate(-$w/2, -$r + $exp); box-shadow: inset 1px 0 1px #eee; } &:after { border-radius: 0 $w $w 0; transform: rotate(.5*$n*$angle) translate($w/2, -$r + $exp); box-shadow: inset -1px 0 1px #eee; } } li { overflow: hidden; width: $r; height: $r; transform-origin: 0 100%; @for $i from 0 to $n { &:nth-child(#{$i + 1}) { $curr-angle: $i*$angle + ($i + .5)*$off-angle - .5*$n*($angle + $off-angle); // make each list item a rhombus rotated around its bottom left corner // see explanation from minute 33:10 youtube.com/watch?v=ehjoh_MmE9A transform: rotate($curr-angle) skewY(-$skew-angle) scaleX($scale-factor); // add tip for the item n the middle, just a rotated square @if $i == ($n - 1)/2 { a:after { position: absolute; top: $exp; left: 50%; margin: -$tip/2; width: $tip; height: $tip; transform: rotate(45deg); box-shadow: inset -1px -1px 1px #eee; background: linear-gradient(-45deg, #bbb, #c9c4bf 50%); content: ''; } } } } a, &:before { margin: 0 (-$r); width: 2*$r; height: 2*$r; border-radius: 50%; } &:before, &:after { position: absolute; border-radius: 50%; // undo distorting transforms from menu item (parent li) transform: scaleX(1/$scale-factor) skewY($skew-angle); content: ''; } // actual background of the arched menu items &:before { box-shadow: inset 0 0 1px 1px #fff, inset 0 0 $exp #ebe7e2, inset 0 0 1px ($exp - .0625em) #c9c4bf, inset 0 0 0 $exp #dcdcdc; } // cover to prevent click action in between the star and menu items &:after { top: 100%; left: 0; margin: -$cover-dim/2; width: $cover-dim; height: $cover-dim; border-radius: 50%; } } a { display: block; // undo distorting transforms from menu item and rotate into right position transform: scaleX(1/$scale-factor) skewY($skew-angle) rotate($angle/2); line-height: $exp; text-align: center; text-decoration: none; }
html { overflow: hidden; background: url(AeFfmwL.jpg); } input { /* move offscreen */ -webkit-transform: translate(-100vw); -ms-transform: translate(-100vw); transform: translate(-100vw); /* avoid paint */ visibility: hidden; } input:checked ~ ul { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: .999; /* ease out back from easings.net */ -webkit-transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } label, ul, li { position: absolute; left: 50%; bottom: 50%; } label, a { color: #858596; font: 700 1em/ 2em sans-serif; text-align: center; text-shadow: 0 1px 1px #6c6f7e; cursor: pointer; } label { z-index: 2; margin: -1em; width: 2em; height: 2em; border-radius: 50%; box-shadow: 0 0 1px 1px white, 0 .125em .25em #876366, 0 .125em .5em #876366; background: #d3d3d3; background: -webkit-radial-gradient(#d4c7c5, #e5e1dd); background: radial-gradient(#d4c7c5, #e5e1dd); } ul { z-index: 1; margin: -10em 0; padding: 0; list-style: none; -webkit-transform-origin: 50% -13em; -ms-transform-origin: 50% -13em; transform-origin: 50% -13em; -webkit-transform: scale(0.001); -ms-transform: scale(0.001); transform: scale(0.001); /* for improved perf on transitioning transform * https://twitter.com/paul_irish/status/608492121734193152 */ will-change: transform; opacity: .001; -webkit-filter: drop-shadow(0 0.125em 0.25em #847c77); filter: drop-shadow(0 0.125em 0.25em #847c77); -webkit-transition: 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045); transition: 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045); } ul:before, ul:after { position: absolute; margin: -3em -0.25em; width: 0.5em; height: 3em; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; background: #d3d3d3; background: -webkit-linear-gradient(#ddd, #c9c4bf); background: linear-gradient(#ddd, #c9c4bf); content: ''; } ul:before { border-radius: 0.5em 0 0 0.5em; -webkit-transform: rotate(-22.5deg) translate(-0.25em, -13em); -ms-transform: rotate(-22.5deg) translate(-0.25em, -13em); transform: rotate(-22.5deg) translate(-0.25em, -13em); box-shadow: inset 1px 0 1px #eee; } ul:after { border-radius: 0 0.5em 0.5em 0; -webkit-transform: rotate(22.5deg) translate(0.25em, -13em); -ms-transform: rotate(22.5deg) translate(0.25em, -13em); transform: rotate(22.5deg) translate(0.25em, -13em); box-shadow: inset -1px 0 1px #eee; } li { overflow: hidden; width: 16em; height: 16em; -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; } li:nth-child(1) { -webkit-transform: rotate(-22.625deg) skewY(-75deg) scaleX(0.25882); -ms-transform: rotate(-22.625deg) skewY(-75deg) scaleX(0.25882); transform: rotate(-22.625deg) skewY(-75deg) scaleX(0.25882); } li:nth-child(2) { -webkit-transform: rotate(-7.5deg) skewY(-75deg) scaleX(0.25882); -ms-transform: rotate(-7.5deg) skewY(-75deg) scaleX(0.25882); transform: rotate(-7.5deg) skewY(-75deg) scaleX(0.25882); } li:nth-child(2) a:after { position: absolute; top: 3em; left: 50%; margin: -0.375em; width: 0.75em; height: 0.75em; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); box-shadow: inset -1px -1px 1px #eee; background: -webkit-linear-gradient(135deg, #bbb, #c9c4bf 50%); background: linear-gradient(-45deg, #bbb, #c9c4bf 50%); content: ''; } li:nth-child(3) { -webkit-transform: rotate(7.625deg) skewY(-75deg) scaleX(0.25882); -ms-transform: rotate(7.625deg) skewY(-75deg) scaleX(0.25882); transform: rotate(7.625deg) skewY(-75deg) scaleX(0.25882); } li a, li:before { margin: 0 -16em; width: 32em; height: 32em; border-radius: 50%; } li:before, li:after { position: absolute; border-radius: 50%; -webkit-transform: scaleX(3.8637) skewY(75deg); -ms-transform: scaleX(3.8637) skewY(75deg); transform: scaleX(3.8637) skewY(75deg); content: ''; } li:before { box-shadow: inset 0 0 1px 1px #fff, inset 0 0 3em #ebe7e2, inset 0 0 1px 2.9375em #c9c4bf, inset 0 0 0 3em #dcdcdc; } li:after { top: 100%; left: 0; margin: -13em; width: 26em; height: 26em; border-radius: 50%; } a { display: block; -webkit-transform: scaleX(3.8637) skewY(75deg) rotate(7.5deg); -ms-transform: scaleX(3.8637) skewY(75deg) rotate(7.5deg); transform: scaleX(3.8637) skewY(75deg) rotate(7.5deg); line-height: 3em; text-align: center; text-decoration: none; }
<input type='checkbox' id='t'/> <label for='t'>✰</label> <ul> <li><a href='#'>☀</a></li> <li><a href='#'>☃</a></li> <li><a href='#'>☁</a></li> </ul>
安娜的回应是踢屁股！ 这是一些严重的CSS-fu。
我的解决scheme可能并不完全是你所希望的，但这是另一种可能的解决scheme。 我现在正在制作一个指南针界面，它具有类似弧形button的样式。 我决定用Raphael和SVG来开发它。
我在Illustrator中创build了一个弧形，为它导出了SVG，从导出的SVG文件中抓取了弧的path定义，并使用Raphael来构build我的界面。
这是一个JSFiddle 。
这里是JavaScript：
var arc = { fill: '#333', stroke: '#333', path: 'M53.286,44.333L69.081,7.904C48.084-1.199,23.615-2.294,0.648,6.78l14.59,36.928C28.008,38.662,41.612,39.27,53.286,44.333z' }; var paper = Raphael(document.getElementById("notepad"), 500, 500); var arcDegrees = 45; var centerX = 210; var centerY = 210; var compassRadius = 68; var currentlyActive = 45; var directions = [ {label:'N', degrees:0, rotatedDegrees:270}, {label:'NE', degrees:45, rotatedDegrees:315}, {label:'E', degrees:90, rotatedDegrees:0}, {label:'SE', degrees:135, rotatedDegrees:45}, {label:'S', degrees:180, rotatedDegrees:90}, {label:'SW', degrees:225, rotatedDegrees:135}, {label:'W', degrees:270, rotatedDegrees:180}, {label:'NW', degrees:315, rotatedDegrees:225} ]; function arcClicked() { var label = $(this).data('direction-label'); $("#activeArc").attr('id', null); $(this).attr('id', 'activeArc'); } for (i = 0; i < 360; i += arcDegrees) { var direction = _.find(directions, function(d) { return d.rotatedDegrees == i; }); var radians = i * (Math.PI / 180); var x = centerX + Math.cos(radians) * compassRadius; var y = centerY + Math.sin(radians) * compassRadius; var newArc = paper.path(arc.path); // newArc.translate(x, y); // newArc.rotate(i + 89); newArc.transform('T' + x + ',' + y + 'r' + (i + 89)); if (direction.degrees == currentlyActive) { $(newArc.node).attr('id', 'activeArc'); } $(newArc.node) .attr('class', 'arc') .data('direction-label', direction.label) .on('click', arcClicked); }
这里是相关的CSS：
#notepad { background: #f7f7f7; width: 500px; height: 500px; } .arc { fill: #999; stroke: #888; cursor: pointer; } .arc:hover { fill: #777; stroke: #666; } #activeArc { fill: #F18B21 !important; stroke: #b86a19 !important; }
另一个非常好的方法是使用JavaScript进行定位。
DEMO + TUTORIAL制作animation放射状菜单
一个赞成这种方法是，你可以使用任何数量的元素，并将保持径向放置，而不必改变你的任何CSS。
有问题的JavaScript是：
var items = document.querySelectorAll('.circle a'); for(var i = 0, l = items.length; i < l; i++) { items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%"; items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%"; } document.querySelector('.menu-button').onclick = function(e) { e.preventDefault(); document.querySelector('.circle').classList.toggle('open'); }
