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 -
Hello! It looks like you're interested in this conversation, but you don't have an account yet.
Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.
With your input, this post could be even better 💗
Register Login