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

21 Setembro 2008 Escrito por Gonçalo Martins

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

ul id="mainNav" class="fiveStep">
 <li><a title="">1: O inicioPorreiro</a></li>
 <li><a title="">2: Em andamentoai vamos nos</a></li>
 <li><a title="">3: YEAHHWow, espectacular este script!</a></li>
 <li><a title="">4: Quase no fim!Em que poderei utilizar isto?</a></li>
 <li class="mainNavNoBg"><a title="">Step 5: The END Originalidade</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.

conteudo HTML Este script foi feito utilizando JQuery
Mais html
Repare na forma como este conteudo aparece
Reparou?
http://www.weblouca.com

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:

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

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

case 5:

Mais uma vez mude o 5 para o numero de passos que colocou no seu menu.

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>}



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


Fabricio Dezembro 21, 2010	Boa noite, Estamos utilizando seu script, porém, no momento em que submetemos a página, os valores do FORM ficam em branco. Pode me ajudar? Muito obrigado, Fabricio

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

HTML

JavaScript

Artigos Relacionados

Nuvem de Tags