jquery - Overlaying divs including div selector -
inside container div have 4 divs wish overlay 1 visible @ time. each of these 4 divs same dimension - lets 200x200px. right of overlayed divs have 4 vertically aligned smaller divs not overlayed lets each 50 px high. these 4 vertically aligned divs act simple menu when clicked associated div of 4 overlaid divs left 1 displayed.
i trying find simplest solution ideally using jquery. have played around stuff knowledge of jquery isnt job.
any hints solution or method explore further appreciated. deployed part of wordpress theme if knows of plugin awesome suspect unlikely.
many thanks.
looking tabs form jquery ui? http://jqueryui.com/tabs/#vertical
working example @ jsfiddle
$(function() { $( "#tabs" ).tabs().addclass( "ui-tabs-vertical ui-helper-clearfix" ); $( "#tabs li" ).removeclass( "ui-corner-top" ).addclass( "ui-corner-left" ); });
css
.ui-tabs-vertical { width: 55em; } .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } .ui-tabs-vertical .ui-tabs-nav li { display:block; } .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
Comments
Post a Comment