Faça o curso: jQuery na Prática

Vocês se lembram daqueles cardápios com a lista de pratos servidos nos restaurantes, ou até mesmo aqueles encartes que as pizzarias distribuem com a listagem de pizzas? Geralmente as informações contidas são nome do prato, valor e lista de ingredientes. Já pensaram em fazer isso com CSS? O site Web-graphics disponibiliza um tutorial ensinando a fazer um menu estilo cardápio de uma forma bem simples. Esse mesmo efeito pode ser aplicado à criação de um prefácio para livros, pois a lógica é a mesma para ambos.

Se você tem interesse em aprender a desenvolver um menu desse tipo, vamos utilizar listas de definição para o desenvolvimento do menu. Observe abaixo a marcação HTML:

<dl>
    	<dt>Nome do prato</dt>
        <dd class="price">Valor</dd>
        <dd class="ingredients">Descrição dos ingredientes</dd>
</dl>

Para cada listagem de prato, vamos utilizar de uma lista de definição com uma tag dt que conterá o nome do prato, uma tag dd com uma classe que foi definida como "price" para conter o valor do prato e uma outra tag dd com uma classe "ingredients" que conterá a descrição dos ingredientes. Utilize quantas tags dt e dd forem precisos para inserir pratos na lista.

Com a marcação HTML pronta, vamos partir para o CSS:

dl {background: url(dot.gif) repeat-x 0 1.6em; margin:0 0 1em; overflow:auto; width:100%}
dt, dd.price{background-color:#fff; font-size:1.8em; font-weight:bold}
dt {color:#F70000; float:left; padding-right:3px}
dd {margin:0}
dd.price{color:#aaa; float:right; padding-left:3px}
dd.ingredients{color:#555; font:italic 1.2em Georgia,Times,sans-serif; float:left; padding:3px 0; width:100%}

Alguns pontos-chave para que funcione corretamente:

• Na tag dl foi utilizado overflow:auto somente para "limpar o float", experimente removê-lo para ver o que acontece.
• Na tag dd com a classe ingredients é utilizado width:100%, pois ele simula um clear:both. A diferença é que ali a tag ocupa todo o espaço disponível, evitando problemas.

HTML e CSS ok, vamos ao exemplo de um Menu estilo cardápio com css. Você pode estilizá-lo como quiser.