Uno de los aspectos más importantes en el desarrollo de software y sitios web es la creación de menús. Microsoft y su creación más famosa, el sistema operativo Windows, deben tomarse como un buen ejemplo. A pesar de que este producto es utilizado por la inmensa mayoría de usuarios de PC en el mundo, las críticas no solo no disminuyen, sino que crecen constantemente. Básicamente, se trata del inconveniente de la ubicación de los elementos del menú. La siguiente es una descripción de cómo crear menús en CSS y Expression Web.
Instrucciones
Paso 1
Para comenzar a crear un menú horizontal, vaya a Administrar estilo, luego haga clic en el botón Nuevo estilo. Nombre el nuevo Selector de estilo ul li. ¡Importante! Asegúrese de que el archivo generado tenga la extensión drop-down.css. Para hacer un menú horizontal, indique al elemento creado que será exactamente horizontal. A continuación, determine el ancho de cada elemento del menú y elimine todos los puntos innecesarios colocados delante de todos los elementos de la lista.
Paso 2
Vaya a la opción Diseño, establezca el atributo Pantalla en Inline para hacer la alineación horizontal. A continuación, establezca el valor Left en el atributo Float y haga clic en el botón Aplicar. Establezca todos los elementos de la lista en una línea. Para que se coloquen ordenadamente y no se arrastren uno encima del otro, en el atributo Ancho, establezca el valor de Posición en 150 px. Compruebe que todos los elementos de la lista sean del mismo tamaño. A continuación, elimine los puntos delante de todos los elementos; para ello, vaya al atributo Lista y establezca el parámetro Ninguno en el elemento Tipo de estilo de lista. Haga clic en Aceptar para aceptar y aplicar todos los cambios.
Paso 3
Ajuste el tamaño y el estilo de la fuente para ul li. Para hacer esto, vaya a Administrar estilos y haga clic derecho en ul li, luego seleccione Modificar estilo. Aparecerá el cuadro de diálogo familiar. Vaya a Fuente, seleccione el atributo Familia de fuentes y configúrelo en Sans-serif, Arial, Helvetica. A continuación, ajuste el tamaño de fuente configurándolo en 0, 9. Después de eso, establezca el atributo Text-transform en Mayúsculas. Ajuste la altura de los elementos del menú en el atributo Altura - Posición, estableciendo el valor en 30 px.
Paso 4
Después de completar todas las acciones correctivas, guarde el archivo como menu.html. A continuación, pruebe el menú creado en diferentes navegadores para asegurarse de que funcione correctamente. Como puede ver, el diseño del menú horizontal es bastante simple.
