.horizontalaccordion>ul { /* este es el DIV contenedor que dimensionamos y en este caso lo centramos */ margin: 0; padding: 0; list-style:none; height: 300px; } .horizontalaccordion>ul>li { /* definimos cada item de la lista */ display: block; float: left; height: 300px; list-style: none; margin: 0; overflow: hidden; padding: 0; width: 40px; /* la parte personalizable */ background:#303941; transition: width 0.3s ease-in-out; -moz-transition: width 0.3s ease-in-out; -webkit-transition: width 0.3s ease-in-out; -o-transition: width 0.3s ease-in-out; } .horizontalaccordion>ul>li>h3 { /* el titulo de cada pestaña */ display: block; float: left; margin: 0; padding: 10px; height: 19px; width: 280px; /* la parte personalizable */ border-left: 1px solid #303941; font-family: Arial, Helvetica, sans-serif; text-decoration: none; text-transform: uppercase; color: #000; background:#CCC; white-space: nowrap; /* los efectos para los diferentes navegadores */ -moz-transform: rotate(90.0deg) translate(-40px,0px); -moz-transform-origin: 0 100%; -o-transform: rotate(90.0deg) translate(-40px,0px); -o-transform-origin: 0 100%; -webkit-transform: rotate(90.0deg) translate(-40px,0px); -webkit-transform-origin: 0 100%; transform: rotate(90.0deg) translate(-40px,0px); transform-origin: 0 100%; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0) progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)" "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; background: -moz-linear-gradient( top, #999999, #cccccc); background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc)); } .horizontalaccordion>ul>li>div { /* el contenido oculto */ display: none; float: left; height: 280px; margin: 0; overflow: auto; padding: 10px; position: relative; width: 320px; left: 40px; top: -40px; *left:0px; *top:0px; /* esto es necesario para evitar problemas en IE7 */ } .horizontalaccordion>ul>li:hover { /* que se despliega al poner el cursor del ratón encima */ overflow: hidden; width: 380px; } .horizontalaccordion:hover>ul>li:hover>div { display: block; } .horizontalaccordion:hover>ul>li:hover>h3 { /* efecto hover sobre los títulos */ background: #000; color: #FFF; background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */ background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0) progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)" "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; } .horizontalaccordion>ul>li>h3:hover { cursor: pointer; } Título 1 ... el contenido ... Título 2 ... el contenido ... Título 3 ... el contenido ...
