Algumas explicações prévias:

Ha algum tempo atrás, publiquei um post sobre como fazer um menu com jQuery, utilizando um método de evento do mouse (hover). Usaremos o mesmo método, mas de uma forma um pouco diferente. Por padrão o metodo .over(), espera duas funções como argumentos, uma para quando o mouse estiver em cima (over) e outra quando o mouse sair do ponto (out).  Neste menu utilizaremos o encadeamento de métodos do jQuery e solucionaremos com apenas uma função, utilizando o sliderToggle().

HTML

A estrutura HTML é bem simples. É uma <ul> com seus nós filhos <li>´s. Filiaremos os sub-menus, que também são estrutura de <ul> e <li>,  para fazer o nosso menu com sub-nível. O interessante é aprender o conceito, depois disto você poderá fazer a estrutura de várias formas e manipular DOM através do jQuery.

<ul>
    <li><a href='#'>Item um</a>
        <ul>
            <li><a href='#'>Sub-Item um / um</a></li>
            <li><a href='#'>Sub-Item um / dois</a></li>
            <li><a href='#'>Sub-Item um / três</a></li>
            <li><a href='#'>Sub-Item um / quatro</a></li>
        </ul>
    </li>
    <li><a href='#'>Item dois</a>
        <ul>
            <li><a href='#'>Sub-Item dois / um</a></li>
            <li><a href='#'>Sub-Item dois / dois</a></li>
            <li><a href='#'>Sub-Item dois / três</a></li>
            <li><a href='#'>Sub-Item dois / quatro</a></li>
        </ul>
    </li>
    <li><a href='#'>Item três</a>
        <ul>
            <li><a href='#'>Sub-Item três / um</a></li>
            <li><a href='#'>Sub-Item três / dois</a></li>
            <li><a href='#'>Sub-Item três / três</a></li>
            <li><a href='#'>Sub-Item três / quatro</a></li>
        </ul>
    </li>
   <li><a href='#'>Item quatro</a>
       <ul>
           <li><a href='#'>Sub-Item quatro / um</a></li>
           <li><a href='#'>Sub-Item quatro / dois</a></li>
           <li><a href='#'>Sub-Item quatro / três</a></li>
           <li><a href='#'>Sub-Item quatro / quatro</a></li>
       </ul>
   </li>
</ul>

O comportamento visual desta estrutura pode e deve ser feito com CSS, para deixar o menu mais atrativo. Não vou abordar css, pois não é o sentido deste post. O comportamento visual fica por sua conta e imaginação!

jQuery

A solução em 6 linhas:

$(document).ready(function(){// quando o DOM estiver pronto execute
    $('li ul').hide();// Esconda os menus filhos de <li>
    $('li').hover(function(){// quando passar o mouse em cima da <li>
        $(this).find('ul:first').stop(true, true).slideToggle();// procure nesta li a primeira ul, se um evento estiver disparado ele para(.stop()) e alterne o slider.
    });
});

A solução é bem simples. Eu digo com as palavras do jQuery que quando o documento tiver pronto “DOM todo lido e carregado pelo browser” (.ready), execute as tarefas abaixo. Primeiro esconda as ul´s filas de li,  e espere o evento do mouse (.hover), se alguém passar ponteiro do mouse em cima de alguma li, dispara a ação “o evento” para procurar nesta li que o mouse passou em cima, a primeira ul e, alterne o comportamento dela entre slide down e up, tornando o sub menu visível e não visível.

O (.stop()) é para corrigir o comportamento do .hover() que coloca os eventos na fila, e fica mostrando e escondendo, caso o usuários passe o mouse diversas vezes.

Este menu irá utilizar um método de evento do mouse “hover” e não permite navegação através de teclado, por tantanto ele não é acessível, mas caso seu objetivo seja um menu inclusivo leia um outro post onde eu descrevo um menu drop down acessível.

Primeiro vou criar o documento de marcação para o menu, que no caso será o XHTML.

