Entrar

Como crear un bonito acordeon para la home de tu web

saul123 · · Solicitar retirada
Hola a todos

Aqui les dejo un bonito acordeon espero que les sirva para alguno de sus proyectos.


Primero haremos nuestra lista de imagenes que queramos que se vean, las envolveremos en un content para que podamos centrarlo en la ventana , las imagenes quedaran envueltas en un link para que al hacer click nos lleve a otra parte que queremos .

<div id="content">

<div class="jimgMenu">
	<ul id="gallery">
      <li  class="prin">
            <a href="" title="">
            <img src="imagen/01.jpg"   alt="" />
            </a>
      </li>
    </ul>
  	<ul id="gallery2">
    	<li class="prin">
            <a href="" title="">
                <img src="imagen/02.jpg"   alt="" />
            </a>
    	</li>
    </ul>
     <ul id="gallery3">
      <li class="prin">
            <a href="" title="">
                <img src="imagen/03.jpg"  alt="" />
            </a>
        </li>
         
    </ul>
     <ul id="gallery4">
    <li class="prin">
            <a href="" title="">
                <img src="imagen/04.jpg" alt="" />
            </a>
        </li>
       
    </ul>
    <ul id="gallery5">
      <li id="prin" class="prin">
            <a href="" title="">
                <img class="sin" src="imagen/05.jpg"  alt="" />
            </a>
      </li>
        
    </ul>
</div>

</div >


Despues haremos las hojas de estilo , no olviden agregar su hoja de reset .

body{
	background:#171717;
}
#gallery,#gallery2,#gallery3,#gallery4,#gallery5 { float:left; }
	#gallery { list-style: none; }
	#gallery ul li { }
	#gallery ul li .inv { display: none; }
	#gallery ul img {
	}


.jimgMenu {
	position: relative;
	width: 800px;
	height:auto;
	overflow: hidden;
	margin-top:90px;
	
}
.prin{
	border-left: 2px solid #fff;
	cursor:pointer;
	display:block;
	overflow:hidden;
	width:100px;
	height: 381px;
}
#prin{ border-right:2px solid #fff;
	
	
}

#content{
	margin:0 auto 0 auto;
	width:800px;
	padding-left:300px;
	overflow:;
}

Y por ultimo hacer nuestra hoja de funciones jquery , sin olvidar agregar los plug in 

   $(document).ready(function () {

  // find the elements to be eased and hook the hover event
  $('div.jimgMenu .prin').hover(function() {
    
    // if the element is currently being animated (to a easeOut)...
    if ($(this).is(':animated')) {
      $(this).stop().animate({width: "300px"}, {duration: 450, easing:"easeOutQuad"});
    } else {
      // ease in quickly
      $(this).stop().animate({width: "300px"}, {duration: 400, easing:"easeOutQuad"});
    }
  }, function () {
    // on hovering out, ease the element out
    if ($(this).is(':animated')) {
      $(this).stop().animate({width: "100px"}, {duration: 400, easing:"easeInOutQuad"})
    } else {
      // ease out slowly
      $(this).stop('animated:').animate({width: "100px"}, {duration: 450, easing:"easeInOutQuad"});
    }
  });


});


Como decia antes , tenemos que agregar nuestras hojas de jquery.min-1.3.2 y jquery-easing-1.3.pack y jquery-easing-compatibility.1.2.pack.js . les dejo los links donde pueden descargarselo.


jquery.min-1.3.2.
jquery-easing-1.3.pack.
jquery-easing-compatibility.1.2.pack.js.



Nuestra cabecera tiene que quedar de esta manera .
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
 <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/funciones.js" ></script>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/estylo.css" type="text/css" />
</head>


Ver demo funcionando.

Suerte en sus proyectos.