Menú y Galería de Imágenes Tipo Slide Con CSS y HTML

Men y galera de imgenes tipo slide
con CSS y HTML

Actualizado el 28/09/2010 < > 9 Cometarios
Resumen: Como conseguir la simulacin de un "efecto slide" en

mens y galeras de imgenes, solo con CSS y HTML.
En otros artculos hemos visto como se puede simular algunos efectos dinmicos empleando
solo CSS y HTML. En este artculo les proponemos simular un slide de imgenes para
un men vertical u horizontal o para una galera de imgenes. A continuacin desarrollaremos
el ejemplo con los cdigos correspondientes explicados, de forma que se pueda comprender
el funcionamiento y aplicarlo en la forma que se crea ms conveniente.
Este efecto es ms sencillo que los casos mostrados anteriormente, y nos muestra que para
conseguir algunos efectos interesantes no es necesario utilizar cdigos complejos,
emplearscripts en otros lenguajes o utilizar animaciones. Basta con conocer los principios
bsicos de lamaquetacin y el potencial de las hojas de estilo en cascada y emplear un poco
de imaginacin.
Mientras preparamos los archivos para que puedan descargarlos y mostrar el ejemplo
terminado para que lo puedan ver en funcionamiento, pueden copiar los cdigos que se
encuentran en el artculo.
Principio de funcionamiento
El principio en el cual est basado este ejemplo, es mucho ms simple que en los casos
delmen desplegable y la galera de imgenes que hemos descrito en otros artculos, y se
basa en el comportamiento de las capas flotantes y la utilizacin de la pseudoclase :hover.
La pseudoclase :hover se utiliza para modificar los parmetros de un elemento cuando
elpuntero pasa sobre l. Normalmente se le utiliza para que se modifique un enlace y cambie
de color o cambie el subrayado cuando el puntero se posa sobre l. Pero tambin se pueden
modificar otras propiedades, como las dimensiones (width y height, ancho y altura) de una
imagen o una capa.
Ejemplo
Puedes ver el ejemplo en funcionamiento aqu: slide con CSS y HTML, y tambin
puedesdescargarte los archivos del ejemplo.
Los cdigos HTML y CSS

