圆形到圆角三角形(菜单按钮切换）

Circle to rounded triangle (menu button toggle)

本文关键字：按钮 菜单 圆角 三角形      更新时间：2023-09-26

我正在尝试创建一个圆形菜单按钮，当你点击时，它会变成一个圆角三角形，然后菜单就会出现。目前，虽然我已经能够添加圆角三角形，但似乎无法在不影响三角形最终外观的情况下将其做成圆形。当我在原始正方形上应用50%的边界半径时，它会使圆角三角形变成这个[puu.sh] http://puu.sh/gZ6e9/b5d03cd612.png.[puu.sh]这是一个菜单按钮，其工作原理与使用jscript的大多数汉堡按钮相同。唯一的问题是，如果不将50%的边界半径应用于圆角三角形，a无法计算出如何使其成为一个圆。

我对javascript编码不太了解，但我知道css和html。

我把所有这些都放在代码笔[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;
}

当#toggle元素没有类.on时，您只希望应用border radius: 50%。为了做到这一点，只需通过将border-radius: 0应用于#toggle.on来覆盖border-radius: 50%。

这是更新后的代码笔：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 */
}

这应该会根据您的尺寸形成一个圆圈。

    border-radius: 75px;
    -webkit-border-radius: 75px;
    -moz-border-radius: 75px;

您可以使用transform和active向其中添加一个事件，以便在三角形和圆形之间切换。

相关文章：