There is such an adaptive menu, a hamburger based on: after /: before elements. It seems that mobile browsers support these pseudo-elements http://caniuse.com/#search=%3Aafter , but the upper and lower rods do not transform, as if turning to 45 degrees does not work transform: rotate(45deg); .

Checked in Opera, UC Browser, Android browser - only the middle stick remains when clicked. What's wrong?

Code:

 $(function() { //Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ΅ Π³Π»Π°Π²Π½ΠΎΠ΅ мСню сайта var siteMenu = $('.region-menu'), siteMenuLink = $('<a id="touch-region-menu" href="#"><span></span>МСню</a>'); siteMenuLink.insertBefore(siteMenu); createSiteMenu(); $(window).resize(function() { createSiteMenu(); }); $(siteMenuLink).on('click', clickSiteMenu); function clickSiteMenu(e) { e.preventDefault(); $(this).toggleClass('active'); siteMenu.slideToggle('fast'); } function createSiteMenu() { var w = $(window).width(); if (w > 767 && siteMenu.is(':hidden')) { siteMenu.removeAttr('style'); } } }); 
 .region-menu { display: none; } #touch-region-menu { background: #69c none repeat scroll 0 0; color: white; display: block; height: 43px; line-height: 39px; padding-left: 37px; text-decoration: none; text-transform: uppercase; } #touch-region-menu span, #touch-region-menu span:before, #touch-region-menu span:after { background: white none repeat scroll 0 0; border-radius: 1px; content: ""; cursor: pointer; display: block; height: 3px; position: absolute; width: 18px; } #touch-region-menu span:before { top: -6px; } #touch-region-menu span:after { bottom: -6px; } #touch-region-menu span { left: -22px; position: relative; top: 20px; } #touch-region-menu span, #touch-region-menu span:before, #touch-region-menu span:after { transition: all 100ms ease-in-out; } #touch-region-menu.active span { background-color: transparent; } #touch-region-menu.active span:before, #touch-region-menu.active span:after { top: 0; } #touch-region-menu.active span:before { transform: rotate(45deg); } #touch-region-menu.active span:after { transform: rotate(-45deg); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="region-menu"> <ul> <li>1 катСгория</li> <li>2 катСгория</li> <li>3 катСгория</li> <li>4 катСгория</li> <li>5 катСгория</li> </ul> </div>

    1 answer 1

    Use prefixes and everything will work. Example 1 , Example 2

    Torn example and transferred to codepen

      -moz-transform: rotate(15deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: prop time; -moz-transition: prop time; -ms-transition: prop time; -o-transition: prop time; transition: prop time;

    As an add-on http://caniuse.com/#search=transform

    • one
      Although the link can find the answer to the question, it is better to point out the most important thing here, and give the link as a source. If the page to which the link leads will be changed, the response link may become invalid. - From the queue of checks - torokhkun
    • Yes, it really worked, senks. - Jean-Claude
    • @totorro if I correct the answer, will the minus disappear? - Jarvis
    • @Jarvis you have 2 minuses and one plus. In itself, correcting the answer minus will not remove, but will encourage other users to give you advantages. For example, if everything is ok - I will get a plus on zero - torokhkun
    • @Jarvis instead of links to sites, please provide a small sample code right here. Sites sometime rewrite or even completely closed, and then the answer will lose meaning. - Nick Volynkin ♦