En primer lugar les dejaremos el cdigo HTML:
<html>
<head>
<title>Ejemplo</title>
<link rel="stylesheet" href="estilo.css" type="text/css" />
</head>
<body>
<div id="izquierda">
<ul id="menu">
<li><a href="#"><img src="img/1.jpg" alt="#" title="#" /></a></li>
</ul>
</div>
<div class="derecha">
<ul id="menu2">
</ul>
</div>
<div class="derecha">
<ul id="galeria">
<li><img src="img/31.jpg" alt="#" title="#" /></li>
</ul>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/*
CAPAS CONTENEDORAS
#izquierda
*/
width: 170px;
float: left;
}
.derecha {
width: 750px;
float: left;
}
/*
ELEMENTOS DEL MENU LATERAL
#menu {
padding:0;
margin:0 auto;
list-style-type:none;
width:160px;
height:312px;
}
#menu li a {
height:30px;
width:160px;
*/
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
float:left;
border-bottom:2px solid #fff;
overflow: hidden;
}
#menu li a img {
border:0;
}
#menu li a:hover {
height:120px;
}
/*
ELEMENTOS DEL MENU SUPERIOR */
#menu2 {
padding:0;
margin:0 auto;
height:120px;
width:354px;
}
#menu2 li a {
width:30px;
height:120px;
float:left;
border-right:2px solid #fff;
overflow: hidden;
}
#menu2 li a img {
border:0;
}
#menu2 li a:hover {
background:#eee;
width:160px;
}
/*
ELEMENTOS DE LA GALERIA DE IMAGENES */
#galeria {
padding:0;
margin:40px auto 0 auto;
height:300px;
width:774px;
border:1px solid #888;
}
#galeria li {
width:60px;
height:300px;
float:left;
border-left:2px solid #000;
}
#galeria li img {
height:300px;
width:60px;
border:0;
}
#galeria li:hover {
background:#eee;
width:400px;
}
#galeria li:hover img {
width:400px;
}
Explicacin
En primer lugar diremos que el ejemplo se encuentra dividido en tres capas flotantes, una a la
izquierda, en forma de columna lateral, donde se ubica el ejemplo de men vertical. A la
derecha, dos capas contienen el men horizontal y el ejemplo de una galera de imgenes,
una arriba y la otra abajo. Las capas utilizadas utilizan un identificador (#izquierda) y una clase
(.derecha) y son flotantes a la izquierda.
La capa contenedora
En los mens y la galera se emplea el mismo cdigo con leves modificaciones. En primer
lugar, debemos limitar el tamao de la capa que contiene el men, que tiene el
identificador#menu en el archivo CSS, lo que debe ser bien calculado ya que un error en esto
puede originar fallas en el funcionamiento. El ancho de esta capa debe ser el ancho de las
imgenes que se utilizarn, que en este caso es de 160 pixeles.
El clculo debe hacerse en la altura de la capa contenedora. Colocaremos siete imgenes,
que en su tamao plegado tendrn 30 pixeles mas 2 pixeles del borde blanco, es decir, un
total de 32 pixeles, y en su tamao desplegado es de 120. Como el tamao de la capa debe
ser igual al de seis imgenes plegadas y una desplegada, el clculo que se debe hacer
es (6*32) + 120, lo que da un total de 312 pixeles.
Otras propiedades utilizadas son el margen, que en este caso es 0 auto, para que se centre
en la capa contenedora; en esta capa tambin se determina que las listas no tendrn estilo de
lista, para que no aparezcan los marcadores de tems.
Los tems
En el caso de los mens, cada uno de los tems de la lista contiene un enlace, por lo que para
darles el formato a todos, utilizaremos #menu li a (formato del tem que contiene un enlace
dentro de la capa #menu).
Las propiedades que determinaremos son las de las imgenes contradas, por lo que la altura
ser de 30 pixeles. Para que las capas se superpongan y no queden desplegadas (vlido solo
para los mens, ya que el caso de la galera tiene la diferencia que las imgenes contradas
estn redimensionadas), es necesario que los tems de men sean flotantes, lo que queda
indicado con la propiedad correspondiente.
Para ganar en efecto decorativo, se ha determinado que cada tem de men tenga un borde
blanco de 2 pixeles. Luego, se determina que todo lo que sobresalga de las dimensiones de la
capa quede invisible mediante la propiedad overflow:hidden. De no colocarse, todas las
imgenes quedarn en su tamao original.
Imgenes con enlaces

Las imgenes con enlace tienen por defecto un borde azul de 1 pixel, que debe ser eliminado
para que el mismo no se vea, utilizando la propiedad border: 0 en #menu li a img, es
decir, en las imgenes con enlace en un tem de men dentro de la capa #menu.
Las imgenes desplegadas

Cuando el puntero pasa o se posa sobre una de las imgenes contradas, se activa
lapseudoclase :hover, que en este caso determina que la altura de la imagen pase de los 30
pixeles a los 120 pixeles, que es la medida real de cada una de las imgenes utilizadas.
El efecto
Cuando una de las imgenes contradas, desplaza hacia abajo a las capas que se encuentran
debajo de ella, excepto la ltima, que solo completa el espacio disponible en la capa #menu,
haciendo que se parezca a un efecto slide rpido.
El men horizontal
El caso del men horizontal es igual que el anterior, con la excepcin que la capa base, en
este caso #menu2, es ms ancha que alta, al igual que las dimensiones de las imgenes
contradas, con lo que el desplazamiento forzosamente se realiza hacia la derecha. El clculo
de las dimensiones de la capa #menu2 debe realizarse con el ancho de las imgenes, en
lugar de la altura como en el caso anterior. Otra diferencia, es que el borde de la capa
contrada est a la izquierda.
La galera de imgenes
La galera de imgenes es igual al ejemplo del men horizontal (puede hacerse tambin con
desplazamiento vertical), con la excepcin de que no contiene enlaces, con lo que el cdigo
cambia ligeramente.

Menú y Galería de Imágenes Tipo Slide Con CSS y HTML

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Menú y Galería de Imágenes Tipo Slide Con CSS y HTML

Загружено:

Авторское право:

Доступные форматы

Men y galera de imgenes tipo slide

con CSS y HTML

Resumen: Como conseguir la simulacin de un "efecto slide" en

Los cdigos HTML y CSS

ELEMENTOS DEL MENU LATERAL

ELEMENTOS DEL MENU SUPERIOR */

ELEMENTOS DE LA GALERIA DE IMAGENES */

Imgenes con enlaces

Las imgenes desplegadas

Вам также может понравиться