<div id="menu"><span></span>
   <ul>
      <li><a href="#">Item 1</a>
         <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
            <li><a href="#">sub 3</a></li>
         </ul>
      </li>
      <li><a href="#">Item 2</a>
         <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
            <li><a href="#">sub 3</a></li>
         </ul>
      </li>
      <li><a href="#">Item 3</a>
         <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
            <li><a href="#">sub 3</a></li>
         </ul>
      </li>
      <li><a href="#">Item 4</a>
         <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
            <li><a href="#">sub 3</a></li>
         </ul>
      </li>
      <li><a href="#">Item 5</a>
         <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
            <li><a href="#">sub 3</a></li>
         </ul>
      </li>
   </ul>
<span class="right"></span></div>

Agora que os nós do menu estão feitos,  formato ele utilizando CSS.

*{margin:0;padding:0}//um reset básico, pra gente poder controlar melhor a página
//Os códigos CSS a baixo podem variar bastante, depende da sua necessidade e criatividade
#menu{background:url(../Images/bg-menu.jpg) repeat-x; height:37px; width:80%; margin:20px auto}
#menu span{height:37px; width:5px; background:url(../Images/bg-menu-esq.jpg) no-repeat; float:left;}
#menu span.right{background:url(../Images/bg-menu-dir.jpg) no-repeat; float:right;}
#menu ul{position:relative;z-index:2;}
#menu li{float:left; list-style:none; display:inline;}
#menu a{text-decoration:none;display:block; font-size:12px; font-family:Arial;color:#000; padding:10px;}
#menu a:hover{text-decoration:none}
#menu ul li ul{position:absolute;z-index:1;background:#f5f8fd url(../Images/bg-sub-menu.jpg) repeat-x !important;border:1px solid #cfd7ea;border-top:none;
	-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
#menu ul li ul li{float:none;display:block;padding:0 10px !important; border-top:1px solid #dbe2ec;}
#menu ul li ul li:hover{background:#e2ecf8;color:#26156E;}

Agora vamos ao que interessa, o jQuery

/**
 * @author Felipe
 *Se for usar me avisa e comenta o post 
 */

$(document).ready(function(){

    $("ul li ul").hide();//aqui eu escondo as ul´s que forem filhas de li.
    $("ul li").hover(function(){//O método hover recebe dois parametros que são duas funções.
        $(this).find("ul:first").slideDown("slow"); //aqui você faz o que quiser quando o mouse estiver em cima

    }, function(){
        $(this).find("ul:first").slideUp("slow"); //aqui é como se fosse o callback e você também faz o que quiser.

O jQuery como você pode ver, é o arquivo mais simples e com poucas linhas de código.

Utilizamos o método hover que recebe dois parâmetros, que é referente a dois estados do mouse, o mouse hover e mouse down.  Em jQuery esse método pode receber duas funções como parâmetros, que é o que fizemos e após eu utilizo o this pra referenciar ao elemento que está sendo acionado e com o find peço pra ele procurar naquele elemento o elemento filho, no caso o primeiro ul que existir e por fim faço o slideDown e Up.
Escolhi esconder o ul filho de li “o sub-menu” com o jQuery, por que se o javaScript estiver desabilitado ou por algum motivo não estiver funcionando, o usuário poderá ver o menu pois ele ficará aberto, se você optar em esconder o menu inicialmente com o CSS o seu menu poderá ficar inutilizável.

Essa foi uma demonstração de um menu simples e bem interessante, porém o jQuery tem plugns incríveis e se você quiser implementar um super menu, você poderá instalar algum plugin, como alguns que vou listar.

• Superfish
• iPod-style Drilldown Menu
• Plugins de menu no site do jQuery

Soluções inclusivas, em minha opinião são vitais para profissionais não só da web.

Entre tanto o que se vê por ai não é exatamente isso, mas se você está lendo este texto é porque você está há vários passos na frente de outros profissionais, e está com o pensamento certo e inclusivo.

Esta solução de menu acessível é muito fácil e funciona bem em vários navegadores como no IE6 + e em todos os browsers que dão suporte a web Standards. Funciona com teclado e mouse, e se o JavaScript estiver desabilitado dá pra acessar todos os links, mas os subitens não aparecem visualmente.

Veja o menu funcionando e vamos aos detalhes:

XHTML

É o documento de marcação onde vamos criar os nós do menu.

Vamos criar uma lista não ordenada “ul” e seus respectivos filhos e adicionar id e classes para podermos manipular alguns elementos.

<!-- As tags como o DOCTYPE, head, body e demais não vou descrever aqui para o post ser mais objetivo -->
<ul id="nav">
	<li><a href="index.html">Home</a></li>
	<li class="submenu"><a href="#" class="bullet">Portfólio</a>
		<ul>
			<li><a href="sites.html">Sites</a></li>
			<li class="submenu"><a href="#" class="bullet">Interfaces</a>
				<ul>
					<li><a href="graficas.html">Gráficas</a></li>
					<li><a href="digitais.html">Digitais</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="quemsomos.html">Quem Somos</a></li>
	<li><a href="contato.html">Contato</a></li>
</ul>

CSS

É o documento de apresentação, onde vamos posicionar e dar beleza ao nosso menu.

Aqui é onde você provavelmente ira mexer mais, para poder customizar seu menu acessível.

#nav, #nav ul {
	width: 70em;
	list-style: none;
	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 0;
 }
#nav li {
	float: left;
 }
#nav a {
	display: block;
	width: 10em;
	height: 2em;
	line-height: 2;
	text-align: center;
	text-decoration: none;
	background-color: #69c; /* IE precisa desta declaração */
	color: #fff;
	border: 1px solid #ccc;
	border-width: 0 1px 1px
 }
#nav a:hover {
	text-decoration: none;
	background: #c7daec;
	color:#69c;
 }
