Mostrar varias capas al hacer click en una imagen
¿Cómo puedo mostrar varias capas al hacer
click en una imagen?, es decir... Tengo un imagen en forma de botón
llada "coches.jpg", quiero que al hacer click en la imagen me muestre
debajo de ella 3 imágenes más (o en la posición que yo le diga) en forma de botón que tengo creados y se
llaman "alfa.jpg","renault.jpg" y "seat.jpg" (digamos que son submenus del menú)
Estos botones/imágenes tendrán un link que redirecionan a otras páginas.
¿Cómo lo puedo hacer?
Se que se hace con div, pero el problema es que no se como mostrar varias capas a la vez...
1 Respuesta
Bueno eso lo debes realizar con CSS y jQuery para poder ocultar y mostrar el contenido oculto, te dejo un ejemplo en el cual aplico lo que te comento, mucha suerte y si tienes cualquier duda comunicate.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ayuda TodoExpertos.com - @JuanGarciaR</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#mostrar').click(function(){
$('#capa').toggle('slow').css('display','block');
});
});
</script>
<style type="text/css">
#capa{
display:none;
}
ul,li{
list-style:none;
}
</style>
</head>
<body>
<div align="left">
<a href="#" id="mostrar">Desplegar Menú</a>
</div>
<div align="left" id="capa">
<ul>
<li>
<a href="#">SubMenú 1</a>
</li>
<li>
<a href="#">SubMenú 2</a>
</li>
<li>
<a href="#">SubMenú 3</a>
</li>
</ul>
</div>
</body>
</html>
