CODEWITHSUNDEEP
javascriptcssmenushapes
moose
moose

Reputation: 13

Circle to rounded triangle (menu button toggle)

I am trying to create a menu button that is a circle, when you click, it turns into a rounded triangle and a menu comes down. Currently though I have been able to add the rounded triangle but can't seem to make it into a circle without affecting the final look of the triangle. When I apply a 50% border radius on the original square it makes the rounded triangle turn into this [puu.sh] http://puu.sh/gZ6e9/b5d03cd612.png.[puu.sh] It is a menu button that works the same as most hamburger buttons using jscript. The only issue is, is a cannot figure out how I can make it a circle to start out, without the border radius of 50% also applying to the rounded triangle.

I Don't know very much on coding with javascript, but i do know css and html.

I put all here in codepen [codepen]http://codepen.io/Kiwimoose/pen/PwgBdB [codepen]

If anyone has any ideas on how to fix it it would be GREATLY appreciated. 

<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;
}

Upvotes: 1

Views: 337

Answers (2)

Simon Mathewson
Simon Mathewson

Reputation: 731

You want border radius: 50% only applied, when the #toggle element doesn't have the class .on. In order to do that, just overwrite border-radius: 50% by applying border-radius: 0 to #toggle.on.

Here's the updated codepen: 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 */
}

Upvotes: 1

Dr G.
Dr G.

Reputation: 1332

This should make a circle depending on your dimensions. 

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

You can add an event to this using transform and active in order to switch between your triangle and circle.

Upvotes: 0

Related Questions