#nav a.bullet {
	background:#69c url(bullet.gif) no-repeat right;
 }
#nav a.bullet:hover {
	background: #c7daec url(bullet-over.gif) no-repeat right;
 }
#nav li ul {
	position: absolute;
	left: -1000em;
	width: 10em;
	margin: 0;
 }
#nav ul ul {
	margin: -2.1em 0 0 10.1em;
 }
#nav li:hover ul ul, #nav li.over ul ul {
	left: -1000em;
 }
#nav li:hover ul, #nav li li:hover ul, #nav li.over ul, #nav li li.over ul {
	left: auto;
}

JavaScript

O arquivo JavaScript é responsável pela ação.

É neste documento que vamos verificar os links e os subitens da lista e vamos fazer com que ele se encarregue em abrir os subitens.

<script type="text/javascript">

var dropdown_intervalId;
var dropdown_ulId = (!dropdown_ulId) ? 'nav' : dropdown_ulId;
var dropdown_delay = (!dropdown_delay) ? 0 : dropdown_delay;

function dropdown_init()
{
 try
 {
  var as = document.getElementById(dropdown_ulId).getElementsByTagName('a');

  for (var a = 0; a < as.length; a++)
  {
   as[a].onfocus = function() { dropdown_expand(this) }
   as[a].onmouseover = function() { dropdown_expand(this) }
   as[a].onblur = function() { dropdown_colapse(dropdown_delay) }
   as[a].onmouseout = function() { dropdown_colapse(dropdown_delay) }
  }

  dropdown_colapse(0);

 } catch(e){}

}

function dropdown_expand(caller)
{
 try
 {
  clearInterval(dropdown_intervalId);

  var uls = caller.parentNode.parentNode.getElementsByTagName('ul');

  for (var ul = 0; ul < uls.length; ul++)
   uls[ul].style.left = "-1000em";

  caller.parentNode.getElementsByTagName('ul')[0].style.left = "auto";

 } catch(e){}

}

function dropdown_colapse(milliseconds)
{
 try
 {
  clearInterval(dropdown_intervalId);

  dropdown_intervalId = setInterval(function()
  {
   var uls = document.getElementById(dropdown_ulId).getElementsByTagName('ul');

   for (var ul = 0; ul < uls.length; ul++)
    uls[ul].style.left = "-1000em";

   clearInterval(dropdown_intervalId);

  }, milliseconds, null);

 } catch(e){}

}

window.onload = dropdown_init;
</script>

Esse menu foi tema de debate na lista Acesso Digital, e esse post foi baseado na resposta do Gil Porta membro da lista, e o menu foi desenvolvido por Alexandre Junqueira.

A sintaxe é muito fácil “String.length” onde string é o objeto que queremos contar e o length é quem se encarregará pela contagem.

Obs: está propriedade também conta espaço em branco. Muito bom pra verificar se a senha foi digitada com espaço em branco.

