Window menu drop

[calvez_calvez]

Hello !

Could you explain me how the window "INFORMATION" appears like this ?
http://www.virgilijubero.com/

Is it only a CSS customization ?

Thank you !

[Richard]

Dear @calvez_calvez

I hope to give a quick answer that help's you on what i believe is occurring:

The 'Information" text in the top right corner is actually a link to a project 'page' called information that sits in Lay Theme's primary menu:

However this project page cannot be accessed because a class called 'disabled' has been applied to the <a> link making it not clickable - 'pointer-events:none;'

Now hiding above the viewport and away from the user is a box called 'Contacto' containing the <p> paragraph information that displays the content:

Here we can see that this box sits '-1000px' out of sight.

The trick happens that when 'information' is clicked a class is added/ toggled on called "active "

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

This new class "active" come's with some new CSS that changes the 'top:-1000px; to 'top: 37px;

Now "contacto" is forced into view and along with a transition for a smooth effect:
https://www.w3schools.com/css/css3_transitions.asp

This method requires knowledge of basic CSS and JS Added to "Lay Options - Custom CSS & JS"

https://laytheme.com/documentation.html#custom-javascript

Remember with JS that you must load it within a 'newpage event' to work with Lay Theme - also that the common '$' needs to be changed to 'jQuery'

https://laytheme.com/documentation.html#custom-css-styling

I hope this helps you @calvez_calvez and good luck! its a really cool customisation.

have a wonderful day and thank you for using Lay Theme :)

Sincerely
Richard