menu-css-restaurante

Bien, has creado un restaurante, tienes todo listo, la comida, los cubiertos, pero te falta el menú. No sabes cómo hacerlo así que te lo inventas en CSS. Eso es lo que os vamos a enseñar en esta entrada, como crear un menú de restaurante a base de CSS:


La estructura HTML:

Una de las posibles maneras de crear el menú es utilizar

alrededor de cada ración, incluyendo su precio y descripción:

<h2>Antipasti</h2>
<dl>
<dt>Bruschetta</dt>
<dd class="price">5 Euro</dd>
<dd class="ingredients">Sliced and roasted bread with tomatoes, extra virgin oil, garlic and basil.</dd>
</dl>

<dl>
<dt>Caprese</dt>
<dd class="price">6 Euro</dd>
<dd class="ingredients">Mozzarella with fresh sliced tomatoes, extra virgin oil and oregano.</dd>
</dl>
<dl>
<dt>Prosciutto e melone</dt>
<dd class="price">8 Euro</dd>
<dd class="ingredients">Sweet Parma Prosciutto with melon slices.</dd>
</dl>

El código CSS:

Ahora vamos a estilizar el menú. Si nos damos cuenta, usamos una imagen de fondo en forma de puntos (dot.gif) , que se repiten con el eje Y constante, y el eje X, variable:

body {background: #FFF;text-align:center}
p {text-align: center;color: #50A7FF}
a {color: #0055EA}

div#menu {width:550px;margin: 0 auto;
font: 90% "Trebuchet MS",Arial,sans-serif;text-align:left}
h2 {margin: 1em auto 0.3em;color: #008C00;
font-size: 250%;text-align:center}

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

Estandarización

HTML 4.01 Strict válido

CSS 2.1 Válido

Ejemplo final

Para terminar, ofrecemos un ejemplo de su funcionamiento.

Vía | Web-graphics

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!