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.
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.
J Query Related Interview Questions
|HTML 4 Interview Questions||HTML Interview Questions|
|HTML 5 Interview Questions||Zend Interview Questions|
|JqueryUI Interview Questions||Dynamic HTML Interview Questions|
|XQuery Interview Questions||jQuery Mobile Interview Questions|
J Query Related Practice Tests
|HTML 4 Practice Tests||HTML Practice Tests|
|HTML 5 Practice Tests||Zend Practice Tests|
|PHP and Jquery Practice Tests||J Query Practice Tests|
|CodeIgniter Practice Tests||Dynamic HTML Practice Tests|
J Query Tutorial
Selecting Elements With Jquery
Beyond The Basics
Faster, Simpler, More Fun
Html Form Enhancements From Scratch
Html Form Enhancements With Plugins
Interface Components From Scratch
User Interfaces With Jquery Ui
Jquery Ui Theming
Jquery, Ajax, Data Formats: Html, Xml, Json, Jsonp
Using Jquery In Large Projects
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.