Showing menu1 instead of menu0 when it's loading

[joon1]

I have a page at http://dot.kr/Q/layout/menus/01/

When the page is loading, menu0 in yellow box is shown.
Whenever the button menu1, menu2, and menu3 is clicked, menu1, menu2, and menu3 in white box is shown and hide.

So far so good.

I like to remove menu0 completely and make it like the below

When it is loading, menu1 in white box instead of menu0 in yellow box is shown.
Whenever the button menu1, menu2, and menu3 is clicked, menu1, menu2, and menu3 in white box is shown and hide.

[Martyr2]

Well first you can remove menu0 from your HTML. Then for menu2 and menu3 add the class hide alongside the menu class. This will start by letting menu1 show and menu2/3 will start hidden.

Then in your Javascript remove the loop where you are setting the menus to hide at the start of the script (starting around line 8 in your JS file).

That will get you 99% of the way there, then just a little bit of visual CSS tweaks might be needed for margins and stuff.

[joon1]

Applying your code, I made a page at http://dot.kr/Q/layout/menus/03/
It works fine. Thank you very much, Martyr2

I like to make it a little more refined.
It will be like the below.

(1) When it is loading, the button “menu1” is already clicked.
(2) It means that the contents “menu1” will be gone if you click the button “menu1” just after the page is loaded because it was already clicked.
(3) The screenshot at http://dot.kr/Q/layout/menus/211023_menus.jpg is the look of the page when it is loading.(the red border color around the button “menu1” means it is already clicked.

[PaulOB]

@joon1

(1) When it is loading, the button “menu1” is already clicked.

Just add the active class to menu1 by default.

e.g.

<div data-destination="menu1" class="button active"