Menu estilo cardápio com CSS

Postado por: Pedro Rogério 7 de outubro de 2009

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 que eles produzem onde 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 a criação de um prefácio para livros, pois a lógica do tutorial é a mesma para ambos.

Se você tem interesse em aprender a desenvolver um menu desse tipo, vamos utilizar de 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 de quantas tags dt e dd forem preciso 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%}

O CSS não tem muito segredo, mas vou listar 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 alí 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. Esse é um bom exemplo para criação de um cardápio on-line para restaurantes ou prefácio de algum livro.