Sliding Panels - J Query

Occasionally, you might need to display a variety of choices horizontally, and do so with a bit of panache, but might have more choices than the width of a layout will allow. Or, perhaps the approach simply dictates that there be some fancy user interaction .Either way, the sliding panels approach (sometimes called a horizontal accordion)is one possible way to present such information.


Figure (Horizontal panel, still closed) shows a closed panel,while


Figure(Horizontal panel, opened) shows a panel that has slid out to become visible.


In this recipe, we will revisit some of the concepts applied in the accordion demo, but instead of expanding and collapsing content panels vertically, we will be animating them horizontally. We will also use a CSS positioning trick to work around the slight miscalculation of simultaneously animating panels. Rather than worry about synchronization between each panel, animating with pixel-perfect precision at exact fractions of a second, we simply take the last <li>in the <ul class="panels">and position it absolutely to the top right of the <ul>. That way, when the sum width of all the panels occasionally adds up to greater than 100 percent of the <ul>as they animate, the last<li>never breaks to the next line.

Panels—HTML code

Panels—jQuery code

The recipe begins by defining a variable for speed. In this case, it is set to 200 milli seconds. We then add class="last" to each ending <li>. We then attach a hover event listener (in reality, this maps to both a mouse over and mouse out, but let’s not get technical). When an <li>is hovered over with the mouse, its width is animated to40% and font size to 150px, while the other <li>are each animated to 15% wide with a font size of 50px. Likewise, when the mouse exits the <li>;, the widths of all <li>elements are set to 20%, and their font sizes are set to 100px.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

J Query Topics