The answer to your question:

Faster will be as you described in the first version.

... but how not to shoot yourself and your knees?

At a minimum, you can save your feet by abandoning JavaScript. And AJAX. Seriously ... I also understand JavaScript, it can be used to invent a bicycle in particularly desperate cases, but where is AJAX going? AJAX should generally be avoided as part of site design and design with rare exceptions (such as an endless tape of content as a feed on VKontakte).

Create two menus and place them somewhere in your markup:

 <nav class="menu-mobile"></nav> <nav class="menu-desktop"></nav> 

And add something like this CSS:

 .menu-mobile, .menu-desktop { display: none; } /* Для планшетов и меньше */ @media (max-width: 991px) { .menu-mobile { display: block; } } /* Для "квадратных" десктопных мониторов и выше */ @media (min-width: 992px) { .menu-desktop { display: block; } } 

This is the most resource-intensive and fastest way you can think of. No javascript and no AJAX. And it is not a shame to show others.

Introduction

The most adequate for creating a responsive-меню is writing a single menu with transitions through media-запросы and changing styles, and so on. If you have different HTML , then what's the problem to manage it through javascript ?

ps. Using two menus, hiding one of them, is not the optimal solution.

Continued ...

If you want to use ajax , then it is best to load all the information at the very beginning, and then manage it, and not after the transition.

Example

I would like to see your code for more detailed answer.

 function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } 

 body {margin:0;} ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li {float: left;} ul.topnav li a { display: inline-block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; } ul.topnav li a:hover {background-color: #555;} ul.topnav li.icon {display: none;} @media screen and (max-width:680px) { ul.topnav li:not(:first-child) {display: none;} ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:680px) { ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } 

 <ul class="topnav" id="myTopnav"> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> <li class="icon"> <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a> </li> </ul> 

Addition

If interested, you can see various implementations of the responsive-меню here .