Cómo Hacer Un Menú Deslizante

Tabla de contenido:

Cómo Hacer Un Menú Deslizante
Cómo Hacer Un Menú Deslizante

Video: Cómo Hacer Un Menú Deslizante

Video: Cómo Hacer Un Menú Deslizante
Video: Como hacer un menú desplegable con HTML y CSS 2024, Mayo
Anonim

Uno de los aspectos más importantes del desarrollo de sitios web y software es la creación de menús. Un hermoso menú deslizante sigue siendo un punto de referencia para muchos propietarios y programadores de sitios web. Esto se puede hacer usando las herramientas CSS y Expression Web.

Cómo hacer un menú deslizante
Cómo hacer un menú deslizante

Instrucciones

Paso 1

Abra Expression Web y vaya a Administrar estilo para comenzar a crear un menú deslizante y presione la tecla Nuevo estilo. Nombre el nuevo Selector de estilo ul li. Asegúrese de que el archivo generado tenga la extensión drop-down.css. Para crear un menú deslizante, especifique la posición apropiada en la pantalla. Determine el ancho de cada uno de los elementos del menú y elimine los puntos innecesarios que puedan estar frente a ellos.

Paso 2

Ejecute la opción Diseño y establezca el atributo Pantalla. Déle un valor Inline apropiado para alinearlo en la pantalla. Establezca el atributo Flotante en Izquierda y presione la tecla Aplicar. Establezca todos los elementos de la lista en una línea. Para mantenerlos en un orden ordenado y no superponerse, establezca el atributo Ancho en Posición en la forma de 150 px. Asegúrese de que todos los elementos de la lista sean del mismo tamaño. Elimine los puntos delante de cada elemento yendo al atributo Lista y estableciendo el Tipo de estilo de lista en Ninguno. Haga clic en "Aceptar" para aceptar los cambios y surtir efecto.

Paso 3

Ajuste el estilo y el tamaño de fuente para ul li. Vaya a Administrar estilos y haga clic derecho en ul li, eligiendo Modificar estilo. Verá el menú de diálogo ya familiar. Vaya a Fuente, seleccione Familia de fuentes y establezca este atributo en Helvetica, Arial, Sans-serif. Ajuste el tamaño de la fuente y establézcalo en 0, 9. Establezca el atributo Text-transform en Mayúsculas. En el atributo Altura - Posición, especifique la altura exacta de los elementos del menú estableciendo el valor en 30 px.

Paso 4

Guarde el archivo como menu.html cuando se completen todas las acciones correctivas. Pruebe el menú que acaba de crear en varias aplicaciones y navegadores para ver si funciona. Como puede ver, no es difícil crear un menú de este tipo.

Recomendado: