How to place the menu correctly if it is initially invisible?

Question

HTML

On the page, in the header there is a button that opens the menu. The menu itself is a sidebar that has nothing to do with the header ( ). Since the menu is not initially visible when the page is loaded, I believe it should be placed in the footer so that the browser does not waste time loading an invisible element, but does it after it has loaded the main content. I believe this will improve the First Meaningful Paint score . The question is, how will this affect web accessibility and search engine optimization?position: fixed
1. Is it normal that the main menu is at the very bottom of the page? Maybe you can do something so that when the user opens the menu from the keyboard, his focus immediately moves to its first element? And when closing - did not remain at the bottom of the page, but moved back to the header? What about screen readers?
2. Will the fact that links to the main sections of the site be in the footer itself somehow affect the search bot? Does it prioritize links on the page?

Answer 1

Elements with display:none are not rendered.

so that when the user opens the menu with the keyboard, his focus immediately moves to its first element?

Yes, great plan. Also read about tabindex .