Pop-click (lifery.com javascript part 1)

As a part of the redesign of Liferay's website we have developed a number of new scripts in order to effeciently acheive new effects and improve the UX. I thought I would share some of the code we have created and found useful for a number of different use cases. This blog posts and the two to follow will show parts of our main javascript code which is currently being used in our theme. I will breifly explain how to use the code so hopefully all of you can reuse and tweak it as you need. All three of these scripts will be used on Liferay's hompage when it is revamped in the not so distant future.

Happy Coding!

Pop Click

This first script is used across Liferay's entire site in the top navigation. It is called pop click and all you need to do in order to us it is add the class "pop-click" to whatever element you desire. When an element with the class "pop-click" is clicked on the class "pop-click-active" is added to that element. The class will then be removed on any click that is outside of an element containing the class "pop-click-content".

Pop Click's easiest implementation is for drop down menus. You can add the class "pop-click" to the lis and the class "pop-click-content" to the menu ul or div inside of that li. Simply hide the submenu with css and then display it again when the class "pop-click-active" is present. It could also be used for anything that you want to do with css that occurs on click and is removed when the user clicks somewhere else on the screen.

A simple example would be:

You can also see a working example here

If you want to see some places where we are using this you can look at the slide out tab on the right of the France Symposium page or by clicking on "lanuage" button in the top right navitaion at Liferay.com