Editar

<p>Una de las cosas b&aacute;sicas para la navegaci&oacute;n de un sitio web son los men&uacute;s. As&iacute; que hay que saber c&oacute;mo crearlos si o si, y muy bien.</p> <p>Podemos crear menus horizontales ubicados bajo el banner del sitio tanto como arriba para la navegaci&oacute;n dentro de las principales secciones. Los menus verticales ubicados en algun costado del contenido podemos utilizarlos para los enlaces relacionados a la p&aacute;gina que se est&aacute; visitando, o utilizarlo para lo que se estime m&aacute;s conveniente.</p> <p><img src="http://farm3.static.flickr.com/2695/4502051332_ec72911cce_o.png" alt="" /></p> <p>Estos son unos ejemplos de como se ver&iacute;a el resultado de una buena maquetaci&oacute;n de menu con XHTML+CSS v&aacute;lida para todos los navegadores.</p> <h2>Creando el men&uacute; con CSS</h2> <p>Las propiedades para maquetar el menu tanto horizontal como vertical son:</p> <ul> <li>display</li> <li>float</li> <li>width</li> <li>height (opcional)</li> </ul> <p>M&aacute;s todas las propiedades que se desee para darle un estilo definido.</p> <p>La gracia es <strong>aplicar todas estas propiedades los enlaces</strong> para aprovechar sus distintos estados (:hover, :active, :visited o :focus) y para que estos puedan ser visualizados correctamente por cualquier navegador. Recuerda que Internet explorer 6 no admite dichos estados en otros elementos que no sean los hiperv&iacute;nculos.</p> <p>Utilizaremos el siguiente XHTML para los dos men&uacute;s de ejemplos:</p> <pre class="codigo"><span class="c1"><span class="c2"><span class="c3"><span class="c4"><span class="c5"><span><span><span><span><span>&lt;ul id="menu"&gt;<br />&lt;li&gt;&lt;a href="#enlace1" title="Inicio, t&iacute;tulo del enlace 1"&gt;Inicio&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a href="#enlace2" title="Servicios, t&iacute;tulo del enlace 2"&gt;Servicios&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a href="#enlace3" title="Clientes, t&iacute;tulo del enlace 3"&gt;Clientes&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a href="#enlace4" title="Galer&iacute;a de im&aacute;genes, t&iacute;tulo del enlace 4"&gt;Galer&iacute;a&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a href="#enlace5" title="Contacto, t&iacute;tulo del enlace 5"&gt;Contacto&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt;</span></span></span></span></span></span></span></span></span></span></pre> <h3>El menu CSS horizontal</h3> <p>La propiedad <strong>display</strong> en conjunto de su valor <strong>block</strong> nos permite transformar un elemento a en bloque, hablamos de los propios enlaces o del selector "a". <strong>Float</strong> m&aacute;s un valor <strong>right </strong>o <strong>left </strong>nos permite hacer que el enlace convertido a en bloque quede junto a otro formando una cadena horizontal. <strong>Width </strong>y <strong>height</strong> ayudan para formatearlo con la medida que queramos.</p> <p>El siguiente c&oacute;digo CSS identifica las principales propiedades que mencionamos para maquetar el menu horizontal:</p> <pre class="codigo"><span class="c1"><span class="c2"><span class="c3"><span class="c4"><span class="c5">ul#menu {<br /> height: 25px;<br />}<br /><br />ul#menu li {<br /> display: inline;<br />}<br /><br />ul#menu li a {<br /> display: block; <br /> width: 120px;<br /> height: 25px;<br /> float: left;<br />}</span></span></span></span></span></pre> <p>Hecho esto tendremos inmediatamente lista la maquitaci&oacute;n y solo deber&iacute;amos empezar con la creatividad aplicando las propiedades que queramos para estilizar el menu. Es relativamente simple.</p> <h3>El menu CSS vertical</h3> <p>En este ejemplo se cumple el mismo rol pero algo cambiado. La propiedad <strong>width </strong>debe estar definida en el menu y no en los enlaces (ellos se adaptan a esta medida). Adem&aacute;s, el menu es el que flota a la izquierda del contenido y los enlaces solo se deben convertir a elementos en bloque.</p> <p>Agregamos un nuevo div en el ejemplo del XHTML para el contenido, para que este, quede con un margen igual a la medida del menu, mas un padding para separarlos.</p> <pre class="codigo"><span class="c1"><span class="c2"><span class="c3"><span class="c4"><span class="c5">ul#menu {<br /> float: left;<br /> width: 130px;<br />}<br /><br />ul#menu li {<br /> display: inline;<br />}<br /><br />ul#menu li a {<br /> display: block;<br /> height: 25px;<br />}<br /><br />#contenido {<br /> margin-left: 130px;<br /> padding-left: 20px;<br />}<br /></span></span></span></span></span></pre> <p>Y bien, como dijimos antes, se debe aplicar la imaginaci&oacute;n para hacerlo m&aacute;s elegante.</p> <p>Puedes descargar el ejemplo del <a href="../../archivos/menu-css-vertical.zip">menu vertical</a> y el del <a href="../../archivos/menu-css-horizontal.zip">menu horizontal</a>. Ambos estan m&aacute;s producidos en c&oacute;digo y explicados con comentarios.</p>

o salir