rotate menu to arrow

Subject:

              <div class="bt-menu-trigger">                <span></span>              </div>              <style type="text/css">              .bt-menu-trigger {                        font-size: 30px;                        position: relative;                        display: inline-block;                        width: 2em;                        height: 2em;                        cursor: pointer;                      }                                            .bt-menu-trigger span {                        position: absolute;                        top: 50%;                        left: 0;                        display: block;                        width: 100%;                        height: 0.2em;                        margin-top: -0.1em;                        background-color: #1E1E1E;                        -webkit-touch-callout: none;                        -webkit-user-select: none;                        -khtml-user-select: none;                        -moz-user-select: none;                        -ms-user-select: none;                        user-select: none;                        -webkit-transition: background-color 0.3s;                        transition: background-color 0.3s;                      }                                                                  .bt-menu-trigger span:after,                      .bt-menu-trigger span:before {                        position: absolute;                        left: 0;                        width: 100%;                        height: 100%;                        background: #1E1E1E;                        content: '';                        -webkit-transition: -webkit-transform 0.3s;                        transition: transform 0.3s;                      }                                            .bt-menu-trigger span:before {                        -webkit-transform: translateY(-0.5em);                        transform: translateY(-0.5em);                      }                                            .bt-menu-trigger span:after {                        -webkit-transform: translateY(0.5em);                        transform: translateY(0.5em);                      }                                            .bt-menu-trigger.bt-menu-open span:after {                        -webkit-transform: translateY(-0.36em) translateX(0.65em) rotate(45deg) scaleX(0.6);                        transform: translateY(-0.35em) translateX(0.65em) rotate(45deg) scaleX(0.6);                      }                                            .bt-menu-trigger.bt-menu-open span:before {                        -webkit-transform: translateY(0.36em) translateX(0.65em) rotate(-45deg) scaleX(0.6);                        transform: translateY(0.35em) translateX(0.65em) rotate(-45deg) scaleX(0.6);                      }              </style>            </div>            <script type="text/javascript">                var button = document.querySelector('.bt-menu-trigger');                button.addEventListener('click', function (){                  button.classList.toggle('bt-menu-open');                });                $('.bt-menu-trigger').click(function(){                  //once clicked rotate                    $(this).delay(300).queue(function(next){                      $(this).css({'-ms-transform':'rotate(90deg)',                                    '-webkit-transform':'rotate(90deg)',                                    'transform':'rotate(90deg)',                                    '-webkit-transition-duration':'1s',                                    '-moz-transition-duration':'1s',                                    ' -o-transition-duration':'1s',                                    'transition-duration':'1s'});                      next();                    });                });            </script>

2016-03-12 13:08:56gstlouis

              <div class="bt-menu-trigger">
                <span></span>
              </div>
              <style type="text/css">
              .bt-menu-trigger {
                        font-size: 30px;
                        position: relative;
                        display: inline-block;
                        width: 2em;
                        height: 2em;
                        cursor: pointer;
                      }
                      
                      .bt-menu-trigger span {
                        position: absolute;
                        top: 50%;
                        left: 0;
                        display: block;
                        width: 100%;
                        height: 0.2em;
                        margin-top: -0.1em;
                        background-color: #1E1E1E;
                        -webkit-touch-callout: none;
                        -webkit-user-select: none;
                        -khtml-user-select: none;
                        -moz-user-select: none;
                        -ms-user-select: none;
                        user-select: none;
                        -webkit-transition: background-color 0.3s;
                        transition: background-color 0.3s;
                      }
                      
                      
                      .bt-menu-trigger span:after,
                      .bt-menu-trigger span:before {
                        position: absolute;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: #1E1E1E;
                        content: '';
                        -webkit-transition: -webkit-transform 0.3s;
                        transition: transform 0.3s;
                      }
                      
                      .bt-menu-trigger span:before {
                        -webkit-transform: translateY(-0.5em);
                        transform: translateY(-0.5em);
                      }
                      
                      .bt-menu-trigger span:after {
                        -webkit-transform: translateY(0.5em);
                        transform: translateY(0.5em);
                      }
                      
                      .bt-menu-trigger.bt-menu-open span:after {
                        -webkit-transform: translateY(-0.36em) translateX(0.65em) rotate(45deg) scaleX(0.6);
                        transform: translateY(-0.35em) translateX(0.65em) rotate(45deg) scaleX(0.6);
                      }
                      
                      .bt-menu-trigger.bt-menu-open span:before {
                        -webkit-transform: translateY(0.36em) translateX(0.65em) rotate(-45deg) scaleX(0.6);
                        transform: translateY(0.35em) translateX(0.65em) rotate(-45deg) scaleX(0.6);
                      }
              </style>
            </div>
            <script type="text/javascript">
                var button = document.querySelector('.bt-menu-trigger');
                button.addEventListener('click', function (){
                  button.classList.toggle('bt-menu-open');
                });
                $('.bt-menu-trigger').click(function(){
                  //once clicked rotate
                    $(this).delay(300).queue(function(next){
                      $(this).css({'-ms-transform':'rotate(90deg)',
                                    '-webkit-transform':'rotate(90deg)',
                                    'transform':'rotate(90deg)',
                                    '-webkit-transition-duration':'1s',
                                    '-moz-transition-duration':'1s',
                                    ' -o-transition-duration':'1s',
                                    'transition-duration':'1s'});
                      next();
                    });
                });
            </script>

gstlouis
vote
2016-03-12 13:09:51