How to make a drop-down page
-
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 :)
-
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.aspTransform 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.aspIf 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-toolsI hope this helps & good luck on your Lay Theme journey,
Best Wishes
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.aspWhen 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.aspTransform 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.aspIf 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-toolsI hope this helps & good luck on your Lay Theme journey,
Best Wishes
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.aspWhen 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.aspTransform 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.aspIf 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-toolsI hope this helps & good luck on your Lay Theme journey,
Best Wishes
Richard
I also code custom websites or custom Lay features.
šæ Email me here: šæ
info@laytheme.com
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options ā Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it
