The best option for creating a mobile menu on a website?

Question

JavaScript

Hello everyone, on the old site there is a wildly slow mobile menu, I want to change it ( in extreme cases, connect the library and style it to your needs ).
Please tell me, in 2019 - what is the best implementation of the menu , with what libraries to implement it? Or is it better to write in pure css+js and not use them at all? If you can use third-party libraries, which ones are better? I tried to connect Pushy - I didn’t like how the styling was implemented a little.

Answer 1

1. The menu should be one - tricks with two menus for different devices - a sign of krivoruchka.
2. Change the display through and only and exclusively through CSS + media.
Although, judging by the text of the question, knowledge is three percent, then search the repository among 624'498 mobile menu plugins, it will not be worse)))

Answer 2

<noindex>
    <div class="mobile-menu">
        <div class="mobile-head"></div> <!-- бургер, логотип, etc -->
        <div class="mobile-body"></div> <!-- меню, поиск, телефоны, etc -->
    </div>
</noindex>

Bottom line : after a certain browser width, for example, 1024, we show our menu, by clicking on the "burger" - we change the class of the body, for example, mobile-open, through which we change the background of the burger to a cross, and also show the mobile menu itself:

.mobile-body {
    width: 100%;
    height: 100vh;
    padding-bottom: 70px; //"волшебное число", даем отступ снизу, чтобы можно было прокручивать полностью менюшку
    background: #fff;
    position: fixed;
    top: 50px; //50px - высота mobile-head, обычно хватает для телефонов
    left: -100%;
    transition: left 0.3s;
    overflow: auto;
    display: block;
}

body.menu-open .mobile-body {
    left: 0;
}

Answer 3

It is better, of course, to use pure css without js. You can also connect a php library called Mobile-Detect - it determines the type of device from which the visitor enters. By getting the device type, you can display a different menu for mobile devices and desktops.

Answer 4

mmenu Placed
on top of the existing one. Settings are enough for the eyes

Answer 5

I would prefer handmade. I like the implementation in bootstrap. but, if you don’t want to shove the entire bootstrap into the project because of one menu, you can see the implementation in the instances on the site and write your own (or just take the necessary piece of code from there, just mark up the styles for permissions, and screw the button with the open event -hide the menu). I also like the menu in Materializecss. But, again, a framework with a bunch of whistles. But there is already a mobile menu with a touch implementation in material design

Answer 6

How can the mobile menu be faster, it's a small piece of code. What did you do there?)