How to make a drop-down page

[fredyatb]

How could I make a drop-down page like the one in the example:
www.trestiposgraficos.com (work or about on the web page) In horizontal position.

Thanks :)

[Richard]

Dear @fredyatb

This is customisation ( a really nice one ) that isn't offered in the regular Lay Theme options provided.

This goes beyond my level of Forum support, you may wish to seek the aid of a developer if you are unable to create this yourself.

However i would be happy to show you the basics of what is happening here.

Let's take a look at "About" as an Example.

About is a button that when clicked 'toggle's' a class off and on
https://www.w3schools.com/jquery/eff_toggle.asp
https://www.w3schools.com/cssref/sel_class.asp

When clicked - the class "active-about" is added to the page

https://www.w3schools.com/jquery/html_addclass.asp

The About area has always existed, but it has been hiding off to the left side of the viewport.

• It has a width of 50% and has been sitting ( -50%) off to the left

When the class "active-about" is added to the page, the browser receives some new CSS information that makes it visible to the viewer,
https://www.w3schools.com/cssref/css3_pr_transform.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate#:~:text=The translate() CSS function,element moves in each direction.

Transform property not added:

Clicked: Transform property added:

The smooth gliding that occurs is due to the transition css property:
https://www.w3schools.com/css/css3_transitions.asp

If there were no transition it would just blink on and off the screen without the "transition".... :)

For additional information regarding CSS:
https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools

I hope this helps & good luck on your Lay Theme journey,

Best Wishes
Richard

[fredyatb]

This post is deleted!

[fredyatb]

This post is deleted!

[fredyatb]

@Richard-Keith big thanks!

[Richard]

Dear @fredyatb

Unsure of what i did, but you are most welcome! :)

Best Wishes
Richard