How to make an adaptive template when zooming in a block with categories was hidden, but was displayed by shifting to the left when you click on the button ??

  • You need to dig in the direction of media queries. @media screen - Kostiantyn Okhotnyk

1 answer 1

You can write the effect of shifts yourself, or use animate.css or the jquery method .animate ()

function menu() { $('.menu').toggleClass('visible'); } 
 .menu-hamburger { display: none; } .visible { display: block !important; } @media screen and (max-width: 769px) { .menu { display: none; } .menu-hamburger { display: block; position: absolute; top: 0px; left: 0px; } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menu"> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> <li>menu4</li> <li>menu5</li> </ul> </div> <button class="menu-hamburger" onclick="menu()"> x </button>