Showing menu1 instead of menu0 when it's loading

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

So far so good.

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

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.

2 Likes

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.

Just add the active class to menu1 by default.

e.g.

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