There is a code https://jsfiddle.net/1gu1v13h/ HTML

 <div id="wrapper"><!-- <h3>CSS3 Animated Menu Toggle Icon</h3> --> <a id="nav-toggle" href="#"><span></span></a> </div>

by clicking on the menu icon, the icon itself changes slightly and I want to make the menu go right-to-left (horizontally). How to implement it?

    2 answers 2

    Css option

     *{ padding: 0; margin: 0; box-sizing: border-box; } body { background-color: black; } #nav-toggle{ display: none; } #nav-toggle + label{ position: relative; top: 15px; left: 15px; display: inline-block; width:35px; height:25px; } #nav-toggle + label span { position: absolute; left: 0; top: 10px; } #nav-toggle + label span, #nav-toggle + label span:before, #nav-toggle + label span:after { position: absolute; display: block; content: ''; height: 5px; width: 35px; background: white; border-radius: 1px; cursor: pointer; transition: all 500ms ease-in-out; } #nav-toggle + label span:before {top: -10px;} #nav-toggle + label span:after {bottom: -10px;} #nav-toggle + label ~ .b-menu{ position: absolute; top: 15px; right: 0; width: 0; overflow: hidden; background: #ccc; list-style: none; -webkit-transition: 0.3s; transition: 0.3s; } #nav-toggle:checked + label ~ .b-menu{ width: 200px; /*padding: 15px;*/ } #nav-toggle:checked + label span {background-color: transparent;} #nav-toggle:checked + label span:before {transform: rotate(45deg);} #nav-toggle:checked + label span:after {transform: rotate(-45deg);} #nav-toggle:checked + label span:before, #nav-toggle:checked + label span:after {top: 0;} 
     <div id="wrapper"> <input type="checkbox" id="nav-toggle" /> <label for="nav-toggle"><span></span></label> <ul class="b-menu"> <li><a href='#'>menu 1</a></li> <li><a href='#'>menu 2</a></li> </ul> </div>

      This is just an example, so you can make it more beautiful.

       $(document).ready(function() { $('#nav-toggle').click(function() { $(this).toggleClass('active'); $('#menu-right').toggleClass('open'); }); }); 
       body { background-color: black; } #nav-toggle { position: relative; display: inline-block; width: 35px; height: 25px; } #nav-toggle span { position: absolute; left: 0; top: 10px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { position: absolute; display: block; content: ''; height: 5px; width: 35px; background: white; border-radius: 1px; cursor: pointer; } #nav-toggle span:before { top: -10px; } #nav-toggle span:after { bottom: -10px; } /* Добавим анимацию всех свойств для блоков нашей иконки */ #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 500ms ease-in-out; } /* Центральный блок делаем прозрачным */ #nav-toggle.active span { background-color: transparent; } /* Смещаем псевдо-элементы в центр иконки (на место основного блока) */ #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } /* Наклоняем псевдо-элементы под углом 45 градусов, но в разные стороны */ #nav-toggle.active span:before { transform: rotate(45deg); } #nav-toggle.active span:after { transform: rotate(-45deg); } .menu-right { background: #47a3da; position: fixed; right: -250px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .menu-right.open { right: 0; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <a id="nav-toggle" href="#"><span></span></a> <nav id='menu-right' class='menu-right'> <ul> <li> <a href='#'>Hello</a> </li> <li> <a href='#'>World</a> </li> </ul> </nav> </div>