我正在尝试创建一个圆形的菜单按钮,当您单击时,它会变成一个圆 Angular 三 Angular 形,然后会出现一个菜单。目前虽然我已经能够添加圆 Angular 三 Angular 形但似乎无法在不影响三 Angular 形最终外观的情况下将其变成圆形。当我在原始正方形上应用 50% 的边界半径时,它会使圆 Angular 三 Angular 形变成这个 [puu.sh] http://puu.sh/gZ6e9/b5d03cd612.png.[puu.sh]
它是一个菜单按钮,与大多数使用 jscript 的汉堡包按钮的工作方式相同。
唯一的问题是,如果 50% 的边界半径也适用于圆 Angular 三 Angular 形,我无法弄清楚如何将它变成一个圆圈。
我不太了解使用 javascript 进行编码,但我知道 css 和 html。
我把所有的都放在codepen [codepen]http://codepen.io/Kiwimoose/pen/PwgBdB [codepen]
如果有人对如何修复它有任何想法,我们将不胜感激。
<div class="container" >
<a href="#menu" id="toggle"><span></span></a> <!--hamburger button-->
<div id="menu" title="menu"> <!--Menu and items in the menu-->
<ul>
<li><a href="#" >1</a></li>
<li><a href="#" >2</a></li>
<li><a href="#" >3</a></li>
<li><a href="#" >4</a></li>
</ul>
</div>
var theToggle = document.getElementById('toggle');
// based on Todd Motto functions
// http://toddmotto.com/labs/reusable-js/
// hasClass
function hasClass(elem, className) {
return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}
// addClass
function addClass(elem, className) {
if (!hasClass(elem, className)) {
elem.className += ' ' + className;
}
}
// removeClass
function removeClass(elem, className) {
var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ') + ' ';
if (hasClass(elem, className)) {
while (newClass.indexOf(' ' + className + ' ') >= 0 ) {
newClass = newClass.replace(' ' + className + ' ', ' ');
}
elem.className = newClass.replace(/^\s+|\s+$/g, '');
}
}
// toggleClass
function toggleClass(elem, className) {
var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, " " ) + ' ';
if (hasClass(elem, className)) {
while (newClass.indexOf(" " + className + " ") >= 0 ) {
newClass = newClass.replace( " " + className + " " , " " );
}
elem.className = newClass.replace(/^\s+|\s+$/g, '');
} else {
elem.className += ' ' + className;
}
}
theToggle.onclick = function() {
toggleClass(this, 'on');
return false;
}
最佳答案
你想要border radius: 50%
仅在 #toggle
时应用元素没有类别 .on
.为此,只需覆盖 border-radius: 50%
通过申请 border-radius: 0
至 #toggle.on
.
这是更新后的代码笔:http://codepen.io/anon/pen/QwPBPX
#toggle span,
#toggle span:after,
#toggle span:before {
width: 100%;
height: 100px;
background-color: #9fe8b7;
transition: all 0.3s;
backface-visibility: hidden;
border-radius: 50%;
}
#toggle.on span,
#toggle.on span:after,
#toggle.on span:before {
border-radius: 0; /* Insert this */
}
关于javascript - 圆 Angular 三 Angular 形(菜单按钮切换),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29420093/