Ola pessoal!
Bom, fim de final de semana, daqui a pouco começa o primeiro dia de cão da semana, a Segunda-feira.
Como ultimamente venho trabalhando muito com jQuery, ja criei vários plugins (conheça as melhorias feitas na jQuery UI Dialog) que me ajudam bastante na hora de desenvolver, porém, nunca tive tempo hábil para postar os mesmos para amigos, alunos e até mesmo para a comunidade web. Hoje com um pouco mais de tempo (tempo???) estarei postando mais um dos “plugins”.
Quando quebrei a cabeça, no início do ano, não havia nada em jQuery que fosse realmente simples. Hoje ja pode existir, mas não fui atrás para saber (se alguém souber de algo, avisem 
).
Depois de algumas horas e alguns cafés, saiu o que eu queria. Criei menus encadeados com ul e li e, após aplicação de algumas linhas de javascript, lá estava meu menu com vários níveis de submenus.
Vejam o resultado em: http://www.profissionaisti.com.br/jquery/menu
Baixe os arquivos aqui/Download files here.
Se puderem contribuir com melhorias, mandem seus comentários. Alterem cores, bordas, margens e etc como ficar melhor em seus projetos.
Testado em: IE6, IE7, FF2.x, FF3, GChrome
Grande abraço!
14:48 em 10 de novembro de 2008
Valeu ai Jackson prometeu e cumpriu…
Parabéns pela iniciativa.
Abs.
9:09 em 11 de novembro de 2008
Finalmente saiu hein?!
Parabéns pela iniciativa!!! Já está em meu leitor RSS!
9:32 em 11 de novembro de 2008
Opa meus amigos!!!
Valeu pelos comentários. Obrigado
Abraço
12:26 em 11 de novembro de 2008
Profissionais TI » Menu fácil fácil com jQuery e CSS…
Vejam o resultado em: /jquery/menu – Fiquem a vontade para baixar os códigos através desta página. Se puderem contribuir com melhorias, mandem seus comentários….
20:34 em 13 de novembro de 2008
Puxa, super essa dica, vou bolar algumas coisas com isso já;
abraço.
23:51 em 16 de novembro de 2008
Olá Jackson,
É sempre bom encontrar mais um entusiata e divulgador da biblioteca jQuery.
A linguagem JavaScript vem experimentando ultimamente uma revitalização e podemos dizer que esta renascendo.
Mas, é preciso focar em desenvolvimento não obstrutivo, como prioridade zero.
Na era de padrões web é importante que o desenvolvedor teste seus códigos com JavaScript desabilitado.
JavaScript deve ser um meio de incrementar a experiência do usuário, isto significa que se o usuário tem JavaScript habilitado ele vai “ver” um lindo e cheio de efeitos menu ou seja lá o conteúdo que for, porém ao usuário sem JavaScript não se deve em hipótese alguma esconder conteúdos ou negar acesso.
Experimente desabilitar JavaScript e tente acessar os links do seu menu.
navegue com o teclado e veja se consegue abrir os submenus, mesmo com JavaScript habilitado.
Com algum aperfeiçoamento simples você pode tornar seu menu acessível e não obstrutivo.
Sucesso.
8:30 em 17 de novembro de 2008
Maujor??? No meu blog…não creio!!!…hehehe.
Caramba, sou seu fã. Parabéns por tudo que vc faz pela comunidade web.
Agradeço pelo comentário e podes ter certeza absoluta que será a prioridade número 1 tornar este menu não obstrutivo. Ja tinha em mente trabalhar mais nele pela quantidade de pessoas que estão visitando e baixando os exemplos. Agora então tenho um incentivo a mais.
Novamente, muito obrigado.
Abraço
14:07 em 26 de novembro de 2008
[...] Conheça também o menu com múltiplos níveis gerado com a jQuery + CSS. [...]
16:39 em 22 de dezembro de 2008
[...] http://www.profissionaisti.com.br/2008/11/menu-facil-facil-com-jquery-e-css/ [...]
10:49 em 24 de dezembro de 2008
Valeu pela dica, em breve farei um curso intensivo de ASP.NET, postarei alguns artigos da área e compartilho com todos. abraços
13:48 em 26 de dezembro de 2008
Opa Fabrício,
Manda bala cara. Estamos aguardando seus posts, pois .NET é uma linguagem muito explorada no mercado e pelo que sei, pagam bem para programadores que manjam bastante.
Grande abraço!!!
11:39 em 20 de janeiro de 2009
Muito bom, parabéns.
Baixei alguns menus feitos por aí (jquery/css) e nem se quer funcionam, praticamente impossivel de implementar em algum projeto. O seu foi de primeira.
Só faltou um detalhe na minha opinião rs, aquele velho bug do IE6 onde as combos (selects) ficam por cima dos subitens =/
Fica a dica, mas vou ver se alguem aqui da agência consegue fazer algo a respeito e te aviso.
Abraço e obrigado.
11:43 em 20 de janeiro de 2009
Ah outra coisa, não seria legal construir algo não depende de ids ou classes? Sei lá, tentando usar comente itens acho que pra utilizar em sistemas fica muito mais melhor.
Abração
11:44 em 20 de janeiro de 2009
itens – itens
11:45 em 20 de janeiro de 2009
Ola Guilherme,
Agradeço o comentário e fico feliz que tenha conseguido utilizar o script. Sobre o IE6, realmente não me atentei a isso. Até pq quero que o IE6 morra de vez http://www.profissionaisti.com.br/2009/01/vamos-acabar-com-o-ie6-urgente/…hehehe.
Mesmo querendo que ele morra, ele ainda esta presente em muitos máquinas e realmente tenho ou temos que fazer algo. Se conseguir implementar aí, me avisa. Vou tentar aqui tbm.
Grande abraço.
11:50 em 20 de janeiro de 2009
Guilherme,
Eu criei uma funçãozinha via PHP que cria o menu nesta estrutura mesmo e utilizo em todos os clientes. Não vi grandes dificuldades. Se por acaso tiveres alguma, me da um toque que disponibilizo o bloco de códigos que fiz.
Neste “projetinho”, preciso ainda fazer algumas melhorias, como por exemplo, torná-lo não obstrutivo, conforme puxão de orelha que ganhei do Maujor nos comentários.
11:53 em 20 de janeiro de 2009
Então, eu quero a morte do IE6 também, mais do que todos eu acho rs…
Mas isso realmente é um problema, porque aqui na agência trabalhamos muito com design de interface para consultorias e empresas de TI, aonde fazemos ou refazemos toda a parte visual dos sistemas dos clientes dessas empresas e o IE6 ainda é exigido, tipo, 50% ainda utilizam.
Hoje nós temos um menu onde a solução desse problema é resolvido por meio de um iframe/js, mas o menu é travado em 2 níveis apenas.
Outra solução seria quando ativassem os subniveis o jquery daria um find em todos os selects da página e daria um invisible, display none, que seja.
11:59 em 20 de janeiro de 2009
Sim, entendo Guilherme…ainda temos este problema tbm.
Sobre os selects, se conseguires implementar ai, me passe, aí deixo seus créditos no script. Se não for pedir demais, depois da implementação, deixe o site aqui pra ficar como um case a mais
Abraço
12:02 em 20 de janeiro de 2009
Ok, let’s do that =)
Abraço
19:09 em 23 de fevereiro de 2009
Pow tava procurando por isso a um bom tempo…
belo post fico melhor do q o do outro site ^.^
ja pois feito e explicado…
Parabens ai cara!! ^.^
10:17 em 24 de fevereiro de 2009
Ola John,
Que bom que gostou. Se aperfeiçoar o script, nos dê um toque.
Obrigado pelo comentário e visita!
Abraço
20:07 em 7 de abril de 2009
[...] Menu fácil fácil com jQuery e CSS [...]
18:36 em 28 de abril de 2009
Ótimo post muito útil.
11:25 em 5 de fevereiro de 2010
jackson, obrigada.
sou uma apaixonada por web, o maujor é meu guru e, agora, você. o que mais eu poderia querer????
estou querendo fazer um curso de jquery pra ordenar meu autodidatismo. vc poderia me orientar nesse sentido??? sou de sampa. obrigada. re.
11:27 em 5 de fevereiro de 2010
ah!!! acabo de assinar seu feed por email.
11:34 em 5 de fevereiro de 2010
Regina,
Obrigado pelo elogio e por assinar o nosso feed.
Quanto ao curso, creio que possas fazer um curso online da TreinaWeb, que vem se destacando neste mercado e que já ouvi falar muito bem. Confira: http://www.treinaweb.com.br/curso/jquery
Espero que lhe ajude. Obrigado pela participação!
Abraço
10:38 em 30 de julho de 2010
AHAHAHAHAHAHAHAH, essa foi BOA, maujor no meu site nao creio auhahuahuhu, qm pode pode neh, viu, to com um probleminha urgente aki Jackson, queria saber como faço para abrir um link do menu dentro de uma div, olha eu tentei de uma forma aqui, mas ele sempre abre em outra página, por jQuery e Ajax, mas n foi … gostaria de sua ajuda…att
AbraÇo…
7:59 em 2 de dezembro de 2010
Ótimo o post sobre jquery. O JQUERY veio para facilitar a vida dos programadores tornando mais rapido o desenvolvimento deixando as aplicacoes mais robustas e atraentes tambem. Parabens pelo post. Continue assim.