Fantástico Menu por Passos! (aka Wizard menu)

Sabe o que é um menu por passos? Não? Então veja o demo que lhe apresento!

Criar um menu deste género tornou-se agora algo de trivial utilizando JQuery.  Existem diversas implementações desta técnica, no entanto a melhor de todas foi "criada" pelo Jerod. Digo "criada" uma vez que ele "simplesmente" melhorou uma implementação já criada anteriormente em JQuery.

Neste artigo o que lhe vou ensinar é a utilizar e a compreender o demo que lhe disponibilizo para download.

O menu que lhe apresento possui 5 passos, no entanto como pode fazer para que diminua/aumente o número de passos?

HTML

html
 ul id="mainNav" class="fiveStep">
      <li><a title=""><em>1: O inicio</em><span>Porreiro</span></a></li>
      <li><a title=""><em>2: Em andamento</em><span>ai vamos nos</span></a></li>
      <li><a title=""><em>3: YEAHH</em><span>Wow, espectacular este script!</span></a></li>
      <li><a title=""><em>4: Quase no fim!</em><span>Em que poderei utilizar isto?</span></a></li>
      <li class="mainNavNoBg"><a title=""><em>Step 5: The END</em> <span>Originalidade</span></a></li>
</ul> 
 

A unica coisa a modificar acima é aumentar/reduzir os elementos que se encontram entre <li></li> mantendo sempre o <li class="mainNavNoBg"></li>, uma vez que esta class representa o final do menu.

html
<span class="wizardcontent" id="step_1">conteudo HTML<br/>Este script foi feito utilizando JQuery</span>
<span class="wizardcontent" id="step_2">Mais html</span>
<span class="wizardcontent" id="step_3">Repare na forma como este conteudo aparece</span>
<span class="wizardcontent" id="step_4">Reparou?</span>
<span class="wizardcontent" id="step_5">http://www.weblouca.com</span>

No código acima necessita apenas de aumentar/reduzir o número de passos para o mesmo número de <li> do código anterior. 

JavaScript

Depois o mais complicado, ou não.

Editar o ficheiro wizard.js

Procure pelas seguintes linhas:

html
if (iterator == 5){ step.addClass('mainNavNoBg');
 } 
 

Mude o 5 para o numero de passos que você possui, no seu menu.

php
case 5:

Estes são os passos essencias para editar o script que lhe apresentei.

_{Nota: O load do JQuery é realizado no exemplo que lhe forneço para download, através das apis do Google com o seguinte código <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'></script>}

TrackBack URI for this entry

Ricardo Setembro 21, 2008	Finalmente! Andava à cata de algo deste genero à imenso tempo!!! thanks ;)