Vamos ver um exemplo simples.

<script type="text/javascript" language="javascript">

   var caracteres = "Felipe não sabe de tudo, mas aprende um pouco a cada dia";

   var contar = caracteres.length;

   alert(contar);

</script>

O resultado será um alert com o numero 56, contando com os espaços em branco, que ele interpreta como caracteres.

Agora eu quero que o nosso código varra a variável, e teste se existe a letra “e”, se achar vai informar que achou a letra “e”, senão ele vai dizer que não achou “e”,  e vai mostrar o caractere que achou.

<script type="text/javascript" language="javascript">

 var caracteres = "Felipe";

     for(i=0; i< caracteres.length; i++){

        if(caracteres[i] == "e" || caracteres[i] == "E" ){

           alert("Achei o " + caracteres[i]);

        } else {

           alert("Não achei e, encontrei o " + caracteres[i]);

        }

     }

</script>

O resultado será uma serie de alerts até a condição ser satisfeita, e todos os caracteres serão contados e testados.

O ideal é trabalhar com DOM, e escrever no documento ao invés de alerts, mas como estamos apenas estudando a propriedade length, escolhi alert, mas você pode escolher um nó ou id do documento e escrever nele, Ex: screver = document.getElementById(“idOndeVoceQuerEscrever”).innerHTML = variável + “texto e tags”;

Mas isso é para próximos posts.

A melhoria progressiva é uma estratégia de web design que enfatiza a acessibilidade, a marcação semântica e estilo externo e tecnologias de script.

Ela usa tecnologias da web em camadas que permite a todos o acesso a conteúdos e funcionalidades básicas de uma página web usando qualquer navegador ou ligação à Internet, fornecendo também aqueles com software de navegação mais largura de banda ou mais avançado de uma versão melhorada da página.

A estratégia é uma tentativa de subverter a estratégia de web design tradicional conhecida como degradação graciosa, onde designers iriam criar páginas Web para os navegadores mais recentes que também funcionam bem em versões antigas do navegador.

Degradação graciosa deveria permitir que a página de degradar ou manter-se apresentável, mesmo que certas tecnologias assumida pelo projeto não estava presente, sem ser brusco para o usuário do software, como mais velhos.

Na prática, a degradação graciosa foi suplantada por uma atitude que o usuário final deve apenas atualizar. Esta atitude é devido a limitações de tempo e orçamento, o acesso limitado a testes de software e browsers alternativos, bem como a crença generalizada de que os navegadores são gratuitos.

No Progressive Enhancement (PE), a estratégia é deliberadamente invertida: um documento de marcação de base é criada, voltada para o menor denominador comum de funcionalidades de software de navegação e, em seguida, o designer adiciona funcionalidades ou melhorias para a apresentação e comportamento da página, utilizando tecnologias modernas, como Cascading Style Sheets ou JavaScript (ou outras tecnologias avançadas, como Flash ou Java applets ou SVG, etc ) Todas essas melhorias são ligados externamente, de modo a evitar forçar navegadores de menor capacidade para comer dados que eles não entendem e não pode lidar com, ou que teria pântano sua ligação à Internet.

A abordagem do PE é derivada da experiência precoce Pulido (C 1993-4) com SGML, antes de trabalhar com HTML ou qualquer linguagem de apresentação na Web, bem como das experiências mais trabalhar com CSS para resolver bugs do navegador.

Nesses contextos cedo SGML, marcação semântica foi de fundamental importância, visto que a apresentação foi quase sempre considerada separadamente em vez de ser incorporado na marcação própria. Este conceito pode ser referido nos meios de marcação como a regra da separação de apresentação e conteúdo, a separação entre conteúdo e estilo, ou de separação da semântica e da apresentação.

À medida que a Web evoluiu em meados dos anos noventa, mas antes da CSS foi introduzida e amplamente apoiada, esta regra básica do SGML foi repetidamente violada por extensores HTML.

Profissionais como Eric Costello, Owen Briggs, Dave Shea, entre outros, mostraram como usar o CSS para fins de layout.

Libertando os designers a usar tecnologias poderosas como o CSS para gerir todas as tarefas de apresentação, JavaScript para melhorar comportamento e XHTML para estrutura.