Cómo hacer un menú CSS Horizontal Vertical

Cascading Style Sheets o CSS, es una herramienta útil, ya que separa la mayor parte del formato visual y estructural de un documento HTML del contenido del documento, por lo tanto más fácil de leer y editar. Esto se hace colocando el formato en un documento separado. CSS también permite un acceso a herramientas de diseño Web y formatos que no están disponibles en HTML solo. En lugar de construir menús en una serie de tablas anidadas, como se debe hacer en HTML puro, el diseñador puede desarrollar con rapidez y eficacia las listas que puede se vista horizontal o vertical. Cambio de un menú horizontal existente verticales requiere una pequeña cantidad de cambio de formato.

Instrucciones

1 Localizar los elementos del menú en el archivo HTML. Hay varias maneras para mostrar un menú horizontal, por lo que el formato exacto dependerá del archivo original. Retire todas las etiquetas de formato que rodean directamente los contenidos de la lista.

2 Crear una nueva lista desordenada que rodea el contenido del menú. Comience con "<ul id = nav>" (reemplazando "nav" con su opción de identificador). Coloque una abertura "<li>" y el cierre "</ li>" alrededor de cada elemento que necesita su propio cuadro de menú separado. Después de todo el contenido está marcado, cierre la lista desordenada con la etiqueta "</ ul>".

3 Busque la entrada correspondiente en el archivo CSS que aplica al menú original. Con el formato actual y la identificación de estas entradas dependerán de cómo se creó el menú original. Una vez que haya localizado las entradas antiguas, eliminarlos del archivo CSS.

4 Formar una nueva entrada en el archivo CSS para la lista desordenada de nueva creación. Tipo "#nav ul" para identificar la entrada con el identificador único que se establece en el archivo HTML, recordando reemplazar "nav" con el ID de que en realidad se utilizó. Coloque una llave de apertura "{" y comenzar una nueva línea. Tipo "list-style-type: none;" "Margin: 0;" y "padding: 0;" cada uno en una línea separada. El primer elemento elimina las viñetas y los otros dos controlar el estilo visual del menú. Añadir "}" para cerrar la entrada.

5 Añadir cualquier otro formato que desea aplicar a la apariencia visual del menú. Añadir bordes o ajustar el margen y el relleno, si se desea. Ajuste del margen y el relleno a cero sólo se realiza para anular la configuración predeterminada del navegador, por lo que cambiar para adaptarse a su diseño. Pruebe diferentes combinaciones de ajustes para crear diferentes aspectos para la lista.

Consejos y advertencias

• Una entrada de ejemplo en HTML de una lista desordenada:
• <Ul id = nav>
• <Li> <a href="home.html"> principal </a> </ li>
• <Li> <a href="products.html"> productos </a> </ li>
• <Li> <a href="about.html"> Sobre </a> </ li>
• </ Ul>
• Una entrada de ejemplo CSS:
• #nav ul
• {
• list-style-type: none;
• margin: 0;
• padding: 0;
• }
• Cada elemento de la lista con un separada etiqueta <li> aparecerá en una caja separada en la lista.