Como hacer pestañas deslizables?
Resuelto/Cerrado
adripoisonheart
Mensajes enviados
28
Fecha de inscripción
lunes, 20 de octubre de 2008
Estatus
Miembro
Última intervención
sábado, 28 de febrero de 2009
-
31 oct 2008 a las 14:16
ana - 27 sep 2010 a las 17:35
ana - 27 sep 2010 a las 17:35
Consulta también:
- Como hacer pestañas deslizables?
- Recuperar pestañas cerradas chrome celular - Guide
- Cuales son las pestañas de word - Guide
- Cinta de opciones de Word: qué es, personalizarla, partes... - Guide
- Como abrir una pestaña de incognito en opera gx - Guide
- Como contestar llamadas sin deslizar - Guide
3 respuestas
hola... me podria ayudar con lo que encontranste no se sime pueda servir pero mi intencion es crear unas pestaañas tabstrip
Gracias
Gracias
adripoisonheart
Mensajes enviados
28
Fecha de inscripción
lunes, 20 de octubre de 2008
Estatus
Miembro
Última intervención
sábado, 28 de febrero de 2009
26
21 nov 2008 a las 18:50
21 nov 2008 a las 18:50
ya descubri como hacerlo.......manden un mensaje si alguien quiere saberlo
4 ene 2009 a las 12:08
weeee perdon q me tarde en responder
andube medio desconectada....pero si todavia lo estas buscando.....
aca va el codigo....espero te sirva....
primero te recomiendo esta pagina............. www.jquery.com esta en ingles pero tiene lo que buscas listo para descargar.... descargas el paquete y despues cuando lo introducis en tu html solo debes configurar los datos a tu gusto.... como colores, velocidad de animación y tamaño.
si lo keres hacer mas simple podes usar este codigo q ya esta listo y es mas cortito :P
dentro de tu HEAD va esto primero:
<script type="text/javascript">
$(document).ready(function(){
$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});
</script>
JUSTO DEBAJO DE ESTE SCRIPT HAY QUE ARMAR ESTE CSS... ES MAS FACIL SI ESTO VA TODO DENTRO DE UN MISMO HTML....
<style type="text/css">
body {
margin: 10px auto;
width:1000px;
font: 15px/120% Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background: #000000;
}
.menu {
margin: 100px 0 0;
padding: 0;
list-style: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.menu li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
left: 180px;
top: 720px;
width: 632px;
height: 113px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.menu a {
padding: 14px 10px;
display: block;
color: #FFFFFF;
width: 100%;
text-decoration: none;
font-weight: bold;
background: url(hover.png) no-repeat center center;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.menu li em {
background: #000000;
width:100px;
height:80px;
position: absolute;
left: 140px;
text-align: center;
padding: 10px;
z-index: 2;
display: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CCCC66;
font-weight: normal;
clear: right;
float: left;
top: 00px;
}
</style>
</head>
SHHHH TE PRESTO MI CODIGO JEJE.............
BIEN AHORA DEPENDIENDO DE QUE DREAMWEAVER USES....ES MAS FACIL CON EL MX DE MACROMEDIA ..PERO CON EL CS4 DE ADOBE... EN TU MARGEN DERECHA HAY UNA COLUMNA AHI DICE CSS STYLES... DESDE AHI PODES VER Y EDITAR CARCANDO TU CODIGO ...TODAS LAS CARACTERISTICAS QUE NECESITAS....
CON EL MACROMEDIA MX UBICANDO TU CURSOR DENTRO DE LA ZONA DEL STYLE ABAJO APARECE UN BOTON Q DICE "editar hoja de estilo..." DESDE AHI PODES EDITAR LAS CARACTERISTICAS DE TU CODIGO.
PRIMERO...TENES QUE TENER EN CUENTA QUE ESTO FUNCIONA COMO SI FUERA UN MENU...LAS ETIKETAS SE DESLIZAN SOBRE CADA LINK, YA SEA PALABRA O IMAGEN... CON menu li MANEJAS TUS LINKS (li) .... CON menu a MANEJAS LA FORMA Y COLOR DE TU PESTAÑA...PODES SI KERES AGREGARLE UNA IMAGEN PARA EL FONDO DE TU PESTAÑA... CON menu li em MANEJAS LA ANIMACION DE TU PESTAÑA, UBICACION, VELOCIDAD, ETC
.............................................
LUEGO ABAJO EN TU BODY.... UBICAS TUS LINKS POR EJ: (ESO SI NO TE GUIES POR LA VISTA DE DISEÑO GUIATE POR TU CODIGO)
<ul class="menu">
<li><a href="" >
<img src="xx.jpg" width="600" height="100" border="0" lowsrc="xx.jpg">lo que quieras decir</a>
<em>...contenido de tu pestaña</em></li>
</ul>
ARMAS UN CODIGO ASI POR CADA LINK Y CADA PESTAÑA Q TENGAS...............
Y ESO ES TODO
suerte!!!
Adriana