This is the second blog in our tutorial series on 10 of the best solutions from Logi’s Expert-on-Demand (EOD) team. Recently, we discussed Animate.CSS and HeroSlider, which each allow you to add animated effects to your projects. Now, I want to introduce you to another animation solution that is a refreshing replacement for the pop-up box: the Slide-in Panel.
We’ve all grow tired of the pop-ups assaulting us smack dab in the middle of the screen, right? Enter the slide-in panel, which gently glides in from the side and disappears immediately when the user touches anywhere else on the screen.
How to Use the Slide-In Panel
Utilizing CSS transitions and jQuery, the slide-in panel lends itself especially well to mobile devices—which are where traditional pop-up boxes typically work poorly and are most disruptive to the user experience. The slide-in panel is also useful because:
- It’s unobtrusive. Users will appreciate its sleekness and the absence of distracting pop-ups.
- It works well on any device. This is a simple way to turn up the functionality of your website, wherever it is displayed.
For our example, we’re using a visualization showing four bars (Figure 1). Just like a pop-up window, we can modify the information displayed by clicking on any bar and watching our panel “slide in” from the side with more detailed information (Figure 2).
The Slide-In Panel can hold any HTML or Logi element and can open to the right or left. Follow these steps to implement it in your website:
- Include the Slide-In Panel Header Scripts and CSS (bundled in the SlideInPanelHeader Scripts Shared Element).
- Include the Slide-In Panel Footer Script.
- Include the Division (divLeftPanel), which contains the content and header for the Slide-In Panel. If multiple panels are required, give each a unique ID value and modify the Footer slidepanel script appropriately.
- Include the divInfoButton, which is used to trigger the panel.
Stay tuned to the Logi Blog for more Expert-On-Demand solutions in the following weeks.