A usabilidade ainda não é dominada por todos os desenvolvedores. Aplicando os códigos JavaScript abaixo no menu do seu site, você pode ter uma grande melhora no site. Nós enquanto desenvolvedores, devemos nos atentar à detalhes de nossos projetos que deêm uma melhor experiência de navegação para nossos usuários. Um grande aliado dessa tarefa é o uso de menu em JavaScript.
O uso de menu em JavaScript pode parecer apenas para fins estéticos, mas a forma que você o usa, pode transformar a vida do usuário e agregar ao seu site, um dos princípios básicos para uma navegação coesa, a Usabilidade.
Tudo bem que nem todos conhecemos o básico do JavaScript, nem tão pouco somos experts nessa linguagem, mas existem facilitadores de nosso trabalho, como frameworks e pessoas que escrevem artigos muito interessantes e didáticos.
Abaixo está um artigo muito legal e com dicas valiosas para você agregar ao seu menu, efeitos em JavaScript que os usuários do seu site vão agradecer.
Artigo Original http://www.cssnewbie.com/using-javascript-to-style-active-navigation-elements/
Eu sou meio deficiente com eficiência quando estou escrevendo código para web. Quando me vejo escrevendo a mesma funcionalidade mais de uma vez ou duas, eu tento considerar se o meu código repetido poderia ser envolvido em uma função de algum tipo.
A navegação é uma das áreas em que frequentemente eu tento melhorar a minha eficiência. Eu gosto que meus elementos de navegação executem duas funções. Eu quero que eles:
Em outras palavras, eu quero algum tipo de indicação visual na minha navegação que mostre ao meu usuário, dentro de qual seção do meu site ele está. Você pode ver isso no site Newbie CSS: se você clicar sobre o link TOC (Table of Contents) na barra na parte superior da página, você verá que o link adquire um estilo especial quando a tabela de conteúdo é carregada.
Agora, eu poderia definir manualmente isso em cada página usando uma classe CSS. Mas isso é ineficiente – dependendo do tamanho do meu site, eu poderia acabar escrevendo dezenas ou centenas de linhas de código one-off. E por que ter todo esse trabalho, quando você poderia apenas compactar tudo isso em uma função JavaScript agradável?
Primeiro, vou explicar a lógica por trás das minhas funções – porque elas não funcionam igualmente para cada site. Então eu vou levá-lo através de alguns exemplos do código que faz tudo acontecer.
Todas as minhas funções são muito limpas, tem uma estrutura de diretório simples. Por exemplo, se você tem uma seção Sobre, uma seção de Blog, e uma seção de Contato em seu site, uma estrutura lógica de diretório pode ser:
/
/ Sobre /
/ Blog /
/ Contato /
E se você tivesse várias entradas de Blog dentro do seu diretório Blog, sua estrutura poderia crescer assim:
/
/ Sobre /
/ Blog /
/ Blog / Post-um /
/ Blog / Post-dois /
/ Blog / Post-três /
/ Contato /
E, portanto, uma função poderia logicamente presumir que qualquer coisa dentro do diretório blog deve ser considerada uma parte da seção do blog de seu site, e marcar o link do blog como ativo para essas páginas. Isso torna o nosso trabalho muito mais fácil. E, felizmente, a maioria das plataformas CMS fazem este tipo de estrutura de diretórios serem muito fáceis de criar.
As funções também presumem que você quer ter uma estrutura de diretórios com pouca profundidade, ou que você não está linkando para muitos diretórios similares aninhadamente. O que quero dizer com isto é, se você tem este tipo de estrutura:
/
/ Contato /
/ Contato / Eu /
/ Contact / Eu / Aqui /
E você queria o link para ambos /Contato/ e /Contato/Eu/Aqui/ na sua barra de navegação, você pode acarretar problemas de distinção entre os dois. Há maneiras de aumentar a precisão, mas eles vêm com o custo de flexibilidade.
Escrevi sobre este método antes, quando eu falei sobre construção de barra de navegação inteligente. Esta técnica é boa porque não depende de qualquer frameworks JS, assim você pode adicioná-la a sites antigos sem precisar jQuery ou coisa parecida. A função básica é assim:
[javascript]function setActive () {
aObj = document.getElementById(‘nav’)
.getElementsByTagName(‘a’);
for(i=0;i=0) {
aObj[i].className=’active’;
}
}
}[/javascript]
Esta função procura por um elemento com um id “nav” (presumidamente sua barra de navegação), então verifica cada tag âncora dentro dela. Em seguida, compara as tags href e as tags âncora com a URL das páginas. Se a tag href estiver contida dentro da URL, em qualquer lugar, este código cria para o link a classe=”ativo”, a qual eu posso, então, criar um estilo especial no meu CSS.
Como um exemplo do que quero dizer com tudo isso, se eu tivesse uma tag de âncora na minha barra de navegação que ligasse para “/Blog /” e a página que eu estava era “/Blog /Este-é-o-post.html” , o meu link do blog seria denominado como ativo, porque “/Blog /” está contido em “/Blog/Este-é-o-post.html”.
Como nota final, você não gostaria de ativar essa função até a página terminar de carregar: se você ativá-lo cedo demais, seus links não existiriam ainda! Então você pode ativá-lo no final do seu documento, ou dinamicamente chamá-lo quando a página terminar de carregar, com algo como isto:
[javascript]window.onload = setActive;[/javascript]
Se você já está carregando um framework como o jQuery (como eu faço em quase todos os sites que eu trabalho hoje em dia), esse tipo de funcionalidade pode ser escrita mais sucintamente. E como eu disse anteriormente, eu sou um pateta para a eficiência. Aqui está uma solução jQuery que faz essencialmente a mesma coisa em um espaço muito menor:
[javascript]$(document).ready(function() {
$(‘#nav a[href^="/’
+ location.pathname.split("/")[1] + ‘"]’)
.addClass(‘active’);
});[/javascript]
Esta função faz uso de ambos, JavaScript nativo e truques jQuery para alcançar um novo nível de concisão. Primeiro, a coisa toda é envolta em um “documento pronto” da função, o que significa que não será acionado até que a página seja carregada e os nossos links estejam no lugar. Em seguida, nós estaremos olhando para nossas tags de âncora dentro da nossa ID “nav”. E realmente, nós estamos procurando por uma tag de âncora muito específica: aquela cuja href começa com (^ =) uma barra, seguida por uma parte de nossa página de localização(location.pathname). Especificamente, nós estamos olhando para o primeiro diretório na URL da nossa página.
Estamos fazendo isso, fazendo uso do método de divisão do JavaScript (), que nos permite pegar qualquer string (por exemplo, “/Blog/este-é-o-post.html”) e dividi-lo em uma matriz com base em uma substring (no nosso caso, a barra). Se você estiver familiarizado com PHP, é semelhante à função explode (). No nosso exemplo, nós acabaríamos com uma matriz de três partes que ficaria assim:
["","Blog","este-é-o-post.html"]
O que significa que, se olharmos para o segundo valor da nossa matriz (matrizes começam a contar do zero, então [1] é o segundo valor), que deve dar o nosso diretório de primeiro nível (“blog”, no nosso exemplo). Isso nos permite combinar quaisquer diretórios filho subseqüentes com nosso pai na barra de navegação.
Nossa função jQuery funciona muito bem na maioria dos cenários, mas não se você tiver um link para “home” onde você está apenas apontando para o diretório raiz, como este:
E como a tendência é ter um link como esse, eu precisava de uma solução alternativa. Aqui está uma maneira de contornar isso com um pequeno código em razão do nosso caso especial:
[javascript]
$(document).ready(function() {
if(location.pathname != "/") {
$(‘#nav a[href^="/’
+ location.pathname.split("/")[1] + ‘"]’)
.addClass(‘active’);
} else $(‘#nav a:eq(0)’).addClass(‘active’);
});[/javascript]
Aqui, estamos conferindo para ver se estamos no diretório raiz. Se assim for, estamos ignorando o loop através de nossas tags âncora e apenas fazendo uma tag âncora ativa específica. Neste caso, eu estou dando a classe ativa para a primeira âncora na nossa lista (que é o local mais comum para um link “home”).
E é isso. Se você souber de formas ainda mais eficientes para realizar essa tarefa, eu adoraria conhecê-las na seção de comentários. Ou se você é hábil em um framework diferente de jQuery, sinta-se à vontade para compartilhar o código equivalente!
Bem, como vocês puderam perceber, o uso de menu em JavaScript além de dar um aspecto visual mais dinâmico e interessante ao site, dá a ele uma usabilidade muito importante para o usuário não se perder dentro do site e consequentemente desistir de navegar dentro dele.
Após este artigo, acredito que o JavaScript adquiriu novos admiradores e curiosos que, assim como eu, com certeza vão explorar suas funcionalidadese e procurar estudar mais a fundo esta linguagem para agregarem mais qualidade e dinamicidade em seus projetos.
Boa Sorte.
O inglês está entre os idiomas mais falados no mundo e tem se tornado um requisi...
→ Leia mais...
O Microsoft PowerPoint é uma ferramenta útil para fazer apresentações,
→ Leia mais...
O Portable File Format (PDF) é uma das plataformas mais versáteis para qualquer...
→ Leia mais...
Sócio e Co-fundador das empresas Estúdio Site Informática e Academia da Tecnologia, atua na área de TI desde seus 18 anos de idade. É formado em Analise de Sistemas e é Desenvolvedor Back End com mais de 12 Anos de experiência. Especialista / Desenvolvedor em Gerenciadores de conteúdos Open Source como Joomla e Drupal, Programador PHP e Entusiasta do Laravel, Especialista na Ferramenta LMS Moodle.
→ Veja o Perfil Completo
