Accordion Horizontal – Tutorial jQuery | Blog

Accordion Horizontal – Tutorial jQuery

Criado por Mateus Souza em 24 de novembro de 2008 às 20:34

Bom eu não sei se escreve assim mesmo (Accordion) em português mais, vai assim mesmo….
Vamos criar um efeito sanfona, que revela uma legenda para cada miniatura quando colocado o mouse sobre uma delas:

Demonstração / Download dos Arquivos

Passo 1 – Chamar o jQuery

Pela milézima vez vamos fazer esse passo novamente, lembrando que é um processo “padrão” para qualquer efeito com jQuery:

<script src="jquery-1.2.6.min.js" type="text/javascript"></script>

Passo 2 – HTML

Eu dei a primeira tag âncora um id, para que pudéssemos definir uma largura inicial e exibi-la ampliada quando a página é carregada.

<div id="cont">
<ul>
  <li>
    <a id="a1">
      <img src="images/1.jpg" />
      <p>
        <strong>Tutoriais</strong><br/>
      <span class="texto">Aprenda, conheça mais, confira meus tutoriais. </span></p>
    </a>
  </li>
  <li>
    <a>
    <img src="images/2.jpg" />
       <p>
         <strong>Portfolio</strong><br/>
       <span class="texto">Veja alguns trabalhos feitos por mim ...</span></p>
    </a>
  </li>
  <li>
    <a>
    <img src="images/3.jpg" />
      <p>
        <strong>Contato</strong><br/>
      <span class="texto">Gostou? então entre em contato comigo... </span></p>
    </a>
  </li>
</ul>
</div>

Passo 3 – CSS

A principal coisa a se notar é a altura fixa a ser estabelecidas sobre a tag âncora.
Usamos “overflow: hidden” para evitar que o conteudo da tag de caia para baixo da miniatura:

 ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li{
	float: left;
	padding: 10px;
	display: block;
	margin-right: 10px;
	background: transparent url(images/bac.jpg) repeat-x;;
}

ul li a{
  display: block;
  overflow: hidden;
  height: 75px;
  width: 75px;
}

#a1{
  width: 210px;
}

ul li img{
  position: absolute;
  border: 3px solid #800622;
}

ul li p{
  margin: 0;
  padding: 0;
  width: 120px;
  display: block;
  margin-left: 85px;
}
body {
	background-color: #222;
	color:#FFF;
}
#cont{
	height:120px;
	width: 450px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.texto {
	font-size: 13px;
}

Passo 4 – jQuery

E aqui está o jQuery script que faz tudo acontecer. A primeira coisa que faz é definir algumas variáveis:

lastBlock: representa o bloco que já está expandido;
maxWidth: é a largura que queremos que o nosso bloco aparece quando expandido;
minWidth: é a largura dos blocos que não estão expandidos.em nosso exemplo será 75px…

Agora definimos o evento de hover:

 <script type="text/javascript" >
$(document).ready(function(){
    lastBlock = $("#a1");
    maxWidth = 210;
    minWidth = 75;

    $("ul li a").hover(
      function(){
        $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
	$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
	lastBlock = this;
      }
    );
});
</script>

Bom, é só isso. Até a próxima.

Postado em Javascript, Tutoriais, jQuery